/* CareNav site — Contact / call-back request modal form. Opens from any CTA via window.openContactForm(audience). Submission is local-only (no backend) — logs payload + shows success state. */ window.SiteContactForm = function SiteContactForm() { const [open, setOpen] = React.useState(false); const [audience, setAudience] = React.useState('patients'); const [submitted, setSubmitted] = React.useState(false); const [form, setForm] = React.useState({ name: '', surname: '', cell: '', email: '', consent: false }); const [errors, setErrors] = React.useState({}); const firstFieldRef = React.useRef(null); // Expose opener globally React.useEffect(() => { window.openContactForm = (aud) => { setAudience(aud || 'patients'); setSubmitted(false); setForm({ name: '', surname: '', cell: '', email: '', consent: false }); setErrors({}); setOpen(true); }; return () => { delete window.openContactForm; }; }, []); // Lock body scroll while open + focus first field + Esc to close React.useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; const t = setTimeout(() => firstFieldRef.current && firstFieldRef.current.focus(), 80); const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onKey); return () => { document.body.style.overflow = prev; clearTimeout(t); window.removeEventListener('keydown', onKey); }; }, [open]); if (!open) return null; const titles = { patients: { eyebrow: 'Request a call-back', h: 'We\'ll be in touch.', sub: 'Share your details and a CareNav navigator from a participating provider will reach out within one business day.' }, clinicians: { eyebrow: 'Refer a patient', h: 'Tell us about your patient.', sub: 'A CareNav navigator will follow up to coordinate the referral. Submit details and we\'ll be in touch within one business day.' }, hospitals: { eyebrow: 'Book a demo', h: 'Let\'s show you CareNav.', sub: 'A 30-minute walkthrough tailored to your service line. We\'ll be in touch within one business day.' }, insurers: { eyebrow: 'Partner with us', h: 'Let\'s talk outcomes.', sub: 'Outcomes-aligned partnerships across SADC. We\'ll be in touch within one business day.' }, }; const t = titles[audience] || titles.patients; const set = (k) => (e) => { const val = e.target.type === 'checkbox' ? e.target.checked : e.target.value; setForm(f => ({ ...f, [k]: val })); if (errors[k]) setErrors(er => ({ ...er, [k]: undefined })); }; const validate = () => { const er = {}; if (!form.name.trim()) er.name = 'Required'; if (!form.surname.trim()) er.surname = 'Required'; if (!form.cell.trim()) er.cell = 'Required'; else if (!/^[0-9 +()-]{8,}$/.test(form.cell.trim())) er.cell = 'Enter a valid phone number'; if (!form.email.trim()) er.email = 'Required'; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) er.email = 'Enter a valid email'; if (!form.consent) er.consent = 'Please tick to consent'; return er; }; const onSubmit = (e) => { e.preventDefault(); const er = validate(); setErrors(er); if (Object.keys(er).length) return; // Local-only submission — log payload. Wire to backend later. console.log('[CareNav contact form]', { audience, ...form, ts: new Date().toISOString() }); setSubmitted(true); }; // ----- styles ----- const overlay = { position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(11, 41, 33, 0.62)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'cnFade 220ms ease-out', }; const card = { background: 'var(--cn-cream-50)', borderRadius: 20, width: '100%', maxWidth: 540, maxHeight: '92vh', overflowY: 'auto', boxShadow: '0 30px 80px rgba(11,41,33,0.4)', position: 'relative', animation: 'cnRise 280ms cubic-bezier(0.2, 0.8, 0.2, 1)', }; const labelStyle = { fontFamily: 'var(--cn-font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--cn-ink-700)', letterSpacing: '0.02em', display: 'block', marginBottom: 6 }; const fieldStyle = (hasErr) => ({ width: '100%', padding: '12px 14px', borderRadius: 10, border: hasErr ? '1.5px solid var(--cn-coral-600)' : '1px solid var(--cn-ink-200)', background: 'white', fontFamily: 'var(--cn-font-sans)', fontSize: 15, color: 'var(--cn-ink-900)', boxSizing: 'border-box', outline: 'none', transition: 'border-color 160ms', }); const errMsg = { fontFamily: 'var(--cn-font-sans)', fontSize: 11, color: 'var(--cn-coral-700)', marginTop: 4 }; return (
{ if (e.target === e.currentTarget) setOpen(false); }} role="dialog" aria-modal="true">
{/* Close */}
e.preventDefault()} style={{ padding: '40px 36px 32px' }}>
{t.eyebrow}

{t.h}

{t.sub}

Concept preview
This is only an idea for now — but we can't wait to bring this to life for you.
); };