<template>
  <q-page class="contact-page">
    <HomeHeader />

    <section class="contact-section">
      <div class="page-shell">
        <div class="contact-layout">
          <div class="contact-info-panel">
            <div class="section-kicker">Contact us</div>
            <h1 class="section-title">Reach out for questions, appointments, or support</h1>
            <p class="section-text">
              We take the time to understand your individual needs and goals,
              creating customized treatment plans to help you achieve optimal
              health and peace of mind.
            </p>

            <div class="contact-info-list">
              <q-card
                v-for="item in contactItems"
                :key="item.title"
                flat
                class="contact-info-card"
              >
                <img class="contact-icon" :src="item.icon" :alt="item.title" />
                <div>
                  <div class="contact-card-title">{{ item.title }}</div>
                  <div class="contact-card-text">{{ item.text }}</div>
                </div>
              </q-card>
            </div>

            <div class="social-row">
              <span class="social-label">Follow us:</span>
              <div class="social-links">
                <q-btn
                  v-for="social in socialLinks"
                  :key="social.label"
                  round
                  flat
                  dense
                  class="social-btn"
                  :aria-label="social.label"
                >
                  <q-tooltip>{{ social.label }}</q-tooltip>
                  <img class="social-icon" :src="social.icon" :alt="social.label" />
                </q-btn>
              </div>
            </div>
          </div>

          <q-card flat class="contact-form-card">
            <div class="form-kicker">Contact form</div>
            <h2 class="form-title">Send us a message</h2>
            <p class="form-text">
              Share your question and our team will get back to you with the most
              relevant next step.
            </p>

            <q-form class="contact-form" @submit.prevent>
              <q-input
                v-model="form.name"
                outlined
                label="Full name"
                placeholder="Enter your name"
              />
              <div class="form-grid">
                <q-input
                  v-model="form.email"
                  outlined
                  type="email"
                  label="Email"
                  placeholder="Enter your email"
                />
                <q-input
                  v-model="form.phone"
                  outlined
                  label="Phone"
                  placeholder="Enter your number"
                />
              </div>
              <q-input
                v-model="form.message"
                outlined
                autogrow
                type="textarea"
                label="Message"
                placeholder="Write message..."
              />
              <q-btn
                unelevated
                rounded
                no-caps
                color="primary"
                label="Submit now"
                class="submit-btn"
              />
            </q-form>
          </q-card>
        </div>
      </div>
    </section>

    <section class="reach-section">
      <div class="page-shell">
        <div class="reach-heading">
          <div class="section-kicker">How to reach us</div>
          <h2 class="section-title center">Get in touch with us</h2>
          <p class="section-text center">
            The goal of our clinic is to deliver compassionate care and exceptional
            medical services, including general consultations, specialized
            treatments, and preventive care.
          </p>
        </div>

        <q-card flat class="map-card">
          <iframe
            class="map-frame"
            :src="mapEmbedUrl"
            title="Clinic location map"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
          />
        </q-card>
      </div>
    </section>

    <HomeFooter />
  </q-page>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import HomeFooter from 'src/components/home/HomeFooter.vue';
import HomeHeader from 'src/components/home/HomeHeader.vue';
import phoneIcon from 'src/assets/contact/icon-phone.svg';
import locationIcon from 'src/assets/contact/icon-location.svg';
import mailIcon from 'src/assets/contact/icon-mail.svg';
import facebookIconUrl from 'src/assets/icons/facebook.svg';
import instagramIconUrl from 'src/assets/icons/instagram.svg';
import whatsappIconUrl from 'src/assets/icons/whatsapp.svg';

const form = reactive({
  name: '',
  email: '',
  phone: '',
  message: '',
});

const contactItems = [
  { title: 'Contact details', text: '+01-787-582-568', icon: phoneIcon },
  { title: 'Address', text: '403, Port Washington Road, Canada', icon: locationIcon },
  { title: 'Email us', text: 'info@domain.com', icon: mailIcon },
];

const socialLinks = [
  { icon: facebookIconUrl, label: 'Facebook' },
  { icon: instagramIconUrl, label: 'Instagram' },
  { icon: whatsappIconUrl, label: 'WhatsApp' },
];

const mapEmbedUrl =
  'https://maps.google.com/maps?q=403%20Port%20Washington%20Road%2C%20Canada&z=14&output=embed';
</script>

<style lang="sass" scoped>
.contact-page
  background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 34%, #eef5ff 100%)
  color: #163047

.page-shell
  width: min(1180px, calc(100% - 32px))
  margin: 0 auto

.contact-section,
.reach-section
  padding: 64px 0

.contact-layout
  display: grid
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr)
  gap: 24px

.contact-info-panel,
.contact-form-card,
.map-card
  border-radius: 32px
  background: rgba(255, 255, 255, 0.9)
  box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)

.contact-info-panel
  padding: 34px
  background: linear-gradient(145deg, #dff7ee 0%, #dbeafe 100%)

.section-kicker,
.form-kicker
  margin-bottom: 10px
  color: #0f766e
  font-size: 0.85rem
  font-weight: 800
  text-transform: uppercase
  letter-spacing: 0.08em

.section-title,
.form-title
  margin: 0 0 14px
  font-size: clamp(2rem, 4vw, 3.2rem)
  line-height: 1.05
  font-weight: 800
  letter-spacing: -0.03em

.section-text,
.form-text,
.map-text
  margin: 0
  color: #607284
  line-height: 1.7
  font-size: 1.02rem

.contact-info-list
  display: grid
  gap: 14px
  margin-top: 28px

.contact-info-card
  display: flex
  align-items: center
  gap: 16px
  padding: 18px 20px
  border-radius: 22px
  background: rgba(255, 255, 255, 0.72)

.contact-icon
  width: 54px
  height: 54px
  flex: 0 0 auto

.contact-card-title
  font-weight: 800
  margin-bottom: 4px

.contact-card-text
  color: #5f7386

.social-row
  display: flex
  align-items: center
  flex-wrap: wrap
  gap: 12px
  margin-top: 24px

.social-label
  font-weight: 700

.social-links
  display: flex
  gap: 6px

.social-btn
  color: #163047

.social-icon
  display: block
  width: 22px
  height: 22px

.contact-form-card
  padding: 34px

.contact-form
  display: grid
  gap: 18px
  margin-top: 24px

.form-grid
  display: grid
  grid-template-columns: repeat(2, minmax(0, 1fr))
  gap: 18px

.submit-btn
  justify-self: start
  min-width: 180px

.reach-heading
  max-width: 760px
  margin: 0 auto 30px

.center
  text-align: center

.map-card
  overflow: hidden
  padding: 18px

.map-frame
  display: block
  width: 100%
  height: 550px
  border: 0
  border-radius: 24px
  filter: grayscale(1)
  transition: filter 0.2s ease

.map-frame:hover
  filter: grayscale(0)

@media (max-width: 1023px)
  .contact-layout
    grid-template-columns: 1fr

@media (max-width: 599px)
  .page-shell
    width: min(100% - 24px, 1180px)

  .contact-section,
  .reach-section
    padding: 40px 0

  .contact-info-panel,
  .contact-form-card
    padding: 24px

  .form-grid
    grid-template-columns: 1fr

  .section-title,
  .form-title
    font-size: 2.4rem
</style>
