<section class="bg-slate-50 py-8"><div class="mx-auto max-w-[1500px] px-4 lg:px-6"><div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"><div><p class="text-xs font-bold uppercase tracking-[.18em] text-teal-600">Nearby care</p><h1 class="mt-1 font-display text-3xl font-extrabold text-navy">Find Care</h1><p class="mt-1 text-sm text-slate-500"><?= count($practitioners) ?> verified professionals available in the current search.</p></div><form class="flex gap-2" action="/find-care"><select name="service" class="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm"><option value="">All services</option><?php foreach($services as $s): ?><option value="<?= $s['id'] ?>" <?= $selectedService==$s['id']?'selected':'' ?>><?= esc($s['name']) ?></option><?php endforeach; ?></select><button class="rounded-xl bg-teal-600 px-4 py-3 text-sm font-bold text-white">Apply</button></form></div>
<div class="grid min-h-[720px] overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-card xl:grid-cols-[250px_420px_1fr]">
 <aside class="border-b border-slate-100 p-5 xl:border-b-0 xl:border-r"><h2 class="font-display font-bold">Filters</h2><div class="mt-6"><p class="text-xs font-bold uppercase tracking-wider text-slate-400">Service</p><div class="mt-3 space-y-2 text-sm text-slate-600"><?php foreach(array_slice($services,0,6) as $s): ?><label class="flex items-center gap-2"><input type="radio" name="service_filter" class="text-teal-600" <?= $selectedService==$s['id']?'checked':'' ?>><span><?= esc($s['name']) ?></span></label><?php endforeach; ?></div></div><div class="mt-7"><p class="text-xs font-bold uppercase tracking-wider text-slate-400">Availability</p><div class="mt-3 space-y-2 text-sm text-slate-600"><label class="flex gap-2"><input type="checkbox" checked> Available now</label><label class="flex gap-2"><input type="checkbox"> Later today</label><label class="flex gap-2"><input type="checkbox"> Tomorrow</label></div></div><div class="mt-7"><p class="text-xs font-bold uppercase tracking-wider text-slate-400">Price range</p><input type="range" class="mt-4 w-full accent-teal-600" min="800" max="8000" value="4500"><div class="mt-1 flex justify-between text-[11px] text-slate-400"><span>KES 800</span><span>KES 8,000</span></div></div></aside>
 <div class="border-b border-slate-100 p-4 xl:border-b-0 xl:border-r"><div class="space-y-3"><?php if(!$practitioners): ?><div class="rounded-xl border border-dashed border-slate-200 p-6 text-center"><i data-lucide="search-x" class="mx-auto h-7 w-7 text-slate-300"></i><p class="mt-3 text-sm font-bold">No practitioners found yet</p><p class="mt-1 text-xs leading-5 text-slate-500">Run the database seeder for demo data or widen your search.</p></div><?php endif; ?><?php foreach($practitioners as $p): ?><a href="/practitioners/<?= $p['id'] ?>" class="block rounded-xl border border-slate-100 p-4 transition hover:border-teal-200 hover:shadow-card"><div class="flex gap-3"><div class="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-teal-50 font-bold text-teal-700"><?= initials($p['full_name']) ?></div><div class="min-w-0 flex-1"><div class="flex items-start justify-between gap-2"><div><h3 class="truncate text-sm font-bold text-navy"><?= esc($p['full_name']) ?></h3><p class="text-xs text-slate-500"><?= esc($p['profession']) ?></p></div><span class="rounded-full bg-teal-50 px-2 py-1 text-[10px] font-bold text-teal-700">Verified</span></div><div class="mt-2 flex flex-wrap gap-3 text-[11px] text-slate-500"><span>★ <?= number_format((float)$p['rating'],1) ?> (<?= (int)$p['review_count'] ?>)</span><?php if($p['distance_km']!==null): ?><span><?= $p['distance_km'] ?> km</span><?php endif; ?><?php if($p['eta_minutes']): ?><span><?= $p['eta_minutes'] ?> min</span><?php endif; ?></div><div class="mt-3 flex items-center justify-between"><span class="text-xs font-semibold text-slate-500">From <strong class="text-teal-700"><?= money($p['service_price'] ?: 0) ?></strong></span><span class="text-xs font-bold text-teal-600">View profile →</span></div></div></div></a><?php endforeach; ?></div></div>
 <div class="relative min-h-[520px] overflow-hidden map-grid"><div class="absolute left-[8%] top-[18%] w-[80%] map-road rotate-6"></div><div class="absolute left-[12%] top-[48%] w-[76%] map-road -rotate-12"></div><div class="absolute left-[36%] top-[10%] h-[70%] w-[7px] map-road rotate-12"></div><div class="absolute left-[12%] top-5 rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold shadow-card"><i data-lucide="map-pin" class="mr-1 inline h-3.5 w-3.5 text-teal-600"></i>Nairobi, Kenya</div><?php foreach([[30,28,'JM'],[58,22,'MW'],[72,48,'DO'],[43,64,'+']] as $pin): ?><div class="pin" style="left:<?= $pin[0] ?>%;top:<?= $pin[1] ?>%"><span><?= $pin[2] ?></span></div><?php endforeach; ?><div class="absolute bottom-4 left-4 rounded-xl bg-white/95 p-3 text-xs text-slate-500 shadow-card">Map provider hook ready for Google Maps / Mapbox credentials.</div></div>
</div></div></section>
