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

    <section class="hero-section">
      <div class="page-shell">
        <div class="row items-center q-col-gutter-xl">
          <div class="col-12 col-lg-6">
            <div class="hero-copy">
              <div class="eyebrow">About Omnimed</div>
              <h1 class="hero-title">Healthcare built around clarity, empathy, and outcomes</h1>
              <p class="hero-text">
                We combine medical excellence with a human approach, designing every
                visit around trust, prevention, and long-term wellbeing.
              </p>

              <div class="hero-actions">
                <q-btn
                  unelevated
                  rounded
                  no-caps
                  color="primary"
                  label="Book a consultation"
                />
                <q-btn outline rounded no-caps color="primary" label="Meet our team" />
              </div>

              <div class="stats-row">
                <q-card
                  v-for="stat in stats"
                  :key="stat.label"
                  flat
                  class="stat-card"
                >
                  <div class="stat-value">{{ stat.value }}</div>
                  <div class="stat-label">{{ stat.label }}</div>
                </q-card>
              </div>
            </div>
          </div>

          <div class="col-12 col-lg-6">
            <div class="hero-visual">
              <div class="hero-image-main">
                <img :src="aboutImagePrimary" alt="Medical consultation" />
              </div>
              <div class="hero-image-secondary">
                <img :src="aboutImageSecondary" alt="Clinical care team" />
              </div>
              <q-card flat class="floating-summary">
                <div class="floating-summary-value">15+ years</div>
                <div class="floating-summary-label">of integrated patient care</div>
              </q-card>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="values-section">
      <div class="page-shell">
        <div class="section-heading">
          <div class="section-kicker">What drives us</div>
          <h2 class="section-title">A modern clinic with standards patients can feel</h2>
          <p class="section-text">
            Our model is simple: faster access, clearer communication, coordinated
            care, and decisions guided by evidence.
          </p>
        </div>

        <div class="row q-col-gutter-lg">
          <div
            v-for="value in values"
            :key="value.title"
            class="col-12 col-md-4"
          >
            <q-card flat class="value-card">
              <img class="value-icon" :src="value.icon" :alt="value.title" />
              <h3 class="value-title">{{ value.title }}</h3>
              <p class="value-text">{{ value.text }}</p>
            </q-card>
          </div>
        </div>
      </div>
    </section>

    <section class="journey-section">
      <div class="page-shell">
        <div class="section-heading align-center">
          <div class="section-kicker">How we work</div>
          <h2 class="section-title">A care journey designed to reduce friction</h2>
        </div>

        <div class="row q-col-gutter-lg">
          <div
            v-for="step in steps"
            :key="step.title"
            class="col-12 col-sm-6 col-lg-3"
          >
            <q-card flat class="step-card">
              <img class="step-image" :src="step.image" :alt="step.title" />
              <div class="step-number">{{ step.number }}</div>
              <h3 class="step-title">{{ step.title }}</h3>
              <p class="step-text">{{ step.text }}</p>
            </q-card>
          </div>
        </div>
      </div>
    </section>

    <section class="team-section">
      <div class="page-shell">
        <div class="section-heading">
          <div class="section-kicker">Our people</div>
          <h2 class="section-title">Specialists who bring confidence to every appointment</h2>
        </div>

        <div class="row q-col-gutter-lg">
          <div
            v-for="member in team"
            :key="member.name"
            class="col-12 col-sm-6 col-lg-3"
          >
            <q-card flat class="team-card">
              <img class="team-image" :src="member.image" :alt="member.name" />
              <div class="team-content">
                <div class="team-name">{{ member.name }}</div>
                <div class="team-role">{{ member.role }}</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 aboutImagePrimary from 'src/assets/about/about-img-1.jpg';
import aboutImageSecondary from 'src/assets/about/about-img-2.jpg';
import valueIcon1 from 'src/assets/about/icon-about-info-1.svg';
import valueIcon2 from 'src/assets/about/icon-about-info-2.svg';
import valueIcon3 from 'src/assets/about/icon-about-info-3.svg';
import stepImage1 from 'src/assets/about/work-step-img-1.jpg';
import stepImage2 from 'src/assets/about/work-step-img-2.jpg';
import stepImage3 from 'src/assets/about/work-step-img-3.jpg';
import stepImage4 from 'src/assets/about/work-step-img-4.jpg';
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';

const stats = [
  { value: '25k+', label: 'patients supported every year' },
  { value: '98%', label: 'patient satisfaction score' },
  { value: '40+', label: 'specialists across key disciplines' },
];

const values = [
  {
    icon: valueIcon1,
    title: 'Clear medical guidance',
    text: 'We explain options, next steps, and tradeoffs in language patients can act on.',
  },
  {
    icon: valueIcon2,
    title: 'Coordinated treatment',
    text: 'Primary care, specialist input, and follow-up planning stay connected end to end.',
  },
  {
    icon: valueIcon3,
    title: 'Prevention first',
    text: 'We focus on early detection and continuity, not only on treating symptoms.',
  },
];

