// Section landing pages, Support, Driving Change, Health Professionals

function SupportPage({ navigate }) {
 return (
 <div data-screen-label="Support">
 <PageHero
 eyebrow="Support"
 title="Learn about SCN2A and DEE, and connect with other families."
 body="Plain-English information and an opt-in family Connect map for SCN2A and the broader developmental epileptic encephalopathy community."
 image={PHOTO.meetupIndoor}
 ledger={["INTERPRETER · TIS 131 450"]}
 primaryCta={{ label: 'Newly diagnosed? Start here', to: 'newly-diagnosed' }}
 secondaryCta={{ label: 'Register on the Connect map', to: 'involved' }}
 navigate={navigate}
 />
 <Breadcrumbs items={[{ label: 'Support' }]} navigate={navigate} />

 <SubsectionGrid
 eyebrow="Knowledge base"
 title="Understand the condition and the landscape."
 body="Clinician-reviewed explainers, written for families. Every acronym defined on first use. Links to deeper sources at the bottom of each page."
 items={[
 { icon: 'brain', tag: 'SCN2A', title: 'SCN2A-related disorders', body: 'The science, the variants, the range of presentations. Where research is moving.', cta: 'Read the explainer', to: 'scn2a-disorders' },
 { icon: 'help-circle', tag: 'DEE', title: 'What is DEE?', body: 'Definitions, diagnostic pathways, why early recognition matters.', cta: 'Read more', to: 'what-is-dee' },
 { icon: 'dna', tag: 'Genetics', title: 'Genetics & diagnosis', body: 'Plain-language guide to genetic testing, reading your results, and what to do next.', cta: 'Read the guide', to: 'genetics' },
 { icon: 'activity', tag: 'Seizures', title: 'Seizure types & management', body: 'First aid, medication safety, and why variant type matters.', cta: 'Read more', to: 'seizures' },
 { icon: 'sprout', tag: 'Development', title: 'Developmental considerations', body: 'Communication, motor, cognitive, what families notice and what helps.', cta: 'Read more', to: 'development' },
 { icon: 'heart-pulse', tag: 'Carer', title: 'Carer support & wellbeing', body: 'Practical support, peer connection, mental-health resources.', cta: 'Read more', to: 'carers' },
 ]}
 navigate={navigate}
 />

 <SubsectionGrid
 eyebrow="How we support families"
 title="Different kinds of help for different moments."
 items={[
 { icon: 'sparkles', tag: 'Newly diagnosed', title: 'First-steps support', body: 'A guided start: one-on-one family navigation, genetic counselling info, building your care team.', cta: 'Start here', to: 'newly-diagnosed' },
 { icon: 'users', tag: 'Peer connection', title: 'Family Connect map', body: 'Opt-in, moderated, free. Find other Australian families nearby, by condition or by state.', cta: 'Register', to: 'involved' },
 { icon: 'compass', tag: 'NDIS', title: 'NDIS Navigation Guide', body: 'Plain-language guide, access pathway, planning meeting prep, common pitfalls.', cta: 'Read the guide', to: 'ndis' },
 { icon: 'flask-conical', tag: 'Research', title: 'Research participation', body: 'Recruiting studies, the SCN2A Insights Registry, plain-English explainers on each trial.', cta: 'See trials', to: 'trials' },
 { icon: 'heart-pulse', tag: 'Caregiver', title: 'Carer wellbeing', body: 'Respite options, mental-health resources, sibling support, the Angel Aid programme.', cta: 'Read more', to: 'carers' },
 { icon: 'library', tag: 'Resources', title: 'Resources & tools', body: 'Information sheets, templates, fact sheets in five languages.', cta: 'Browse resources', to: 'resources' },
 ]}
 navigate={navigate}
 columns={3}
 />

 <CTABlock
 eyebrow="Family Connect map"
 title="You are not alone. Find Australian families nearby."
 body="Opt-in, moderated, free. Register and a team member will email you within five working days."
 ctaLabel="Register on the map"
 onCta={() => navigate('involved')}
 secondaryLabel="How it works"
 onSecondary={() => navigate('about')}
 />
 </div>
 );
}

