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

    <section class="hero-section">
      <div class="page-shell">
        <div class="hero-panel">
          <div class="section-kicker">Our doctors</div>
          <h1 class="hero-title">Meet the specialists behind our standard of care</h1>
          <p class="hero-text">
            Our medical team brings together diverse specialties with one shared
            goal: delivering care that is precise, collaborative, and genuinely human.
          </p>
        </div>
      </div>
    </section>

    <section class="team-section">
      <div class="page-shell">
        <div class="row q-col-gutter-lg">
          <div
            v-for="doctor in doctors"
            :key="doctor.name"
            class="col-12 col-sm-6 col-lg-3"
          >
            <q-card flat class="doctor-card">
              <q-btn class="doctor-link" flat no-caps to="/doctordetails">
                <div class="doctor-image-wrap">
                  <img class="doctor-image" :src="doctor.image" :alt="doctor.name" />
                </div>
              </q-btn>

              <div class="doctor-body">
                <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 class="doctor-content">
                  <h3 class="doctor-name">
                    <router-link class="doctor-name-link" to="/doctordetails">
                      {{ doctor.name }}
                    </router-link>
                  </h3>
                  <p class="doctor-specialty">{{ doctor.specialty }}</p>
                </div>
              </div>
            </q-card>
          </div>
        </div>
      </div>
    </section>

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

<script setup lang="ts">
import HomeFooter from 'src/components/home/HomeFooter.vue';
import HomeHeader from 'src/components/home/HomeHeader.vue';
import team1 from 'src/assets/about/team-1.jpg';
import team2 from 'src/assets/about/team-2.jpg';
import team3 from 'src/assets/about/team-3.jpg';
import team4 from 'src/assets/about/team-4.jpg';
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 socialLinks = [
  { icon: instagramIconUrl, label: 'Instagram' },
  { icon: facebookIconUrl, label: 'Facebook' },
  { icon: whatsappIconUrl, label: 'WhatsApp' },
];

const doctors = [
  { name: 'Dr. Esther Howard', specialty: 'Ophthalmology', image: team1 },
  { name: 'Dr. Jenny Wilson', specialty: 'Anesthesiology', image: team2 },
  { name: 'Dr. Kristin Watson', specialty: 'Infectious Disease', image: team3 },
  { name: 'Dr. Arlene McCoy', specialty: 'Cardiology', image: team4 },
  { name: 'Dr. Michael Johnson', specialty: 'Orthopedics', image: team1 },
  { name: 'Dr. Sarah Lee', specialty: 'Pediatrics', image: team2 },
  { name: 'Dr. James Smith', specialty: 'Neurology', image: team3 },
  { name: 'Dr. Rachel Davis', specialty: 'Dermatology', image: team4 },
];
</script>

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

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

.hero-section
  padding: 72px 0 36px

.hero-panel
  max-width: 760px
  padding: 38px
  border-radius: 36px
  background: linear-gradient(135deg, #dff7ee 0%, #dbeafe 100%)
  box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)

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

.hero-title
  margin: 0 0 14px
  font-size: clamp(2.4rem, 4.5vw, 4rem)
  line-height: 1.02
  font-weight: 800
  letter-spacing: -0.03em

.hero-text
  margin: 0
  color: #607284
  line-height: 1.7
  font-size: 1.02rem

.team-section
  padding: 24px 0 64px

.doctor-card
  overflow: hidden
  height: 100%
  border-radius: 28px
  background: rgba(255, 255, 255, 0.9)
  box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)

.doctor-link
  display: block
  padding: 0
  border-radius: 0

.doctor-image-wrap
  overflow: hidden

.doctor-image
  display: block
  width: 100%
  height: 320px
  object-fit: cover

.doctor-body
  padding: 18px 18px 22px

.social-links
  display: flex
  gap: 6px
  margin-bottom: 16px

.social-btn
  color: #163047
  background: rgba(15, 118, 110, 0.08)

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

.doctor-name
  margin: 0 0 6px
  font-size: 1.18rem
  font-weight: 800

.doctor-name-link
  color: inherit
  text-decoration: none

.doctor-specialty
  margin: 0
  color: #607284
  text-transform: capitalize

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

  .hero-section
    padding: 40px 0 24px

  .team-section
    padding: 16px 0 40px

  .hero-panel
    padding: 24px
</style>