const steps = [
  {
    number: '01',
    title: 'Book and prepare',
    text: 'Schedule quickly and arrive with the right context already shared with the care team.',
    image: stepImage1,
  },
  {
    number: '02',
    title: 'Assess and listen',
    text: 'Every consultation starts with careful listening and a structured clinical review.',
    image: stepImage2,
  },
  {
    number: '03',
    title: 'Plan the treatment',
    text: 'We define a practical treatment path with timelines, referrals, and measurable goals.',
    image: stepImage3,
  },
  {
    number: '04',
    title: 'Follow through',
    text: 'Ongoing monitoring helps patients stay informed, supported, and on track.',
    image: stepImage4,
  },
];

const team = [
  { name: 'Dr. Amelia Carter', role: 'Internal Medicine', image: team1 },
  { name: 'Dr. Julian Meyer', role: 'Cardiology', image: team2 },
  { name: 'Dr. Sofia Bennett', role: 'Pediatrics', image: team3 },
  { name: 'Dr. Ethan Rossi', role: 'Preventive Care', image: team4 },
];
</script>

<style lang="sass" scoped>
.about-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 56px

.hero-copy
  padding-right: 20px

.eyebrow
  display: inline-flex
  align-items: center
  padding: 10px 16px
  margin-bottom: 22px
  border-radius: 999px
  background: rgba(13, 148, 136, 0.12)
  color: #0f766e
  font-size: 0.9rem
  font-weight: 800

.hero-title
  margin: 0 0 18px
  font-size: clamp(2.8rem, 5vw, 4.6rem)
  line-height: 1
  font-weight: 800
  letter-spacing: -0.04em

.hero-text
  max-width: 560px
  margin: 0 0 26px
  font-size: 1.08rem
  line-height: 1.7
  color: #55687c

.hero-actions
  display: flex
  flex-wrap: wrap
  gap: 14px
  margin-bottom: 30px

.stats-row
  display: grid
  grid-template-columns: repeat(3, minmax(0, 1fr))
  gap: 16px

.stat-card
  padding: 20px
  border-radius: 24px
  background: rgba(255, 255, 255, 0.88)
  box-shadow: 0 24px 60px rgba(22, 48, 71, 0.08)

.stat-value
  font-size: 1.8rem
  font-weight: 800

.stat-label
  margin-top: 8px
  color: #647789
  line-height: 1.5

.hero-visual
  position: relative
  min-height: 620px

.hero-visual::before
  content: ''
  position: absolute
  inset: 40px 18px 32px 56px
  border-radius: 40px
  background: linear-gradient(145deg, #dff7ee 0%, #dbeafe 100%)

.hero-image-main,
.hero-image-secondary
  position: absolute
  overflow: hidden
  border-radius: 34px
  box-shadow: 0 28px 70px rgba(22, 48, 71, 0.16)

.hero-image-main
  top: 0
  right: 0
  width: min(82%, 460px)

.hero-image-secondary
  left: 0
  bottom: 0
  width: min(54%, 300px)
  border: 8px solid rgba(255, 255, 255, 0.95)

.hero-image-main img,
.hero-image-secondary img
  display: block
  width: 100%
  height: auto

.floating-summary
  position: absolute
  left: 28px
  top: 48px
  padding: 18px 20px
  border-radius: 22px
  background: rgba(255, 255, 255, 0.94)
  box-shadow: 0 18px 50px rgba(22, 48, 71, 0.14)

.floating-summary-value
  font-size: 1.6rem
  font-weight: 800

.floating-summary-label
  margin-top: 6px
  color: #647789

.values-section,
.journey-section,
.team-section
  padding: 56px 0

.journey-section
  background: rgba(255, 255, 255, 0.62)

.section-heading
  max-width: 700px
  margin-bottom: 30px

.align-center
  margin-left: auto
  margin-right: auto
  text-align: center

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

.section-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
  margin: 0
  color: #607284
  line-height: 1.7
  font-size: 1.02rem

.value-card,
.step-card,
.team-card
  height: 100%
  border-radius: 28px
  background: rgba(255, 255, 255, 0.88)
  box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)

.value-card
  padding: 28px

.value-icon
  width: 58px
  height: 58px
  margin-bottom: 18px

.value-title,
.step-title
  margin: 0 0 12px
  font-size: 1.3rem
  font-weight: 800

.value-text,
.step-text
  margin: 0
  color: #647789
  line-height: 1.65

.step-card
  overflow: hidden

.step-image,
.team-image
  display: block
  width: 100%
  height: 220px
  object-fit: cover

.step-number
  padding: 22px 24px 0
  color: #0f766e
  font-size: 0.9rem
  font-weight: 800
  letter-spacing: 0.08em

.step-title,
.step-text
  padding-left: 24px
  padding-right: 24px

.step-text
  padding-bottom: 24px

.team-content
  padding: 22px

.team-name
  font-size: 1.16rem
  font-weight: 800

.team-role
  margin-top: 6px
  color: #647789

@media (max-width: 1023px)
  .hero-copy
    padding-right: 0

  .stats-row
    grid-template-columns: 1fr

  .hero-visual
    min-height: 540px
    margin-top: 16px

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

  .hero-section,
  .values-section,
  .journey-section,
  .team-section
    padding: 40px 0

  .hero-title
    font-size: 2.5rem

  .hero-visual
    min-height: 420px

  .hero-visual::before
    inset: 28px 0 20px 18px
    border-radius: 30px

  .hero-image-main
    width: 84%

  .hero-image-secondary
    width: 46%
    border-width: 6px

  .floating-summary
    left: 12px
    top: 22px
    padding: 14px 16px
</style>
