// Section landing pages, Our Impact, Partners
// Real, finalized copy from SCN2A Australia content briefs (March 2026).

function ImpactPage({ navigate }) {
 return (
 <div data-screen-label="Our Impact">
 <PageHero
 eyebrow="Our impact"
 title="A small organisation with an outsized reach."
 body="SCN2A Australia works at the intersection of research, policy, advocacy, and community. This page sets out, with evidence, what that reach looks like."
 image={PHOTO.luminescePanel}
 ledger={["23 RESEARCH PROJECTS", "$39M+ FUNDING INFLUENCED", "12 PARTNER INSTITUTIONS"]}
 primaryCta={{ label: 'Contact our team', to: 'contact' }}
 secondaryCta={{ label: 'See our partners', to: 'partners' }}
 navigate={navigate}
 />
 <Breadcrumbs items={[{ label: 'About', to: 'about' }, { label: 'Our impact' }]} navigate={navigate} />

 {/* Research network, headline stats */}
 <section style={{ background: '#fff', padding: '88px 0' }}>
 <div className="container">
 <div style={{ marginBottom: 36, maxWidth: 760 }}>
 <div className="eyebrow">Research network</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' }}>
 Scale and reach across the Australian SCN2A and DEE ecosystem.
 </h2>
 <hr className="rule-teal" />
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid #0D1B2A' }} className="stack-mobile-2">
 {[
 { fig: '23', unit: '', label: 'Research projects', note: 'SCN2A-led, DEE-wide' },
 { fig: '$39', unit: 'M+', label: 'Funding influenced', note: 'across the partner network' },
 { fig: '12', unit: '+', label: 'Partner institutions', note: 'Australia + international' },
 { fig: '5', unit: '', label: 'States & territories', note: 'with active projects' },
 ].map((s, i) => (
 <div key={s.label} style={{
 padding: '28px 26px 26px',
 borderRight: i < 3 ? '1px solid #D5CFBF' : 'none',
 borderBottom: '1px solid #0D1B2A',
 }}>
 <div style={{ fontSize: 64, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.03em', color: '#0D1B2A' }}>
 {s.fig}<span style={{ color: '#8E3B5E', fontSize: 30 }}>{s.unit}</span>
 </div>
 <div style={{ marginTop: 16, fontSize: 15, fontWeight: 700, color: '#0D1B2A' }}>{s.label}</div>
 <div style={{ marginTop: 4, fontSize: 13, color: '#6B6659' }}>{s.note}</div>
 </div>
 ))}
 </div>
 </div>
 </section>

 {/* Research lifecycle + state breakdown */}
 <section style={{ background: '#F7F4F0', padding: '88px 0' }}>
 <div className="container">
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'start' }} className="stack-mobile">
 <div>
 <div className="eyebrow">Research lifecycle coverage</div>
 <h3 style={{ fontSize: 26, fontWeight: 700, color: '#0D1B2A', margin: '14px 0 22px', lineHeight: 1.2 }}>
 From bench to bedside to system.
 </h3>
 <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
 {[
 { l: 'Health Services Research', n: '10 projects', pct: 43 },
 { l: 'Basic & Translational', n: '4 projects', pct: 17 },
 { l: 'Health Technology Assessment', n: '4 projects', pct: 17 },
 { l: 'Clinical Trials', n: '3 projects', pct: 13 },
 { l: 'Equity & Access', n: '2 projects', pct: 9 },
 ].map(b => (
 <div key={b.l}>
 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
 <span style={{ fontWeight: 600, fontSize: 15 }}>{b.l}</span>
 <span className="ledger-mono" style={{ fontSize: 13, color: '#6B6659' }}>{b.pct}% · {b.n}</span>
 </div>
 <div style={{ height: 8, background: '#fff', border: '1px solid #D5CFBF' }}>
 <div style={{ height: '100%', width: `${b.pct * 2.2}%`, background: '#1E3A6E' }} />
 </div>
 </div>
 ))}
 </div>
 </div>
 <div>
 <div className="eyebrow">Partnership network by state</div>
 <h3 style={{ fontSize: 26, fontWeight: 700, color: '#0D1B2A', margin: '14px 0 22px', lineHeight: 1.2 }}>
 Five states. Thirteen institutions. National reach.
 </h3>
 <div style={{ background: '#fff', border: '1px solid #D5CFBF' }}>
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', padding: '14px 22px', background: '#1E3A6E', color: '#fff', fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
 <span>State / Territory</span>
 <span style={{ textAlign: 'right' }}>Institutions</span>
 <span style={{ textAlign: 'right' }}>Projects</span>
 </div>
 {[
 ['VIC', '4', '9'],
 ['NSW', '5', '7'],
 ['QLD', '1', '2'],
 ['SA', '1', '1'],
 ['National', '2', '3'],
 ].map(([s, i, p]) => (
 <div key={s} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', padding: '14px 22px', borderTop: '1px solid #D5CFBF', alignItems: 'center' }}>
 <span style={{ fontWeight: 700 }}>{s}</span>
 <span className="ledger-mono" style={{ textAlign: 'right', color: '#6B6659' }}>{i}</span>
 <span className="ledger-mono" style={{ textAlign: 'right', color: '#0D1B2A', fontWeight: 700 }}>{p}</span>
 </div>
 ))}
 </div>
 <p style={{ fontSize: 13, color: '#6B6659', marginTop: 16, lineHeight: 1.55 }}>
 Strategic impact domains: Genomic Medicine · Therapeutics · Care Delivery · Transitions · Health Policy · Family Support · Clinical Evidence.
 </p>
 </div>
 </div>
 </div>
 </section>

 <CTABlock
 eyebrow="Work with us"
 title="Researcher, clinician, or funder?"
 body="Whether you're seeking a community partner who shapes research, not just populates it, a clinician wanting to link families to the right networks, or a funder looking for an organisation with proven reach and rigour: we'd like to hear from you."
 ctaLabel="Contact SCN2A Australia"
 onCta={() => navigate('contact')}
 secondaryLabel="See our partners"
 onSecondary={() => navigate('partners')}
 />
 </div>
 );
}

