<section class="relative overflow-hidden bg-cream">
  <div class="mx-auto grid max-w-7xl items-center gap-10 px-5 py-12 lg:grid-cols-[.9fr_1.1fr] lg:px-8 lg:py-16">
    <div class="relative z-10">
      <div class="mb-5 inline-flex items-center gap-2 rounded-full border border-teal-100 bg-white px-3 py-2 text-xs font-bold text-teal-700 shadow-sm"><i data-lucide="shield-check" class="h-4 w-4"></i> Verified home healthcare</div>
      <h1 class="font-display max-w-xl text-balance text-5xl font-extrabold leading-[1.02] tracking-tight text-navy sm:text-6xl">Healthcare that <span class="text-teal-600">comes to you.</span></h1>
      <p class="mt-6 max-w-xl text-lg leading-8 text-slate-600">Book trusted doctors, nurses, physiotherapists and home-health professionals—then manage arrival, treatment records, payments and follow-up from one place.</p>
      <div class="mt-7 flex flex-wrap gap-x-5 gap-y-3 text-sm font-semibold text-slate-600">
        <span class="flex items-center gap-2"><i data-lucide="badge-check" class="h-4 w-4 text-teal-600"></i> Verified professionals</span>
        <span class="flex items-center gap-2"><i data-lucide="receipt" class="h-4 w-4 text-teal-600"></i> Transparent pricing</span>
        <span class="flex items-center gap-2"><i data-lucide="lock-keyhole" class="h-4 w-4 text-teal-600"></i> Secure & confidential</span>
      </div>
    </div>
    <div class="relative min-h-[470px] overflow-hidden rounded-[2rem] bg-slate-100 shadow-soft">
      <img src="/assets/images/tibaleta-home-care.png" alt="A healthcare professional caring for an older patient at home" class="absolute inset-0 h-full w-full object-cover">
      <div class="absolute inset-x-5 bottom-5 rounded-2xl border border-white/60 bg-white/95 p-5 shadow-soft backdrop-blur sm:inset-x-8 sm:bottom-8">
        <p class="text-sm font-bold text-navy">What care do you need?</p>
        <div class="mt-4 grid grid-cols-3 gap-2 sm:grid-cols-6">
          <?php foreach([['stethoscope','Doctor'],['heart-pulse','Nurse'],['activity','Physio'],['flask-conical','Lab Test'],['heart-handshake','Elderly'],['ellipsis','More']] as $i=>$item): ?>
          <a href="/find-care" class="group rounded-xl border border-slate-100 bg-slate-50 p-2.5 text-center transition hover:border-teal-200 hover:bg-teal-50"><span class="mx-auto grid h-9 w-9 place-items-center rounded-lg bg-white text-teal-600 shadow-sm"><i data-lucide="<?= $item[0] ?>" class="h-4 w-4"></i></span><span class="mt-1.5 block text-[11px] font-semibold text-slate-700"><?= $item[1] ?></span></a>
          <?php endforeach; ?>
        </div>
        <form action="/find-care" method="get" class="mt-4 flex flex-col gap-2 sm:flex-row">
          <div class="relative flex-1"><i data-lucide="map-pin" class="absolute left-3 top-3 h-4 w-4 text-slate-400"></i><input name="location" class="w-full rounded-xl border border-slate-200 bg-white py-2.5 pl-9 pr-3 text-sm outline-none focus:border-teal-500" placeholder="Enter your location"></div>
          <button class="rounded-xl bg-teal-600 px-6 py-2.5 text-sm font-bold text-white hover:bg-teal-700">Find Care Now</button>
        </form>
      </div>
    </div>
  </div>
</section>

<section class="border-y border-slate-100 bg-white">
 <div class="mx-auto grid max-w-7xl grid-cols-2 gap-6 px-5 py-8 text-center md:grid-cols-4 lg:px-8">
  <?php foreach([['24/7','Care request access'],['4.9/5','Patient satisfaction'],['100%','Verified providers'],['1','Connected care record']] as $stat): ?><div><div class="font-display text-2xl font-extrabold text-navy"><?= $stat[0] ?></div><div class="mt-1 text-xs font-medium text-slate-500"><?= $stat[1] ?></div></div><?php endforeach; ?>
 </div>
</section>

