// Site header with mega/dropdown nav and mobile drawer menu.

const NAV_ITEMS = [
 {
 id: 'support', label: 'Support',
 children: [
 { id: 'newly-diagnosed', label: 'Newly diagnosed, start here' },
 { id: 'families', label: 'What families need to know' },
 { id: 'navigator', label: 'Use our navigation tool' },
 { id: 'understand', label: 'Understand SCN2A & DEE' },
 { id: 'what-is-dee', label: 'What is DEE?' },
 { id: 'scn2a-disorders', label: 'SCN2A-related disorders' },
 { id: 'genetics', label: 'Genetics & diagnosis' },
 { id: 'seizures', label: 'Seizure types & management' },
 { id: 'development', label: 'Developmental considerations' },
 { id: 'ndis', label: 'NDIS Navigation Guide' },
 { id: 'carers', label: 'Carer support & wellbeing' },
 { id: 'family-map', label: 'Family Connect map' },
 { id: 'sparky', label: "Sparky's Storybook" },
 ]
 },
 {
 id: 'change', label: 'Driving Change',
 children: [
 { id: 'change', label: 'Understanding DEE & systems' },
 { id: 'impact', label: 'Our impact' },
 { heading: 'Research' },
 { id: 'trials', label: 'Clinical trials' },
 { id: 'research', label: 'Research opportunities' },
 { id: 'publications', label: 'Publications & presentations' },
 { id: 'global', label: 'Global collaboration' },
 { id: 'news', label: 'Blogs & news' },
 ]
 },
 {
 id: 'professionals', label: 'Health Professionals',
 children: [
 { id: 'professionals', label: 'Refer a family' },
 { id: 'research', label: 'Partner on research' },
 { id: 'resources', label: 'Education hub' },
 { id: 'trials', label: 'Current clinical trials' },
 ]
 },
 {
 id: 'involved', label: 'Get Involved',
 children: [
 { id: 'involved', label: 'Donate' },
 { id: 'involved', label: 'Fundraise or volunteer' },
 { id: 'partners', label: 'Partner with us' },
 ]
 },
 {
 id: 'about', label: 'About',
 children: [
 { id: 'about', label: 'Our story & team' },
 { id: 'impact', label: 'Our impact' },
 { id: 'partners', label: 'Partners' },
 { id: 'global', label: 'Global collaboration' },
 { id: 'contact', label: 'Contact us' },
 ]
 },
];

