<template>
  <q-page class="index-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">Care that feels human, expertise you can trust</div>
              <h1 class="hero-title">Expert medical care you can rely on</h1>
              <p class="hero-text">
                Experience healthcare you can trust. Our dedicated team provides
                compassionate, high-quality care.
              </p>

              <div class="hero-actions">
                <q-btn
                  unelevated
                  rounded
                  no-caps
                  color="primary"
                  label="Book an appointment"
                />
                <q-btn
                  outline
                  rounded
                  no-caps
                  color="primary"
                  label="About us"
                  :to="navLinks.find(link => link.label === 'About Us')?.link"
                />
              </div>

              <q-card flat class="rating-card">
                <div class="rating-copy">
                  <span class="rating-label">Google Rating</span>
                  <span class="rating-score">5.0</span>
                </div>
                <div class="rating-stars" aria-label="5 star rating">
                  <q-icon v-for="star in 5" :key="star" name="star" color="warning" />
                </div>
                <div class="rating-caption">based on 500 reviews</div>
              </q-card>
            </div>
          </div>

          <div class="col-12 col-lg-6">
            <div class="hero-visual">
              <div class="hero-image-wrap">
                <img class="hero-image" :src="heroImageUrl" alt="Medical team" />
              </div>




            </div>
          </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 heroImageUrl from 'src/assets/home/hero-img.png';

const navLinks = [
  { label: 'Home' , link: '/' },
  { label: 'About Us', link: '/about' },
  { label: 'Services', link: '/services' },
  { label: 'Doctors', link: '/doctors' },
  { label: 'Contact Us', link: '/contact' },
];
</script>

<style lang="sass" scoped>
.index-page
  background: linear-gradient(180deg, #f4fbf8 0%, #ffffff 38%, #eef7ff 100%)
  color: #163047

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

.nav-btn
  color: #163047
  font-weight: 600

.appointment-btn
  min-width: 180px

.hero-section
  padding: 56px 0 72px

.hero-copy
  padding-right: 20px

.eyebrow
  display: inline-flex
  align-items: center
  max-width: 560px
  padding: 12px 18px
  margin-bottom: 24px
  border: 1px solid rgba(15, 118, 110, 0.14)
  border-radius: 18px
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.16) 0%, rgba(59, 130, 246, 0.12) 100%)
  color: #0f766e
  font-size: 0.98rem
  font-weight: 800
  letter-spacing: 0.01em
  line-height: 1.4
  text-transform: none
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.08)

.hero-title
  margin: 0 0 20px
  font-size: clamp(2.8rem, 6vw, 4.8rem)
  line-height: 0.98
  font-weight: 800
  letter-spacing: -0.04em

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

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

.rating-card
  display: inline-flex
  align-items: center
  flex-wrap: wrap
  gap: 14px
  padding: 18px 20px
  border-radius: 24px
  background: rgba(255, 255, 255, 0.86)
  box-shadow: 0 24px 70px rgba(41, 72, 108, 0.12)

.rating-copy
  display: flex
  align-items: baseline
  gap: 10px

.rating-label
  font-weight: 700

.rating-score
  font-size: 1.25rem
  font-weight: 800

.rating-stars
  display: flex
  gap: 2px

.rating-caption
  color: #6b7c8d

.hero-visual
  position: relative
  padding: 22px 20px 44px

.hero-visual::before
  content: ''
  position: absolute
  z-index: 0

.hero-image-wrap
  position: relative
  z-index: 1
  overflow: hidden
  border-radius: 36px
  box-shadow: 0 30px 80px rgba(22, 48, 71, 0.16)

.hero-image
  display: block
  width: 100%
  height: auto

.floating-card
  position: absolute
  z-index: 2
  border-radius: 24px
  background: rgba(255, 255, 255, 0.94)
  box-shadow: 0 20px 55px rgba(22, 48, 71, 0.16)

.doctors-card
  left: -4px
  bottom: 18px
  padding: 18px

.doctor-avatars
  display: flex
  margin-bottom: 10px

.doctor-avatar
  border: 3px solid #fff
  margin-left: -12px

.doctor-avatar:first-child
  margin-left: 0

.floating-title
  font-size: 0.96rem
  color: #526579

.clients-card
  top: 8px
  right: 0
  display: flex
  align-items: center
  gap: 14px
  padding: 16px 18px

.clients-icon
  width: 52px
  height: 52px

.clients-count
  font-size: 1.5rem
  font-weight: 800
  line-height: 1

.clients-label
  margin-top: 4px
  color: #526579

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

  .hero-visual
    margin-top: 20px

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

  .hero-section
    padding: 32px 0 48px

  .hero-title
    font-size: 2.6rem

  .eyebrow
    font-size: 0.92rem
    padding: 10px 14px

  .rating-card
    width: 100%

  .hero-visual
    padding: 10px 0 86px

  .hero-visual::before
    inset: 26px 0 0 12px
    border-radius: 28px

  .doctors-card
    left: 8px
    bottom: 0

  .clients-card
    top: auto
    right: 8px
    bottom: 104px
</style>