<section class="bg-white py-20">
 <div class="mx-auto max-w-7xl px-5 lg:px-8">
  <div class="mx-auto max-w-2xl text-center"><span class="text-sm font-bold uppercase tracking-[.2em] text-teal-600">Care at home</span><h2 class="mt-3 font-display text-4xl font-extrabold tracking-tight text-navy">Choose the care that fits your day</h2><p class="mt-4 text-slate-600">Start with an immediate visit, schedule care for later, or connect virtually with a practitioner.</p></div>
  <div class="mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-4">
    <?php foreach([
      ['stethoscope','Doctor home visit','General consultations, family medicine and home assessment.','/find-care'],
      ['heart-pulse','Nursing care','Wound care, injections, monitoring and recovery support.','/find-care'],
      ['activity','Physiotherapy','Rehabilitation, mobility and recovery sessions at home.','/find-care'],
      ['flask-conical','Home lab collection','Book sample collection linked to trusted lab partners.','/find-care'],
      ['baby','Maternal care','Practical prenatal and postnatal support at home.','/find-care'],
      ['heart-handshake','Elderly care','Coordinated home support for older family members.','/find-care'],
      ['clipboard-heart','Chronic care','Repeat monitoring and structured follow-up care plans.','/find-care'],
      ['video','Video consultation','Secure virtual appointments when a home visit is not needed.','/find-care']
    ] as $card): ?>
    <a href="<?= $card[3] ?>" class="group rounded-2xl border border-slate-100 bg-white p-6 shadow-card transition hover:-translate-y-1 hover:border-teal-100 hover:shadow-soft"><span class="grid h-12 w-12 place-items-center rounded-2xl bg-teal-50 text-teal-600"><i data-lucide="<?= $card[0] ?>" class="h-5 w-5"></i></span><h3 class="mt-5 font-display text-lg font-bold text-navy"><?= $card[1] ?></h3><p class="mt-2 text-sm leading-6 text-slate-500"><?= $card[2] ?></p><span class="mt-5 inline-flex items-center gap-1 text-sm font-bold text-teal-600">Explore <i data-lucide="arrow-right" class="h-4 w-4 transition group-hover:translate-x-1"></i></span></a>
    <?php endforeach; ?>
  </div>
 </div>
</section>

<section class="bg-cream py-20">
 <div class="mx-auto grid max-w-7xl items-center gap-12 px-5 lg:grid-cols-2 lg:px-8">
  <div class="relative overflow-hidden rounded-[2rem] shadow-soft"><img src="/assets/images/tibaleta-practitioner-tablet.png" alt="TibaLeta practitioner using a tablet during home care" class="aspect-[4/3] h-full w-full object-cover"></div>
  <div><span class="text-sm font-bold uppercase tracking-[.2em] text-teal-600">How it works</span><h2 class="mt-3 font-display text-4xl font-extrabold tracking-tight text-navy">From request to follow-up, one connected journey.</h2>
   <div class="mt-8 space-y-6">
    <?php foreach([['1','Tell us what you need','Choose a service, location and whether you need care now or later.'],['2','Get matched with a verified professional','TibaLeta filters for suitable professionals by service, availability and proximity.'],['3','Manage the visit in one place','Track arrival, access visit records, pay securely and coordinate follow-up.']] as $step): ?>
     <div class="flex gap-4"><span class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-teal-600 text-sm font-extrabold text-white"><?= $step[0] ?></span><div><h3 class="font-display text-lg font-bold text-navy"><?= $step[1] ?></h3><p class="mt-1 text-sm leading-6 text-slate-600"><?= $step[2] ?></p></div></div>
    <?php endforeach; ?>
   </div>
   <div class="mt-8 flex flex-wrap gap-3"><a href="/find-care" class="rounded-xl bg-teal-600 px-5 py-3 text-sm font-bold text-white hover:bg-teal-700">Request Care</a><a href="/how-it-works" class="rounded-xl border border-slate-200 bg-white px-5 py-3 text-sm font-bold text-navy hover:border-teal-200">See how it works</a></div>
  </div>
 </div>
</section>

<section class="bg-white py-20">
 <div class="mx-auto max-w-7xl px-5 lg:px-8">
  <div class="rounded-[2rem] bg-navy px-6 py-12 text-white shadow-soft sm:px-10 lg:px-14">
   <div class="grid items-center gap-10 lg:grid-cols-[1fr_auto]"><div><span class="text-sm font-bold uppercase tracking-[.2em] text-teal-200">Care for your family</span><h2 class="mt-3 max-w-3xl font-display text-4xl font-extrabold tracking-tight">Manage healthcare for yourself and the people you love.</h2><p class="mt-4 max-w-2xl text-slate-300">Create family profiles, coordinate home visits and keep care history organized under one secure account.</p></div><a href="/register" class="rounded-xl bg-white px-6 py-3 text-center text-sm font-extrabold text-navy hover:bg-teal-50">Create free account</a></div>
  </div>
 </div>
</section>
