<div class="mx-auto max-w-7xl"><div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"><div><p class="text-sm text-slate-500">Good morning,</p><h2 class="font-display text-2xl font-extrabold">Welcome back, <?= esc(explode(' ', $authUser['full_name'])[0] ?? 'there') ?> 👋</h2></div><a href="/patient/request-care" class="inline-flex items-center justify-center gap-2 rounded-xl bg-teal-600 px-5 py-3 text-sm font-extrabold text-white"><i data-lucide="plus" class="h-4 w-4"></i>Request Care</a></div>
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4"><?php foreach([['Upcoming Visits',$stats['upcoming'],'calendar-days','View schedule'],['Active Visit',$stats['active'],'activity','Track care'],['Follow-ups',$stats['followups'],'refresh-cw','View follow-ups'],['Health Records',$stats['records'],'file-heart','Open records']] as $s): ?><div class="rounded-2xl border border-slate-100 bg-white p-5 shadow-card"><div class="flex items-start justify-between"><div><p class="text-xs font-semibold text-slate-400"><?= $s[0] ?></p><div class="mt-2 font-display text-3xl font-extrabold text-navy"><?= $s[1] ?></div></div><span class="grid h-10 w-10 place-items-center rounded-xl bg-teal-50 text-teal-600"><i data-lucide="<?= $s[2] ?>" class="h-4 w-4"></i></span></div><p class="mt-3 text-xs font-semibold text-teal-600"><?= $s[3] ?> →</p></div><?php endforeach; ?></div>
<div class="mt-6 grid gap-6 xl:grid-cols-[1.35fr_.65fr]"><section class="rounded-2xl border border-slate-100 bg-white p-5 shadow-card"><div class="flex items-center justify-between"><h3 class="font-display text-lg font-extrabold">My care</h3><a href="/patient/visits" class="text-xs font-bold text-teal-600">View all</a></div><div class="mt-4 divide-y divide-slate-100"><?php if(!$visits): ?><div class="py-10 text-center text-sm text-slate-400">Your visits will appear here after you request care.</div><?php endif; ?><?php foreach($visits as $v): ?><div class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center"><div class="grid h-11 w-11 place-items-center rounded-full bg-teal-50 text-xs font-extrabold text-teal-700"><?= initials($v['practitioner_name'] ?: $v['service_name']) ?></div><div class="min-w-0 flex-1"><div class="font-semibold text-navy"><?= esc($v['service_name']) ?></div><div class="mt-1 text-xs text-slate-400"><?= esc($v['practitioner_name'] ?: 'Matching practitioner') ?> • <?= esc(ucwords(str_replace('_',' ',$v['status']))) ?></div></div><div class="text-xs text-slate-500"><?= $v['scheduled_for']?date('M j, g:i A',strtotime($v['scheduled_for'])):'On demand' ?></div><a href="/patient/visits" class="rounded-lg border border-slate-200 px-3 py-2 text-xs font-bold">View</a></div><?php endforeach; ?></div></section>
<aside class="rounded-2xl border border-slate-100 bg-white p-5 shadow-card"><h3 class="font-display text-lg font-extrabold">Recent updates</h3><div class="mt-4 space-y-3"><?php if(!$notifications): ?><p class="py-8 text-center text-sm text-slate-400">No new updates.</p><?php endif; ?><?php foreach($notifications as $n): ?><a href="<?= esc($n['action_url'] ?: '#') ?>" class="block rounded-xl bg-slate-50 p-4"><div class="text-xs font-bold text-navy"><?= esc($n['title']) ?></div><p class="mt-1 text-xs leading-5 text-slate-500"><?= esc($n['message']) ?></p><div class="mt-2 text-[10px] text-slate-400"><?= $n['created_at']?date('M j, g:i A',strtotime($n['created_at'])):'' ?></div></a><?php endforeach; ?></div></aside></div>
<div class="mt-6 rounded-2xl bg-gradient-to-br from-teal-600 to-teal-700 p-6 text-white shadow-card"><div class="grid gap-5 md:grid-cols-[1fr_auto] md:items-center"><div><p class="text-xs font-bold uppercase tracking-[.15em] text-white/70">Family care</p><h3 class="mt-2 font-display text-2xl font-extrabold">Care for someone you love.</h3><p class="mt-2 max-w-2xl text-sm leading-6 text-white/80">Create family profiles and request home visits on their behalf while keeping every care journey organized.</p></div><a href="/patient/family" class="rounded-xl bg-white px-5 py-3 text-center text-sm font-extrabold text-teal-700">Manage family</a></div></div></div>