function PartnersPage({ navigate }) {
 return (
 <div data-screen-label="Partners">
 <PageHero
 eyebrow="Partners"
 title="We do not work in isolation."
 body="Our impact, in research, advocacy, policy, and community, is built on genuine partnerships with organisations that share our commitment to improving outcomes for people living with SCN2A and DEE."
 image={PHOTO.luminescePortrait}
 ledger={["NATIONAL PARTNER NETWORK", "GLOBAL COLLABORATIONS", "AUSTRALIAN PEAK BODIES"]}
 navigate={navigate}
 />
 <Breadcrumbs items={[{ label: 'About', to: 'about' }, { label: 'Partners' }]} navigate={navigate} />

 {/* Research partners */}
 <section style={{ background: '#fff', padding: '88px 0' }}>
 <div className="container">
 <div style={{ marginBottom: 36, maxWidth: 760 }}>
 <div className="eyebrow">Research partners</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' }}>
 Universities, clinical-research units, and not-for-profits whose work directly benefits our community.
 </h2>
 <hr className="rule-teal" />
 </div>

 {/* Angel Aid feature card */}
 <article style={{ border: '1px solid #D5CFBF', display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 0 }} className="stack-mobile">
 <div style={{ background: '#E8E3DA', padding: '40px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 24 }}>
 <div>
 <div className="eyebrow">Featured partner</div>
 <h3 style={{ fontSize: 26, fontWeight: 700, color: '#0D1B2A', margin: '12px 0 14px', lineHeight: 1.2 }}>Angel Aid / Raregivers, Inc.</h3>
 <p style={{ fontSize: 14.5, color: '#6B6659', lineHeight: 1.6, margin: 0 }}>
 US-based not-for-profit providing specialised wellbeing support for carers in the rare-disease community.
 </p>
 </div>
 <div className="ledger-mono" style={{ fontSize: 12, color: '#0D1B2A', letterSpacing: '0.08em' }}>angelaidcares.org</div>
 </div>
 <div style={{ padding: '36px 36px' }}>
 <p style={{ fontSize: 16, lineHeight: 1.7, color: '#0D1B2A', margin: '0 0 14px' }}>
 Raregivers's <strong>Angel Aid caregiver wellness program</strong>, a six-week online group wellness retreat, was adapted and piloted for the Australian rare-epilepsy community through a partnership led by SCN2A Australia.
 </p>
 <p style={{ fontSize: 16, lineHeight: 1.7, color: '#6B6659', margin: '0 0 18px' }}>
 The Australian pilot was co-designed with a multidisciplinary team and formally evaluated in a peer-reviewed study published in the <em>Orphanet Journal of Rare Diseases</em> (2025). The findings supported meaningful benefits for carer wellbeing and social inclusion.
 </p>
 <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
 <Button size="sm" variant="outline" as="a" href="https://www.angelaidcares.org/australia">Learn about Angel Aid</Button>
 <Button size="sm" variant="ghost" as="a" href="https://link.springer.com/article/10.1186/s13023-025-04036-0">Read the evaluation paper</Button>
 </div>
 </div>
 </article>
 </div>
 </section>

 {/* Advocacy & sector partners */}
 <section style={{ background: '#F7F4F0', padding: '88px 0' }}>
 <div className="container">
 <div style={{ marginBottom: 36, maxWidth: 760 }}>
 <div className="eyebrow">Advocacy & sector partners</div>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 0', lineHeight: 1.15 }}>
 Working alongside Australian advocacy organisations, shared objectives, not administrative formality.
 </h2>
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }} className="stack-mobile">
 {[
 { name: 'Epilepsy Foundation Australia', body: 'Joint submission to the NDIS (2024) advocating for improved access pathways for children with rare and complex epilepsies. National peak body for people living with epilepsy.', url: 'epilepsyfoundation.org.au' },
 { name: 'Genetic Epilepsy Team Australia (GETA)', body: 'National network connecting Australian clinical teams working with children and families affected by genetic epilepsies. We are an active participant and conference contributor.', url: 'geneticepilepsyteam.com.au' },
 { name: 'Rare Voices Australia', body: 'National peak body for people living with rare diseases in Australia. We work within the rare-disease advocacy ecosystem that Rare Voices Australia leads.', url: 'rarevoices.org.au' },
 { name: 'Epilepsy Association of Australia', body: 'The national body connecting epilepsy organisations across the country. SCN2A Australia is a member.', url: 'epilepsy.asn.au' },
 { name: 'Child Unlimited', body: 'Co-contributors to a budget submission (2023) supporting investment in chronic-illness research and consumer-engagement infrastructure.' },
 { name: 'RDNow · MCRI', body: 'Member of the Community Engagement Committee at the Murdoch Children’s Research Institute.' },
 ].map(p => (
 <article key={p.name} style={{ background: '#fff', border: '1px solid #D5CFBF', padding: '24px 24px 22px', display: 'flex', flexDirection: 'column', gap: 12 }}>
 <h3 style={{ fontSize: 18, fontWeight: 700, color: '#0D1B2A', margin: 0, lineHeight: 1.25 }}>{p.name}</h3>
 <p style={{ fontSize: 14, lineHeight: 1.6, color: '#6B6659', margin: 0 }}>{p.body}</p>
 {p.url && <a href={'https://' + p.url} target="_blank" rel="noopener" className="ledger-mono" style={{ marginTop: 'auto', fontSize: 12, color: '#0D1B2A', letterSpacing: '0.08em', textDecoration: 'none' }}>{p.url}</a>}
 </article>
 ))}
 </div>
 </div>
 </section>

 {/* Global network affiliations */}
 <section style={{ background: '#fff', padding: '88px 0' }}>
 <div className="container">
 <div style={{ marginBottom: 36, maxWidth: 760 }}>
 <div className="eyebrow">Global network affiliations</div>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 16px', lineHeight: 1.15 }}>
 International memberships and formal roles, not isolated by geography.
 </h2>
 </div>
 <div style={{ background: '#fff', border: '1px solid #D5CFBF' }}>
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', padding: '14px 24px', background: '#1E3A6E', color: '#fff', fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
 <span>Organisation</span>
 <span>Role / Engagement</span>
 </div>
 {[
 ['International Bureau for Epilepsy (IBE)', 'Community Council member · co-convening SCN2A Global Leaders 2026'],
 ['ILAE, International League Against Epilepsy', 'Care Pathways Task Force'],
 ['Global Genes', 'Rare Global Advocacy Leadership Council, previous Chair'],
 ['Rare Epilepsy Network (REN)', 'Former Coordinating Committee & International Workgroup Lead · ongoing member'],
 ['E+ Epilepsy Plus Alliance', 'Member, rare and complex epilepsies'],
 ['IRDiRC, International Rare Diseases Research Consortium', 'Task Force on Regulatory Convergence'],
 ['ISPEP, International Society for Patient Engagement Professionals', 'Member'],
 ['HTAi, Health Technology Assessment International', 'Committee member, rare disease & patient involvement'],
 ].map(([o, r], i) => (
 <div key={o} style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', padding: '14px 24px', borderTop: '1px solid #D5CFBF', alignItems: 'center', gap: 16 }} className="stack-mobile-2">
 <span style={{ fontWeight: 700, fontSize: 15 }}>{o}</span>
 <span style={{ fontSize: 14, color: '#6B6659' }}>{r}</span>
 </div>
 ))}
 </div>
 </div>
 </section>

 {/* Australian networks */}
 <section style={{ background: '#F7F4F0', padding: '64px 0' }}>
 <div className="container">
 <div className="eyebrow" style={{ marginBottom: 22 }}>Australian network memberships</div>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }} className="stack-mobile-2">
 {[
 'Epilepsy Association of Australia',
 'Epilepsy Society of Australia',
 'Neurological Alliance Australia',
 'Neurological Alliance Queensland',
 'Rare NSW',
 'RDNow Community Engagement Committee, MCRI',
 ].map(n => (
 <div key={n} style={{ background: '#fff', border: '1px solid #D5CFBF', padding: '20px 20px', fontSize: 14, fontWeight: 600, color: '#0D1B2A', display: 'flex', alignItems: 'center', minHeight: 80 }}>{n}</div>
 ))}
 </div>
 </div>
 </section>

 <CTABlock
 eyebrow="Become a partner"
 title="Working on what we work on?"
 body="We welcome partnerships with organisations whose work aligns with improving outcomes for people living with SCN2A, DEE, and related rare neurological conditions, particularly collaborations that treat community expertise as a genuine asset."
 ctaLabel="Contact us"
 onCta={() => navigate('contact')}
 />
 </div>
 );
}

Object.assign(window, { ImpactPage, PartnersPage });