function ChangePage({ navigate }) {
 return (
 <div data-screen-label="Driving Change">
 <PageHero
 eyebrow="Driving Change"
 title="Advocacy, research, partnership, built on SCN2A, scaled across DEE."
 body="The substance of what we do beyond direct family support, policy submissions, research partnerships, and international collaborations. Grounded in our SCN2A specialist core, scaled across the broader DEE community. Filed, footnoted, and accountable."
 image={PHOTO.conferenceUNSW}
 ledger={["6 SUBMISSIONS FILED · 2026", "12 RESEARCH PARTNERSHIPS", "4 INTERNATIONAL PEER ORGS"]}
 primaryCta={{ label: 'Read our latest submission', to: 'news' }}
 secondaryCta={{ label: 'Partner with us', to: 'professionals' }}
 navigate={navigate}
 />
 <Breadcrumbs items={[{ label: 'Driving Change' }]} navigate={navigate} />

 {/* Four pillars of change */}
 <section style={{ background: '#fff', padding: '88px 0' }}>
 <div className="container">
 <div style={{ marginBottom: 48, maxWidth: 760 }}>
 <div className="eyebrow">How we drive change</div>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 16px', lineHeight: 1.15, letterSpacing: '-0.01em' }}>
 Four streams of work, one strategy.
 </h2>
 <hr className="rule-teal" />
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }} className="stack-mobile">
 {[
 { n: '01', t: 'Understanding SCN2A and the broader DEE landscape', b: 'Why systemic change is needed, starting with SCN2A-related disorders and extending across the broader DEE community: diagnostic challenges, treatment gaps, and research needs across Australia.', items: ['What is SCN2A?', 'What is DEE?', 'Why SCN2A and DEE families need support', 'Diagnostic challenges', 'Treatment gaps', 'How we create change'] },
 { n: '02', t: 'Research & innovation', b: 'Where we partner, prioritise, and participate. From family advisory networks to natural-history studies.', items: ['Current partnerships', 'Family Advisory Network', 'Research priorities', 'Publications & presentations', 'Partner with us'] },
 { n: '03', t: 'Policy advocacy', b: 'The submissions, the letters, the forums where SCN2A and the broader DEE community are on the agenda. Often with international peers.', items: ['SCN2A policy & access work', 'DEE Forum', 'Policy submissions', 'What we\'re advocating for', 'Contact your representatives', 'Media & awareness'] },
 { n: '04', t: 'Optimal Care Pathway', b: 'Evidence-based care standards, SCN2A-specific where the science demands it, DEE-wide where the principles apply. From diagnosis through ongoing management, co-designed with families.', items: ['Best-practice guidelines', 'From diagnosis to management', 'Family input on care priorities', 'Sector consultation'] },
 ].map(p => (
 <article key={p.n} style={{ border: '1px solid #D5CFBF', background: '#fff', padding: '32px 32px 28px' }}>
 <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
 <span className="ledger-mono" style={{ fontSize: 14, color: '#0D1B2A', fontWeight: 700 }}>{p.n}</span>
 <h3 style={{ fontSize: 24, fontWeight: 700, color: '#0D1B2A', margin: 0, lineHeight: 1.25 }}>{p.t}</h3>
 </div>
 <p style={{ fontSize: 16, lineHeight: 1.6, color: '#6B6659', margin: '12px 0 18px' }}>{p.b}</p>
 <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
 {p.items.map((i, k) => (
 <li key={k} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: '#0D1B2A', borderTop: k === 0 ? '1px solid #D5CFBF' : 'none', paddingTop: k === 0 ? 12 : 0 }}>
 <span style={{ width: 4, height: 4, borderRadius: 0, background: '#1E3A6E' }} />
 {i}
 </li>
 ))}
 </ul>
 </article>
 ))}
 </div>
 </div>
 </section>

 {/* Latest filings, list layout */}
 <section style={{ background: '#F7F4F0', padding: '88px 0' }}>
 <div className="container">
 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: 0 }}>Latest filings</h2>
 <a href="#news" onClick={(e)=>{e.preventDefault();navigate('news');}} className="link">All news & submissions <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} /></a>
 </div>
 <div style={{ background: '#fff', border: '1px solid #D5CFBF' }}>
 {[
 { date: 'Ongoing', tag: 'RESEARCH', tone: 'teal', title: 'Sibling Research Project, UNSW', body: 'Partnering with UNSW on research into the experiences and support needs of siblings of children with a DEE.' },
 { date: 'Ongoing', tag: 'ADVISORY', tone: 'teal', title: 'Centre of Research Excellence in Paediatric Palliative Care', body: 'Appointed to the consumer advisory group, bringing DEE lived experience to national palliative care research.' },
 { date: '2026', tag: 'GRANTS', tone: 'teal', title: 'Research and infrastructure grants', body: 'Consumer and community involvement across a range of national research and infrastructure bids this year, bringing DEE family perspective to study design, priorities, and patient-preference work.' },
 { date: '27 May 2026', tag: 'NDIS', tone: 'teal', title: 'NDIS reform Bill, organisational submission', body: 'Submission to the Senate committee on the Securing the NDIS for Future Generations Bill 2026, calling for a specialised DEE pathway.' },
 { date: '15 May 2026', tag: 'SENATE', tone: 'teal', title: 'Senate epilepsy inquiry: Collective Voices from the DEE Community', body: '134 families on what life with a DEE is really like, and the six changes they need most. Read the report (PDF).' },
 ].map((it, i, arr) => (
 <a key={i} href="#news" onClick={(e)=>{e.preventDefault();navigate('news');}}
 style={{
 display: 'grid', gridTemplateColumns: '130px 110px 1fr 30px',
 alignItems: 'center', gap: 22, padding: '22px 26px',
 borderBottom: i < arr.length - 1 ? '1px solid #D5CFBF' : 'none',
 textDecoration: 'none', color: '#0D1B2A',
 transition: 'background 200ms',
 }}
 onMouseEnter={(e) => { e.currentTarget.style.background = '#F7F4F0'; }}
 onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
 className="stack-mobile">
 <span className="ledger-mono" style={{ fontSize: 13, color: '#6B6659' }}>{it.date}</span>
 <span className={`chip ${it.tone === 'coral' ? 'chip-coral' : ''}`}>{it.tag}</span>
 <div>
 <div style={{ fontSize: 17, fontWeight: 700, lineHeight: 1.3 }}>{it.title}</div>
 <div style={{ fontSize: 14, color: '#6B6659', marginTop: 4 }}>{it.body}</div>
 </div>
 <i data-lucide="arrow-right" style={{ width: 18, height: 18, color: '#0D1B2A', strokeWidth: 2 }} />
 </a>
 ))}
 </div>
 </div>
 </section>

 <CTABlock
 eyebrow="For policymakers, journalists, and researchers"
 title="When you need an evidence-informed voice on SCN2A or the broader Australian DEE community, talk to us."
 body="We respond to media enquiries within one working day. Policy and research partnership enquiries within five."
 ctaLabel="Contact our policy team"
 onCta={() => navigate('contact')}
 />
 </div>
 );
}

