<template>
  <q-page class="doctor-detail-page">
    <HomeHeader />

    <section class="profile-section">
      <div class="page-shell">
        <div class="row q-col-gutter-xl">
          <div class="col-12 col-lg-4">
            <q-card flat class="sidebar-card">
              <div class="sidebar-image-wrap">
                <img class="sidebar-image" :src="doctor.image" :alt="doctor.name" />
              </div>

              <div class="sidebar-body">
                <div v-for="item in doctorDetails" :key="item.label" class="sidebar-row">
                  <span class="sidebar-label">{{ item.label }}</span>
                  <span class="sidebar-value">{{ item.value }}</span>
                </div>
              </div>

              <div class="sidebar-footer">
                <span class="sidebar-follow">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>
            </q-card>
          </div>

          <div class="col-12 col-lg-8">
            <div class="content-stack">
              <section class="content-section">
                <div class="section-kicker">Personal biography</div>
                <h1 class="section-title">Personal biography</h1>
                <p class="section-text">
                  Dr. Esther Howard is a highly experienced Psychologist with over
                  12 years of expertise in assessing and treating a wide range of
                  emotional and behavioral conditions. She focuses on creating
                  personalized treatment plans that balance evidence-based methods
                  with an empathetic, human-centered approach. Her practice combines
                  careful evaluation, practical therapeutic tools, and continuity of
                  care to help patients make sustainable progress through anxiety,
                  depression, trauma, and major life transitions.
                </p>
              </section>

              <div class="row q-col-gutter-lg">
                <div class="col-12 col-md-6">
                  <section class="content-card">
                    <div class="section-kicker">My experience</div>
                    <h2 class="card-title">My experience</h2>

                    <div
                      v-for="item in experience"
                      :key="item.title"
                      class="timeline-item"
                    >
                      <div class="timeline-title">{{ item.title }}</div>
                      <p class="timeline-text">{{ item.text }}</p>
                    </div>
                  </section>
                </div>

                <div class="col-12 col-md-6">
                  <section class="content-card">
                    <div class="section-kicker">My skills</div>
                    <h2 class="card-title">My skills</h2>

                    <div v-for="skill in skills" :key="skill.label" class="skill-item">
                      <div class="skill-head">
                        <span>{{ skill.label }}</span>
                        <span>{{ skill.value }}%</span>
                      </div>
                      <q-linear-progress
                        rounded
                        size="10px"
                        color="primary"
                        :value="skill.value / 100"
                        class="skill-bar"
                      />
                    </div>
                  </section>
                </div>
              </div>

              <section class="content-section">
                <div class="section-kicker">My expertise area & feature</div>
                <h2 class="section-title small">My expertise area & feature</h2>
                <p class="section-text">
                  Esther specializes in cognitive-behavioral therapy, trauma
                  recovery, and mindfulness techniques, offering tailored support
                  for individuals dealing with anxiety, depression, and life
                  transitions.
                </p>

                <div class="expertise-list">
                  <div v-for="point in expertisePoints" :key="point" class="expertise-item">
                    <q-icon name="check_circle" color="positive" size="20px" />
                    <span>{{ point }}</span>
                  </div>
                </div>
              </section>

              <q-card flat class="contact-card">
                <div class="section-kicker">Get into touch with me</div>
                <h2 class="section-title small">Get into touch with me</h2>

                <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>
        </div>
      </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 team1 from 'src/assets/about/team-1.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 doctor = {
  name: 'Dr. Esther Howard',
  image: team1,
};

const doctorDetails = [
  { label: 'Name', value: 'Dr. Esther Howard' },
  { label: 'Position', value: 'Psychologist' },
  { label: 'Phone', value: '+91-123 456 7890' },
  { label: 'E-mail', value: 'info@domain.com' },
  { label: 'Experience', value: '16 years' },
];

const socialLinks = [
  { icon: instagramIconUrl, label: 'X / Twitter' },
  { icon: facebookIconUrl, label: 'LinkedIn' },
  { icon: whatsappIconUrl, label: 'Pinterest' },
];

