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

    <section class="hero-section">
      <div class="page-shell">
        <div class="hero-panel">
          <div class="row items-center q-col-gutter-xl">
            <div class="col-12 col-lg-7">
              <div class="eyebrow">Our services</div>
              <h1 class="hero-title">Specialized care designed around real patient needs</h1>
              <p class="hero-text">
                From prevention and diagnostics to treatment planning and follow-up,
                we build integrated services that make care simpler to access and
                easier to trust.
              </p>
            </div>

            <div class="col-12 col-lg-5">
              <div class="hero-summary">
                <q-card
                  v-for="metric in metrics"
                  :key="metric.label"
                  flat
                  class="metric-card"
                >
                  <div class="metric-value">{{ metric.value }}</div>
                  <div class="metric-label">{{ metric.label }}</div>
                </q-card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="services-section">
      <div class="page-shell">
        <div class="section-heading">
          <div class="section-kicker">Clinical areas</div>
          <h2 class="section-title">Core services patients rely on every day</h2>
          <p class="section-text">
            Each service line is built to combine fast access, specialist expertise,
            and clear next steps after every appointment.
          </p>
        </div>

        <div class="row q-col-gutter-lg">
          <div
            v-for="service in services"
            :key="service.title"
            class="col-12 col-md-6 col-lg-4"
          >
            <q-card flat class="service-card">
              <img class="service-image" :src="service.image" :alt="service.title" />
              <div class="service-content">
                <img class="service-icon" :src="service.icon" :alt="service.title" />
                <h3 class="service-title">{{ service.title }}</h3>
                <p class="service-text">{{ service.text }}</p>
                <ul class="service-points">
                  <li v-for="point in service.points" :key="point">
                    <q-icon name="check_circle" color="positive" size="18px" />
                    <span>{{ point }}</span>
                  </li>
                </ul>
              </div>
            </q-card>
          </div>
        </div>
      </div>
    </section>

    <section class="workflow-section">
      <div class="page-shell">
        <div class="section-heading align-center">
          <div class="section-kicker">Service model</div>
          <h2 class="section-title">How we turn expertise into a better patient experience</h2>
        </div>

        <div class="workflow-grid">
          <q-card
            v-for="step in workflow"
            :key="step.title"
            flat
            class="workflow-card"
          >
            <div class="workflow-number">{{ step.number }}</div>
            <h3 class="workflow-title">{{ step.title }}</h3>
            <p class="workflow-text">{{ step.text }}</p>
          </q-card>
        </div>
      </div>
    </section>

    <section class="cta-section">
      <div class="page-shell">
        <q-card flat class="cta-card">
          <div class="row items-center q-col-gutter-xl">
            <div class="col-12 col-lg-7">
              <div class="cta-copy">
                <div class="section-kicker">Need guidance?</div>
                <h2 class="cta-title">We help patients find the right service without the usual confusion</h2>
                <p class="cta-text">
                  Tell us what you need and our team will direct you to the right
                  specialist, timing, and next step.
                </p>
                <div class="cta-actions">
                  <q-btn
                    unelevated
                    rounded
                    no-caps
                    color="primary"
                    label="Request an appointment"
                  />
                  <q-btn outline rounded no-caps color="primary" label="Contact us" />
                </div>
              </div>
            </div>

            <div class="col-12 col-lg-5">
              <div class="cta-visual">
                <img class="cta-image-main" :src="ctaImageMain" alt="Medical assistance" />
                <img class="cta-image-secondary" :src="ctaImageSecondary" alt="Patient support" />
                <q-card flat class="cta-badge">
                  <img class="cta-badge-icon" :src="ctaIcon" alt="Support icon" />
                  <div>
                    <div class="cta-badge-title">Fast triage support</div>
                    <div class="cta-badge-text">Guidance within one working day</div>
                  </div>
                </q-card>
              </div>
            </div>
          </div>
        </q-card>
      </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 serviceImage1 from 'src/assets/services/service-img-1.jpg';
import serviceImage2 from 'src/assets/services/service-img-2.jpg';
import serviceImage3 from 'src/assets/services/service-img-3.jpg';
import serviceIcon1 from 'src/assets/services/icon-service-1.svg';
import serviceIcon2 from 'src/assets/services/icon-service-2.svg';
import serviceIcon3 from 'src/assets/services/icon-service-3.svg';
import ctaImageMain from 'src/assets/services/cta-img-1.png';
import ctaImageSecondary from 'src/assets/services/cta-img-2.png';
import ctaIcon from 'src/assets/services/icon-faq-cta.svg';

const metrics = [
  { value: '40+', label: 'clinical professionals available' },
  { value: '12', label: 'coordinated service areas' },
  { value: '24h', label: 'average response for triage requests' },
];