function Header({ route, navigate, onOpenMobile, onOpenSearch, theme = 'light' }) {
 const [openMenu, setOpenMenu] = React.useState(null);
 const closeTimer = React.useRef();

 const openWithDelay = (id) => {
 clearTimeout(closeTimer.current);
 setOpenMenu(id);
 };
 const closeWithDelay = () => {
 clearTimeout(closeTimer.current);
 closeTimer.current = setTimeout(() => setOpenMenu(null), 140);
 };

 // Theme-aware: light bg w/ slate text, or dark teal bg w/ white text
 const isDark = theme === 'dark';
 const bg = isDark ? '#0D1B2A' : '#fff';
 const fg = isDark ? '#fff' : '#0D1B2A';
 const sub = isDark ? 'rgba(255,255,255,0.78)' : '#6B6659';
 const border = isDark ? 'rgba(255,255,255,0.10)' : '#D5CFBF';
 const activeAccent = isDark ? '#4A7EC7' : '#0D1B2A'; // cobalt underline on navy

 return (
 <header style={{
 position: 'sticky', top: 0, zIndex: 40,
 background: bg, color: fg,
 borderBottom: `1px solid ${border}`,
 }}>
 {/* Top utility bar, desktop only */}
 <div className="hide-mobile" style={{
 background: isDark ? 'rgba(0,0,0,0.18)' : '#F7F4F0',
 borderBottom: `1px solid ${border}`,
 fontSize: 12, color: sub,
 }}>
 <div className="container" style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 32px', alignItems: 'center' }}>
 <div style={{ display: 'flex', gap: 18 }}>
 <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
 <i data-lucide="phone" style={{ width: 12, height: 12 }} /> Need an interpreter? Call TIS National on 131 450
 </span>
 </div>
 <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
 <a href="/newly-diagnosed" onClick={(e)=>{e.preventDefault();navigate('newly-diagnosed');}} style={{ color: sub, textDecoration: 'none' }}>Newly diagnosed?</a>
 <a href="/professionals" onClick={(e)=>{e.preventDefault();navigate('professionals');}} style={{ color: sub, textDecoration: 'none' }}>For clinicians</a>
 <a href="/contact" onClick={(e)=>{e.preventDefault();navigate('contact');}} style={{ color: sub, textDecoration: 'none' }}>Contact</a>
 </div>
 </div>
 </div>

 <div className="container pad-mobile" style={{
 padding: '14px 32px',
 display: 'flex', alignItems: 'center', gap: 16,
 }}>
 <a href="/" onClick={(e)=>{e.preventDefault();navigate('home');}}
 style={{ textDecoration: 'none', flexShrink: 0 }}>
 {/* Full wordmark on desktop; compact (no descriptor line) on mobile to leave room for the actions */}
 <span className="hide-mobile" style={{ display: 'inline-flex' }}><Logo variant={isDark ? 'light' : 'dark'} size="md" /></span>
 <span className="only-mobile" style={{ display: 'inline-flex' }}><Logo variant={isDark ? 'light' : 'dark'} size="md" descriptor={false} /></span>
 </a>

 <nav className="hide-mobile" style={{
 display: 'flex', gap: 4, marginLeft: 'auto', fontSize: 14, fontWeight: 500,
 alignItems: 'center',
 }}>
 {NAV_ITEMS.map(it => {
 const active = route === it.id || (it.children || []).some(c => c.id === route);
 const open = openMenu === it.id;
 return (
 <div key={it.id}
 onMouseEnter={() => openWithDelay(it.id)}
 onMouseLeave={closeWithDelay}
 onFocus={() => it.children && openWithDelay(it.id)}
 onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) closeWithDelay(); }}
 onKeyDown={(e) => { if (e.key === 'Escape') setOpenMenu(null); }}
 style={{ position: 'relative' }}>
 <a href={hrefFor(it.id)}
 aria-haspopup={it.children ? 'true' : undefined}
 aria-expanded={it.children ? open : undefined}
 onClick={(e)=>{e.preventDefault();navigate(it.id);}}
 style={{
 display: 'inline-flex', alignItems: 'center', gap: 4,
 padding: '10px 14px',
 color: active ? (isDark ? '#fff' : '#0D1B2A') : fg,
 fontWeight: active ? 600 : 500,
 textDecoration: 'none',
 borderBottom: active ? `2px solid ${activeAccent}` : '2px solid transparent',
 }}>
 {it.label}
 {it.children && <i data-lucide="chevron-down" style={{ width: 14, height: 14, opacity: 0.6 }} />}
 </a>
 {it.children && open && (
 <div style={{
 position: 'absolute', top: '100%', left: 0,
 background: '#fff', minWidth: 260,
 boxShadow: '0 12px 32px rgba(20,40,60,0.12)',
 border: '1px solid #D5CFBF',
 padding: '8px 0',
 zIndex: 50,
 }}>
 {it.children.map((c, i) => (
 c.heading ? (
 <div key={i} style={{
 padding: '12px 18px 6px', fontSize: 11, fontWeight: 700,
 letterSpacing: '0.08em', textTransform: 'uppercase', color: '#0D1B2A',
 borderTop: i === 0 ? 'none' : '1px solid #E8E3DA', marginTop: i === 0 ? 0 : 4,
 }}>{c.heading}</div>
 ) : (
 <a key={i} href={hrefFor(c.id)} onClick={(e)=>{e.preventDefault();navigate(c.id);setOpenMenu(null);}}
 style={{
 display: 'block', padding: c.indent ? '10px 18px 10px 30px' : '10px 18px',
 color: '#0D1B2A', textDecoration: 'none', fontSize: 14,
 fontWeight: 500,
 }}
 onMouseEnter={(e)=>{ e.currentTarget.style.background = '#F7F4F0'; e.currentTarget.style.color = '#0D1B2A'; }}
 onMouseLeave={(e)=>{ e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#0D1B2A'; }}>
 {c.label}
 </a>
 )
 ))}
 </div>
 )}
 </div>
 );
 })}
 <div style={{ marginLeft: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
 <button onClick={onOpenSearch} aria-label="Search the site" title="Search"
 style={{
 background: 'transparent', border: 0, cursor: 'pointer', padding: 9, color: fg,
 display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 5,
 transition: 'background 120ms',
 }}
 onMouseEnter={(e)=>{ e.currentTarget.style.background = isDark ? 'rgba(255,255,255,0.10)' : '#F7F4F0'; }}
 onMouseLeave={(e)=>{ e.currentTarget.style.background = 'transparent'; }}>
 <i data-lucide="search" style={{ width: 20, height: 20 }} />
 </button>
 <Button size="sm" variant={isDark ? 'outlineLight' : 'outline'} as="a" href="https://scn2aaustralia.org/shop/" target="_blank">Shop</Button>
 <Button size="sm" variant="mulberry" onClick={() => navigate('involved')}>Donate</Button>
 </div>
 </nav>

 {/* Mobile actions: search + menu */}
 <div className="only-mobile" style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 2 }}>
 <button onClick={onOpenSearch} aria-label="Search the site"
 style={{
 background: 'transparent', border: 'none', color: fg, cursor: 'pointer', padding: 10,
 display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
 }}>
 <i data-lucide="search" style={{ width: 26, height: 26 }} />
 </button>
 <button onClick={onOpenMobile} aria-label="Open menu"
 style={{
 background: 'transparent', border: 'none', color: fg, cursor: 'pointer', padding: 8,
 display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
 }}>
 <i data-lucide="menu" style={{ width: 28, height: 28 }} />
 </button>
 </div>
 </div>
 </header>
 );
}