const experience = [
  {
    title: 'Graduate intern · 2013 - 2020',
    text: 'At Institution Name focused on family counseling and conflict resolution techniques.',
  },
  {
    title: 'Licensed psychologist · 2020 - present',
    text: 'At Institution Name focused on family counseling and conflict resolution techniques.',
  },
];

const skills = [
  { label: 'Psychologist', value: 56 },
  { label: 'Success case', value: 89 },
  { label: 'Therapy specialist', value: 85 },
];

const expertisePoints = [
  'Experienced professionals',
  'Client-centered approach',
  'Safe and confidential environment',
  'Commitment to growth',
];

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

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

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

.profile-section
  padding: 100px 0

.sidebar-card,
.content-card,
.contact-card,
.content-section
  border-radius: 46px
  background: #fff
  box-shadow: 6px 4px 168px rgba(0, 0, 0, 0.1)

.sidebar-card
  overflow: hidden
  position: sticky
  top: 30px

.sidebar-image-wrap
  overflow: hidden

.sidebar-image
  display: block
  width: 100%
  aspect-ratio: 1 / 1.15
  object-fit: cover

.sidebar-body
  display: grid
  gap: 14px
  padding: 40px
  background: #f2fbf7

.sidebar-row
  display: flex
  align-items: flex-start
  padding-bottom: 14px
  border-bottom: 1px solid rgba(22, 48, 71, 0.08)

.sidebar-row:last-child
  padding-bottom: 0
  border-bottom: 0

.sidebar-label
  color: #0f766e
  font-size: 20px
  font-weight: 600
  text-transform: uppercase
  letter-spacing: 0.06em
  width: 45%
  flex: 0 0 45%

.sidebar-value
  font-weight: 700

.sidebar-footer
  display: flex
  align-items: center
  gap: 20px
  padding: 15px 40px
  background: #163047

.sidebar-follow
  font-size: 20px
  font-weight: 600
  color: #fff

.social-links
  display: flex
  gap: 6px

.social-btn
  color: #fff
  border: 1px solid rgba(255, 255, 255, 0.8)
  background: transparent

.social-icon
  display: block
  width: 18px
  height: 18px
  filter: brightness(0) invert(1)

.content-stack
  display: grid
  gap: 24px

.content-section,
.content-card,
.contact-card
  padding: 0
  box-shadow: none
  background: transparent

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

.section-title,
.card-title
  margin: 0 0 14px
  font-weight: 800
  letter-spacing: -0.03em

.section-title
  font-size: clamp(2rem, 4vw, 2.875rem)
  line-height: 1.06

.section-title.small
  font-size: clamp(1.8rem, 3vw, 2.875rem)

.card-title
  font-size: clamp(1.8rem, 3vw, 2.875rem)
  margin-bottom: 20px

.section-text,
.timeline-text,
.expertise-item span
  margin: 0
  color: #607284
  line-height: 1.72

.timeline-item + .timeline-item
  margin-top: 30px

.timeline-title
  margin-bottom: 15px
  font-weight: 800
  font-size: 20px

.skill-item + .skill-item
  margin-top: 30px

.skill-head
  display: flex
  align-items: center
  justify-content: space-between
  gap: 12px
  margin-bottom: 8px
  font-weight: 700

.skill-bar
  background: #f2fbf7

.expertise-list
  display: grid
  grid-template-columns: repeat(2, minmax(0, 1fr))
  gap: 15px 20px
  margin-top: 20px

.expertise-item
  display: flex
  align-items: flex-start
  gap: 10px

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

.contact-card
  padding: 40px
  background: #f2fbf7
  box-shadow: none

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

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

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

  .profile-section
    padding: 40px 0

  .sidebar-card,
  .contact-card
    border-radius: 26px

  .sidebar-image
    aspect-ratio: 1 / 1.1

  .sidebar-body
    padding: 20px

  .sidebar-label
    font-size: 18px

  .sidebar-footer
    padding: 10px 20px

  .sidebar-follow
    font-size: 18px

  .section-title,
  .section-title.small,
  .card-title
    font-size: 26px

  .timeline-item + .timeline-item
    margin-top: 20px

  .skill-item + .skill-item
    margin-top: 20px

  .expertise-list
    grid-template-columns: 1fr

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

  .contact-card
    padding: 20px
</style>