function ProfessionalsPage({ navigate }) {
 return (
 <div data-screen-label="Health Professionals">
 <PageHero
 eyebrow="For health professionals"
 title="Working alongside clinicians and researchers."
 body="SCN2A Australia is a family-led charity for the SCN2A and developmental and epileptic encephalopathy (DEE) community. We're not a medical service — we don't give clinical advice or medical education — but we'd welcome the chance to connect."
 image={PHOTO.luminescePanel}
 primaryCta={{ label: 'Get in touch', to: 'contact' }}
 secondaryCta={{ label: 'Research opportunities', to: 'research' }}
 navigate={navigate}
 />
 <Breadcrumbs items={[{ label: 'Health Professionals' }]} navigate={navigate} />

 <section style={{ background: '#F7F4F0', padding: '72px 0' }}>
 <div className="container" style={{ maxWidth: 720 }}>
 <div className="eyebrow" style={{ color: '#0D1B2A' }}>How we can help</div>
 <p style={{ fontSize: 17, lineHeight: 1.7, color: '#0D1B2A', margin: '14px 0 0' }}>
 What we bring is the perspective of the families we support. For researchers, that means a direct link to the SCN2A and DEE community and the priorities that matter to them. However you're working on SCN2A or DEE — in the clinic, in research, or in policy — we'd welcome a conversation.
 </p>
 <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
 <Button onClick={() => navigate('contact')}>Contact us <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} /></Button>
 <Button variant="outline" onClick={() => navigate('research')}>Research opportunities</Button>
 </div>
 </div>
 </section>
 </div>
 );
}

Object.assign(window, { SupportPage, ChangePage, ProfessionalsPage });