function MobileMenu({ open, onClose, navigate, route }) {
 const [expanded, setExpanded] = React.useState(null);
 const drawerRef = React.useRef(null);
 const restoreRef = React.useRef(null);

 React.useEffect(() => {
 if (!open) return;
 restoreRef.current = document.activeElement;
 const drawer = drawerRef.current;
 const getFocusable = () => drawer
 ? Array.from(drawer.querySelectorAll('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'))
 .filter(el => !el.disabled && el.offsetParent !== null)
 : [];
 const els = getFocusable();
 if (els.length) els[0].focus();
 const onKey = (e) => {
 if (e.key === 'Escape') { onClose(); return; }
 if (e.key === 'Tab') {
 const f = getFocusable();
 if (!f.length) return;
 const first = f[0], last = f[f.length - 1];
 if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
 else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
 }
 };
 document.addEventListener('keydown', onKey);
 return () => {
 document.removeEventListener('keydown', onKey);
 if (restoreRef.current && restoreRef.current.focus) restoreRef.current.focus();
 };
 }, [open, onClose]);

 if (!open) return null;
 return (
 <div style={{
 position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(15,30,40,0.55)',
 }} onClick={onClose}>
 <div className="mobile-drawer" ref={drawerRef} role="dialog" aria-modal="true" aria-label="Site menu"
 onClick={(e)=>e.stopPropagation()} style={{
 position: 'absolute', top: 0, right: 0, bottom: 0,
 width: 'min(420px, 92vw)', background: '#fff',
 display: 'flex', flexDirection: 'column',
 }}>
 <div style={{
 display: 'flex', alignItems: 'center', justifyContent: 'space-between',
 padding: '18px 22px', borderBottom: '1px solid #D5CFBF',
 }}>
 <Logo size="sm" />
 <button onClick={onClose} aria-label="Close menu" style={{ background: 'transparent', border: 0, cursor: 'pointer', padding: 4, color: '#0D1B2A' }}>
 <i data-lucide="x" style={{ width: 26, height: 26 }} />
 </button>
 </div>
 <nav style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
 <a href="/" onClick={(e)=>{e.preventDefault();navigate('home');onClose();}}
 style={{ display: 'block', padding: '14px 22px', color: route === 'home' ? '#0D1B2A' : '#0D1B2A', textDecoration: 'none', fontSize: 17, fontWeight: 600, borderBottom: '1px solid #F7F4F0' }}>
 Home
 </a>
 {NAV_ITEMS.map(it => {
 const isExp = expanded === it.id;
 return (
 <div key={it.id} style={{ borderBottom: '1px solid #F7F4F0' }}>
 <button onClick={() => setExpanded(isExp ? null : it.id)}
 aria-expanded={isExp}
 style={{
 display: 'flex', justifyContent: 'space-between', alignItems: 'center',
 width: '100%', padding: '14px 22px', border: 0, background: 'transparent',
 fontSize: 17, fontWeight: 600, color: '#0D1B2A', cursor: 'pointer',
 fontFamily: 'inherit', textAlign: 'left',
 }}>
 {it.label}
 <i data-lucide={isExp ? 'chevron-up' : 'chevron-down'} style={{ width: 18, height: 18, color: '#0D1B2A' }} />
 </button>
 {isExp && (
 <div style={{ padding: '0 22px 12px', background: '#F7F4F0' }}>
 <a href={hrefFor(it.id)} onClick={(e)=>{e.preventDefault();navigate(it.id);onClose();}}
 style={{ display: 'block', padding: '10px 0', color: '#0D1B2A', textDecoration: 'none', fontSize: 14, fontWeight: 600 }}>
 Overview <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} />
 </a>
 {it.children.map((c, i) => (
 c.heading ? (
 <div key={i} style={{ padding: '12px 0 4px', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#0D1B2A', borderTop: '1px solid #D5CFBF' }}>{c.heading}</div>
 ) : (
 <a key={i} href={hrefFor(c.id)} onClick={(e)=>{e.preventDefault();navigate(c.id);onClose();}}
 style={{ display: 'block', padding: '10px 0', color: '#0D1B2A', textDecoration: 'none', fontSize: 15, borderTop: '1px solid #D5CFBF' }}>
 {c.label}
 </a>
 )
 ))}
 </div>
 )}
 </div>
 );
 })}
 </nav>
 <div style={{ padding: '20px 22px', borderTop: '1px solid #D5CFBF', display: 'flex', flexDirection: 'column', gap: 10 }}>
 <Button variant="mulberry" full onClick={() => { navigate('involved'); onClose(); }}>Donate</Button>
 <Button variant="outline" full as="a" href="https://scn2aaustralia.org/shop/" target="_blank">Shop</Button>
 <Button variant="outline" full onClick={() => { navigate('contact'); onClose(); }}>Contact us</Button>
 <div style={{ fontSize: 12, color: '#6B6659', marginTop: 6, lineHeight: 1.5 }}>
 Need an interpreter? Call TIS National on <strong>131 450</strong>
 </div>
 </div>
 </div>
 </div>
 );
}

// -------- Site search --------
// Lightweight client-side search over the site's pages. No backend: we match
// the query against a curated index of page titles and keywords.
const SEARCH_INDEX = [
 { id: 'newly-diagnosed', title: 'Newly diagnosed, start here', keywords: 'just diagnosed first steps new beginning where to start' },
 { id: 'families', title: 'What families need to know', keywords: 'family guide caregiver' },
 { id: 'family-map', title: 'SCN2A family map', keywords: 'family connect map find families near me state australia community pin survey bereaved' },
 { id: 'navigator', title: 'Use our navigation tool', keywords: 'navigator guide plain english tool' },
 { id: 'understand', title: 'Understand SCN2A & DEE', keywords: 'learn knowledge base explainers' },
 { id: 'what-is-dee', title: 'What is DEE?', keywords: 'developmental epileptic encephalopathy definition' },
 { id: 'scn2a-disorders', title: 'SCN2A-related disorders', keywords: 'gene variant gain loss of function nav1.2' },
 { id: 'genetics', title: 'Genetics & diagnosis', keywords: 'genetic testing counsellor variant results genome sequencing' },
 { id: 'seizures', title: 'Seizure types & management', keywords: 'epilepsy medication first aid rescue midazolam' },
 { id: 'development', title: 'Developmental considerations', keywords: 'communication motor cognitive milestones therapy' },
 { id: 'ndis', title: 'NDIS Navigation Guide', keywords: 'disability funding plan support coordinator access' },
 { id: 'carers', title: 'Carer support & wellbeing', keywords: 'caregiver mental health respite siblings burnout' },
 { id: 'change', title: 'Driving Change', keywords: 'advocacy policy submissions reform' },
 { id: 'impact', title: 'Our impact', keywords: 'outcomes results achievements' },
 { id: 'trials', title: 'Clinical trials', keywords: 'research treatment gene therapy aso recruiting' },
 { id: 'research', title: 'Research opportunities', keywords: 'studies registry participate insights' },
 { id: 'publications', title: 'Publications & presentations', keywords: 'papers research evidence conference' },
 { id: 'global', title: 'Global collaboration', keywords: 'international ibe global genes ilae' },
 { id: 'news', title: 'Blogs & news', keywords: 'updates submissions stories blog' },
 { id: 'epilepsy-inquiry', title: 'Senate Epilepsy Inquiry submission', keywords: 'parliamentary submission senate inquiry epilepsy family voices 2026 documents' },
 { id: 'professionals', title: 'For health professionals', keywords: 'clinicians refer a family research education referral' },
 { id: 'involved', title: 'Get involved', keywords: 'donate fundraise volunteer connect map partner' },
 { id: 'walk', title: 'Walk Around Australia', keywords: 'fundraising event walk' },
 { id: 'about', title: 'About us', keywords: 'story team board governance who we are' },
 { id: 'partners', title: 'Partners', keywords: 'collaboration organisations supporters' },
 { id: 'resources', title: 'Resources & tools', keywords: 'fact sheets templates downloads languages factsheet' },
 { id: 'contact', title: 'Contact us', keywords: 'email enquiry interpreter get in touch' },
 { id: 'wills-story', title: "Will's story", keywords: 'family story lived experience' },
 { id: 'privacy', title: 'Privacy', keywords: 'privacy policy data' },
 { id: 'accessibility', title: 'Accessibility', keywords: 'accessibility wcag' },
];

function scorePage(p, query) {
 const title = p.title.toLowerCase();
 const kw = (p.keywords || '').toLowerCase();
 if (title === query) return 100;
 if (title.startsWith(query)) return 80;
 if (title.includes(query)) return 60;
 if (kw.includes(query)) return 40;
 const toks = query.split(/\s+/).filter(Boolean);
 if (toks.length && toks.some(t => title.includes(t) || kw.includes(t))) return 20;
 return 0;
}

function SearchOverlay({ open, onClose, navigate }) {
 const [q, setQ] = React.useState('');
 const inputRef = React.useRef(null);
 const dialogRef = React.useRef(null);
 const restoreRef = React.useRef(null);

 React.useEffect(() => {
 if (!open) { setQ(''); return; }
 restoreRef.current = document.activeElement;
 const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 30);
 const onKey = (e) => {
 if (e.key === 'Escape') { onClose(); return; }
 if (e.key === 'Tab') {
 const dlg = dialogRef.current;
 if (!dlg) return;
 const f = Array.from(dlg.querySelectorAll('a[href], button, input, [tabindex]:not([tabindex="-1"])'))
 .filter(el => !el.disabled && el.offsetParent !== null);
 if (!f.length) return;
 const first = f[0], last = f[f.length - 1];
 if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
 else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
 }
 };
 document.addEventListener('keydown', onKey);
 return () => { clearTimeout(t); document.removeEventListener('keydown', onKey); if (restoreRef.current && restoreRef.current.focus) restoreRef.current.focus(); };
 }, [open, onClose]);

 if (!open) return null;

 const query = q.trim().toLowerCase();
 const results = !query ? [] : SEARCH_INDEX
 .map(p => ({ ...p, score: scorePage(p, query) }))
 .filter(p => p.score > 0)
 .sort((a, b) => b.score - a.score || a.title.localeCompare(b.title))
 .slice(0, 8);

 const go = (id) => { onClose(); navigate(id); };
 const popular = ['newly-diagnosed', 'ndis', 'seizures', 'trials', 'resources', 'news'];

 // Inline SVGs (not lucide) so the live result list re-renders cleanly while typing.
 const svgSearch = <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6B6659" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" /></svg>;
 const svgArrow = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" /></svg>;
 const svgDoc = <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6B6659" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></svg>;

 return (
 <div onClick={onClose} style={{
 position: 'fixed', inset: 0, zIndex: 120, background: 'rgba(13,27,42,0.55)',
 display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '12vh 20px 20px',
 }}>
 <div ref={dialogRef} role="dialog" aria-modal="true" aria-label="Search the site" onClick={(e) => e.stopPropagation()}
 style={{ width: 'min(640px, 100%)', background: '#fff', borderRadius: 5, border: '1px solid #D5CFBF', boxShadow: '0 24px 64px rgba(13,27,42,0.28)', overflow: 'hidden' }}>
 <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', borderBottom: '1px solid #E8E3DA' }}>
 <span style={{ flexShrink: 0, display: 'inline-flex' }}>{svgSearch}</span>
 <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)}
 onKeyDown={(e) => { if (e.key === 'Enter' && results[0]) go(results[0].id); }}
 type="text" placeholder="Search pages, e.g. NDIS, seizures, trials" aria-label="Search pages"
 style={{ flex: 1, minWidth: 0, border: 0, outline: 'none', fontFamily: 'inherit', fontSize: 17, color: '#0D1B2A', background: 'transparent' }} />
 <button onClick={onClose} aria-label="Close search"
 style={{ background: 'transparent', border: 0, cursor: 'pointer', padding: 6, color: '#6B6659', display: 'inline-flex', alignItems: 'center' }}>
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
 </button>
 </div>

 <div style={{ maxHeight: '52vh', overflowY: 'auto' }}>
 {!query && (
 <div style={{ padding: '20px' }}>
 <div className="eyebrow" style={{ color: '#6B6659', marginBottom: 12 }}>Popular pages</div>
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
 {popular.map(id => {
 const p = SEARCH_INDEX.find(x => x.id === id);
 return p ? (
 <button key={id} onClick={() => go(id)} className="chip"
 style={{ border: 0, cursor: 'pointer', fontFamily: 'inherit' }}>{p.title}</button>
 ) : null;
 })}
 </div>
 </div>
 )}

 {query && results.length === 0 && (
 <div style={{ padding: '28px 20px', fontSize: 15, color: '#6B6659', lineHeight: 1.6 }}>
 No pages match &ldquo;{q}&rdquo;. Try a different term, or{' '}
 <a href="/contact" onClick={(e) => { e.preventDefault(); go('contact'); }} className="link">contact us</a>.
 </div>
 )}

 {results.map((r) => (
 <button key={r.id} onClick={() => go(r.id)}
 style={{
 display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left',
 padding: '14px 20px', background: 'transparent', border: 0, borderTop: '1px solid #F7F4F0',
 cursor: 'pointer', fontFamily: 'inherit', color: '#0D1B2A',
 }}
 onMouseEnter={(e) => { e.currentTarget.style.background = '#F7F4F0'; }}
 onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
 <span style={{ flexShrink: 0, display: 'inline-flex' }}>{svgDoc}</span>
 <span style={{ fontSize: 16, fontWeight: 600 }}>{r.title}</span>
 <span style={{ marginLeft: 'auto', color: '#6B6659', display: 'inline-flex' }}>{svgArrow}</span>
 </button>
 ))}
 </div>
 </div>
 </div>
 );
}

Object.assign(window, { Header, MobileMenu, NAV_ITEMS, SearchOverlay });