const services = [
  {
    title: 'Preventive and primary care',
    text: 'Routine checkups, early screening, and continuous care planning for long-term health.',
    image: serviceImage1,
    icon: serviceIcon1,
    points: ['Annual assessments', 'Vaccination guidance', 'Chronic care monitoring'],
  },
  {
    title: 'Specialist consultations',
    text: 'Access to focused expertise with clear coordination between disciplines and follow-up.',
    image: serviceImage2,
    icon: serviceIcon2,
    points: ['Cardiology and internal medicine', 'Pediatric support', 'Referral coordination'],
  },
  {
    title: 'Diagnostics and treatment planning',
    text: 'Accurate evaluation backed by practical treatment plans patients can actually follow.',
    image: serviceImage3,
    icon: serviceIcon3,
    points: ['Clinical diagnostics', 'Evidence-based plans', 'Post-visit support'],
  },
];

const workflow = [
  {
    number: '01',
    title: 'Understand the need',
    text: 'We start with symptoms, history, urgency, and the service path that best fits the case.',
  },
  {
    number: '02',
    title: 'Route to the right team',
    text: 'Patients are matched to the most appropriate clinician instead of navigating care alone.',
  },
  {
    number: '03',
    title: 'Deliver coordinated care',
    text: 'Diagnostics, consultation, and treatment planning happen with clear ownership and timing.',
  },
  {
    number: '04',
    title: 'Stay present after the visit',
    text: 'Follow-up instructions and next actions remain visible, simple, and easy to execute.',
  },
];
</script>

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

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

.hero-section
  padding: 72px 0 44px

.hero-panel
  padding: 42px
  border-radius: 36px
  background: linear-gradient(135deg, #dff7ee 0%, #dbeafe 100%)
  box-shadow: 0 28px 80px rgba(22, 48, 71, 0.08)

.eyebrow
  display: inline-flex
  align-items: center
  padding: 10px 16px
  margin-bottom: 22px
  border-radius: 999px
  background: rgba(255, 255, 255, 0.66)
  color: #0f766e
  font-size: 0.88rem
  font-weight: 800
  text-transform: uppercase
  letter-spacing: 0.08em

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

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

.hero-summary
  display: grid
  gap: 16px

.metric-card
  padding: 22px
  border-radius: 24px
  background: rgba(255, 255, 255, 0.82)

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

.metric-label
  margin-top: 8px
  color: #617486
  line-height: 1.55

.services-section,
.workflow-section,
.cta-section
  padding: 56px 0

.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

.service-card,
.workflow-card,
.cta-card
  border-radius: 28px
  background: rgba(255, 255, 255, 0.88)
  box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)

.service-card
  overflow: hidden
  height: 100%

.service-image
  display: block
  width: 100%
  height: 240px
  object-fit: cover

.service-content
  padding: 24px

.service-icon
  width: 60px
  height: 60px
  margin-bottom: 16px

.service-title,
.workflow-title,
.cta-title
  margin: 0 0 12px
  font-weight: 800

.service-title
  font-size: 1.32rem

.service-text,
.workflow-text,
.cta-text
  margin: 0
  color: #647789
  line-height: 1.68

.service-points
  display: grid
  gap: 10px
  padding: 0
  margin: 18px 0 0
  list-style: none

.service-points li
  display: flex
  align-items: center
  gap: 10px

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

.workflow-grid
  display: grid
  grid-template-columns: repeat(4, minmax(0, 1fr))
  gap: 16px

.workflow-card
  padding: 26px
  height: 100%

.workflow-number
  margin-bottom: 14px
  color: #0f766e
  font-size: 0.9rem
  font-weight: 800
  letter-spacing: 0.08em

.workflow-title
  font-size: 1.24rem

.cta-card
  overflow: hidden
  padding: 38px

.cta-copy
  max-width: 580px

.cta-title
  font-size: clamp(2rem, 3.6vw, 3rem)
  line-height: 1.08
  letter-spacing: -0.03em

.cta-text
  margin-bottom: 24px

.cta-actions
  display: flex
  flex-wrap: wrap
  gap: 14px

.cta-visual
  position: relative
  min-height: 360px

.cta-image-main,
.cta-image-secondary
  position: absolute
  display: block
  max-width: 100%

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

.cta-image-secondary
  left: 0
  bottom: 0
  width: min(58%, 220px)

.cta-badge
  position: absolute
  left: 22px
  top: 26px
  display: flex
  align-items: center
  gap: 14px
  padding: 16px 18px
  border-radius: 22px
  background: rgba(255, 255, 255, 0.94)
  box-shadow: 0 18px 50px rgba(22, 48, 71, 0.14)

.cta-badge-icon
  width: 46px
  height: 46px

.cta-badge-title
  font-weight: 800

.cta-badge-text
  margin-top: 4px
  color: #647789

@media (max-width: 1023px)
  .workflow-grid
    grid-template-columns: repeat(2, minmax(0, 1fr))

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

  .hero-section,
  .services-section,
  .workflow-section,
  .cta-section
    padding: 40px 0

  .hero-panel,
  .cta-card
    padding: 24px

  .hero-title
    font-size: 2.5rem

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

  .cta-visual
    min-height: 300px
    margin-top: 16px

  .cta-badge
    left: 8px
    top: 8px
</style>
