/* ClinicBooking.jsx — 4-step partner clinic booking (high-risk tier). Choose clinic → select time → confirm referral → booked. Clinics are real/plausible Kano institutions (Fatima's city). On confirm, the booking is lifted to the controller (onComplete) so the dashboard hero + Care timeline reflect the booked state. */ const CLINICS = [ { id: 'akth', name: 'Aminu Kano Teaching Hospital — Dental Wing', addr: 'Zaria Road', dist: '3.2 km away', rating: '4.7', services: ['Periodontal treatment', 'Diabetes management', 'On-site lab'] }, { id: 'mmsh', name: 'Murtala Muhammad Specialist Hospital', addr: 'Kofar Mata Road', dist: '5.8 km away', rating: '4.5', services: ['Periodontal treatment', 'Internal medicine', 'Cardiology consult'] }, { id: 'premier', name: 'Kano Premier Dental Clinic', addr: 'Bompai Road', dist: '2.1 km away', rating: '4.8', services: ['Periodontal treatment', 'Restorative dentistry', 'X-ray on-site'] }, ]; const TIMES = ['9:00 AM', '11:30 AM', '2:00 PM', '4:00 PM']; const WD = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const MO = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; function buildDates() { const base = new Date(); const out = []; for (let i = 0; i < 7; i++) { const dt = new Date(base); dt.setDate(base.getDate() + i); out.push({ id: 'd' + i, chip: i === 0 ? 'Today' : i === 1 ? 'Tomorrow' : WD[dt.getDay()], day: dt.getDate(), mon: MO[dt.getMonth()], full: i === 0 ? 'today' : i === 1 ? 'tomorrow' : `${WD[dt.getDay()]} ${dt.getDate()} ${MO[dt.getMonth()]}`, }); } return out; } // ── Step 1 — clinic selection ──────────────────────────────────────────── function ClinicSelect({ value, onSelect, onBack, onContinue }) { return ( }>

In-person care for periodontal treatment.

We’ve found 3 partner clinics near you in Kano with both medical and dental services on-site.

{CLINICS.map(c => { const sel = value === c.id; return (
onSelect(c.id)} style={{ cursor: 'pointer', background: sel ? 'var(--amber-50)' : '#fff', border: sel ? '2px solid var(--amber-500)' : '1px solid var(--border-default)', borderRadius: 'var(--radius-m)', padding: sel ? 15 : 16, boxShadow: 'var(--shadow-xs)', }}>
{c.name}
{c.rating}
{c.addr} · {c.dist}
{c.services.map(s => ( {s} ))}
); })}
); } // ── Step 2 — time slot ───────────────────────────────────────────────── function SlotSelect({ clinic, dates, dateId, slot, onPickDate, onPickSlot, onBack, onContinue }) { return ( }>

Select your preferred time.

Within the next 7 days.

{/* date chips */}
{dates.map(dt => { const sel = dateId === dt.id; return ( ); })}
{/* time slots */}
Available times
{TIMES.map(t => ( onPickSlot(t)}/> ))}
); } // ── Step 3 — referral confirmation ────────────────────────────────────── function ReferralConfirm({ clinic, dateLabel, slot, onBack, onConfirm }) { const cap = dateLabel.charAt(0).toUpperCase() + dateLabel.slice(1); return ( }>

You’re booking:

{clinic.name}
To be addressed
{['Periodontal treatment', 'Diabetes coordination'].map(s => ( {s} ))}
{/* Referral package — the trust beat */}
What we’re sending ahead

Your screening results, today’s video consultation notes, your active prescription, and your health questionnaire responses will be shared with the clinic ahead of your visit. They’ll have everything they need — you won’t have to repeat your story.

Shared securely. HIPAA compliant.
); } function Row({ icon, label, style = {} }) { return (
{label}
); } // ── Step 4 — confirmation ──────────────────────────────────────────────── function ClinicBooked({ clinic, dateLabel, slot, onDone, onCalendarSoon }) { const [shown, setShown] = React.useState(false); React.useEffect(() => { const t = setTimeout(() => setShown(true), 30); return () => clearTimeout(t); }, []); return (
}>

Booked.

Your appointment at {clinic.name} is confirmed for {dateLabel} at {slot}. They’ll see you for periodontal treatment and to check in on your diabetes management.

What to bring
Just yourself. We’ve sent everything else ahead.
); } // ── Flow controller ────────────────────────────────────────────────────── function ClinicBooking({ onExit, onDone, onComplete, onCalendarSoon, initStep = 0 }) { const [step, setStep] = React.useState(initStep); const [clinicId, setClinicId] = React.useState(initStep > 0 ? CLINICS[0].id : null); const dates = React.useMemo(buildDates, []); const [dateId, setDateId] = React.useState('d3'); // default 3 days out const [slot, setSlot] = React.useState(initStep > 1 ? '11:30 AM' : null); const clinic = CLINICS.find(c => c.id === clinicId); const dt = dates.find(x => x.id === dateId); const dateLabel = dt ? dt.full : ''; const back = () => { if (step === 0) onExit(); else setStep(s => s - 1); }; const confirm = () => { if (onComplete && clinic) onComplete({ clinicName: clinic.name, dateLabel, slot, dateShort: dt ? `${dt.day} ${dt.mon}` : '' }); setStep(3); }; if (step === 0) return setStep(1)}/>; if (step === 1) return setStep(2)}/>; if (step === 2) return ; return ; } window.MunaClinicBooking = { ClinicBooking };