// ============================================================
// Direction A, "Evidence Ledger"
// Authority-first. Editorial type. Monospace ledger of recent
// submissions. Sharp corners (radius 0). Teal-led. Photography
// used sparingly and editorially.
// ============================================================

function HomeA({ navigate }) {
 return (
 <div className="dir-a" data-screen-label="Home, A (Evidence Ledger)">
 <HomeAHero navigate={navigate} />
 <HomeAStanding />
 <HomeAPathways navigate={navigate} />
 <HomeAEvidence navigate={navigate} />
 <HomeAImpact />
 <HomeAQuote />
 <HomeANewsletter />
 </div>
 );
}

function HomeAHero({ navigate }) {
 return (
 <section style={{ background: '#fff', borderBottom: '1px solid #D5CFBF' }}>
 <div className="container" style={{ padding: '72px 32px 0' }}>
 <div className="eyebrow" style={{ marginBottom: 24 }}>
 <span className="ledger-mono" style={{ color: '#6B6659', fontWeight: 600, letterSpacing: '0.18em' }}>SCN2A AUSTRALIA · v.2026</span>
 </div>
 <h1 className="hero-h1-mobile-lg" style={{
 fontSize: 'clamp(48px, 7.2vw, 92px)',
 fontWeight: 800, lineHeight: 0.96,
 letterSpacing: '-0.025em', color: '#0D1B2A',
 margin: 0, maxWidth: 1100,
 }}>
 Families who <em style={{ color: '#0D1B2A', fontStyle: 'italic', fontWeight: 700 }}>became experts</em>.<br />
 Evidence that moves policy.
 </h1>
 <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, marginTop: 56, alignItems: 'end' }} className="stack-mobile">
 <p className="hero-sub-mobile" style={{ fontSize: 22, lineHeight: 1.45, color: '#0D1B2A', margin: 0, maxWidth: 640 }}>
 We are the authoritative, family-led voice at the intersection of lived experience and scientific rigour. Born from SCN2A. Now advocating across the broader DEE community, submission by submission, partnership by partnership.
 </p>
 <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
 <Button size="lg" onClick={() => navigate('change')}>Read our latest submission</Button>
 <Button size="lg" variant="outline" onClick={() => navigate('support')}>For families <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} /></Button>
 </div>
 </div>

 </div>
 </section>
 );
}

function HomeAStanding() {
 const pillars = [
 { n: '01', t: 'Families as experts',
 b: 'Families develop deep expertise, in their child\'s condition, in the health system, in research priorities. We name and honour that expertise.' },
 { n: '02', t: 'Individual stories, collective power',
 b: 'One family\'s story matters. One thousand families\' stories change policy. We use narrative to build evidence, without reducing individuals to statistics.' },
 { n: '03', t: 'Change through sustained presence',
 b: 'Advocacy is not a single campaign. It is the accumulated weight of consistent presence in rooms where decisions get made.' },
 { n: '04', t: 'Australian leadership, global collaboration',
 b: 'We are not a chapter of an international organisation. We are a peer to SCN2A Europe, Simons Searchlight and IBE.' },
 { n: '05', t: 'Evidence and experience together',
 b: 'Research evidence and lived experience are both legitimate forms of knowledge. Our strength is bringing them together.' },
 ];
 return (
 <section style={{ background: '#F7F4F0', padding: '88px 0' }}>
 <div className="container">
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 56, alignItems: 'start' }} className="stack-mobile">
 <div>
 <div className="eyebrow">What we stand on</div>
 <h2 className="h2-mobile" style={{ fontWeight: 700, fontSize: 38, lineHeight: 1.15, color: '#0D1B2A', margin: '14px 0 18px', letterSpacing: '-0.01em' }}>
 Five pillars that shape every submission and partnership.
 </h2>
 <hr className="rule-teal" />
 <p style={{ marginTop: 24, fontSize: 15, color: '#6B6659', lineHeight: 1.65, maxWidth: 340 }}>
 They are not slogans. They are tested in every paper we sign, every research priority we set, every family we connect.
 </p>
 </div>
 <div>
 {pillars.map((p, i) => (
 <div key={p.n} style={{
 display: 'grid', gridTemplateColumns: '60px 1fr',
 gap: 24, padding: '22px 0',
 borderTop: i === 0 ? '1px solid #0D1B2A' : '1px solid #D5CFBF',
 borderBottom: i === pillars.length - 1 ? '1px solid #0D1B2A' : 'none',
 }}>
 <div className="ledger-mono" style={{ fontSize: 13, color: '#0D1B2A', fontWeight: 700, paddingTop: 4 }}>{p.n}</div>
 <div>
 <h3 style={{ fontSize: 22, fontWeight: 700, color: '#0D1B2A', margin: '0 0 6px', lineHeight: 1.3 }}>{p.t}</h3>
 <p style={{ fontSize: 16, lineHeight: 1.65, color: '#0D1B2A', margin: 0, maxWidth: 680 }}>{p.b}</p>
 </div>
 </div>
 ))}
 </div>
 </div>
 </div>
 </section>
 );
}

function HomeAPathways({ navigate }) {
 const items = [
 {
 audience: 'For researchers & clinicians',
 title: 'Partner with us, access our registry.',
 body: 'Family-prioritised endpoints, recruitment networks, advisory partnership. We move at the speed your timelines need.',
 to: 'professionals',
 tag: '12 active partnerships',
 },
 {
 audience: 'For policy & funders',
 title: 'Evidence-informed input that moves systems.',
 body: 'Position papers, submissions, and peer-reviewed evidence, anchored in the lived experience of Australian families.',
 to: 'change',
 tag: '6 submissions filed YTD',
 },
 {
 audience: 'For families & carers',
 title: 'Information, connection, and guides.',
 body: 'Newly diagnosed with an SCN2A-related disorder, or navigating life with a DEE, find a peer, a specialist, an explainer, or a fact sheet you can hand to a teacher.',
 to: 'support',
 tag: '450+ families connected',
 },
 ];
 return (
 <section style={{ background: '#fff', padding: '96px 0' }}>
 <div className="container">
 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 32, flexWrap: 'wrap' }}>
 <div style={{ maxWidth: 620 }}>
 <div className="eyebrow">Where to start</div>
 <h2 className="h2-mobile" style={{ fontWeight: 700, fontSize: 38, lineHeight: 1.15, color: '#0D1B2A', margin: '14px 0 0', letterSpacing: '-0.01em' }}>
 Our work serves several audiences. Pick the doorway closest to why you're here.
 </h2>
 </div>
 <span className="ledger-mono" style={{ fontSize: 12, color: '#6B6659', letterSpacing: '0.08em' }}>03 PATHWAYS · 01 ORG</span>
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid #0D1B2A', borderBottom: '1px solid #0D1B2A' }} className="stack-mobile">
 {items.map((it, i) => (
 <a key={it.title} href={'#' + it.to} onClick={(e)=>{e.preventDefault();navigate(it.to);}}
 className="card-hover"
 style={{
 padding: '36px 30px 32px',
 borderRight: i < items.length - 1 ? '1px solid #D5CFBF' : 'none',
 textDecoration: 'none', color: '#0D1B2A',
 display: 'flex', flexDirection: 'column', gap: 14,
 background: '#fff',
 }}>
 <div className="eyebrow" style={{ color: '#0D1B2A' }}>{it.audience}</div>
 <h3 style={{ fontSize: 26, fontWeight: 700, color: '#0D1B2A', margin: 0, lineHeight: 1.2, letterSpacing: '-0.005em' }}>{it.title}</h3>
 <p style={{ fontSize: 15.5, lineHeight: 1.6, color: '#6B6659', margin: 0 }}>{it.body}</p>
 <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24 }}>
 <span style={{ fontSize: 13, fontWeight: 700, color: '#0D1B2A' }}>Continue <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} /></span>
 <span className="ledger-mono" style={{ fontSize: 11, color: '#6B6659' }}>{it.tag}</span>
 </div>
 </a>
 ))}
 </div>
 </div>
 </section>
 );
}

function HomeAEvidence({ navigate }) {
 return (
 <section style={{ background: '#1E3A6E', color: '#fff', padding: '88px 0', position: 'relative', overflow: 'hidden' }}>
 <NetworkMotif opacity={0.15} stroke="#fff" />
 <div className="container" style={{ position: 'relative' }}>
 <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }} className="stack-mobile">
 <div>
 <div className="eyebrow" style={{ color: '#E8E3DA' }}>The research network, built around families</div>
 <h2 className="h2-mobile" style={{ fontWeight: 700, fontSize: 'clamp(28px, 4vw, 44px)', lineHeight: 1.15, margin: '14px 0 20px', color: '#fff', letterSpacing: '-0.01em' }}>
 23 research projects. 12 institutions. $39M+ in research funding influenced.
 </h2>
 <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,0.9)', margin: '0 0 28px', maxWidth: 580 }}>
 The community is not just a research subject. It is an active partner shaping the research agenda. </p>
 <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
 <Button size="lg" variant="onTeal" onClick={() => navigate('impact')}>See the full impact</Button>
 <Button size="lg" variant="outlineLight" onClick={() => navigate('professionals')}>For researchers</Button>
 </div>
 </div>
 <div>
 <div style={{
 border: '1px solid rgba(255,255,255,0.30)',
 padding: '28px 30px',
 background: 'rgba(0,0,0,0.18)',
 }}>
 <div className="ledger-mono" style={{ fontSize: 11, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.7)', marginBottom: 14 }}>RESEARCH NETWORK · EVIDENCE REGISTER</div>
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', rowGap: 18, columnGap: 24 }}>
 {[
 { l: 'Research projects', v: '23' },
 { l: 'Partner institutions', v: '12' },
 { l: 'States & territories', v: '5' },
 ].map(s => (
 <div key={s.l} style={{ borderTop: '1px solid rgba(255,255,255,0.18)', paddingTop: 10 }}>
 <div style={{ fontSize: 30, fontWeight: 800, lineHeight: 1, letterSpacing: '-0.02em' }}>{s.v}</div>
 <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', marginTop: 6, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{s.l}</div>
 </div>
 ))}
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
 );
}

function HomeAImpact() {
 const stats = [
 { fig: '23', unit: '', label: 'Research projects', note: 'SCN2A-led, DEE-wide' },
 { fig: '$39', unit: 'M+', label: 'Research funding influenced', note: 'across the partner network' },
 ];
 return (
 <section style={{ background: '#fff', 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: 38, fontWeight: 700, color: '#0D1B2A', margin: 0, letterSpacing: '-0.01em' }}>The work, in numbers.</h2>
 <span className="ledger-mono" style={{ fontSize: 12, color: '#6B6659', letterSpacing: '0.08em' }}>FROM THE EVIDENCE REGISTER · MAY 2026</span>
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', borderTop: '1px solid #0D1B2A' }} className="stack-mobile-2">
 {stats.map((s, i) => (
 <div key={s.label} style={{
 padding: '32px 28px 28px',
 borderRight: i < stats.length - 1 ? '1px solid #D5CFBF' : 'none',
 borderBottom: '1px solid #0D1B2A',
 }}>
 <div style={{ fontSize: 80, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.03em', color: '#0D1B2A' }}>
 {s.fig}<span style={{ color: '#8E3B5E', fontSize: 38 }}>{s.unit}</span>
 </div>
 <div style={{ marginTop: 18, fontSize: 16, fontWeight: 700, color: '#0D1B2A' }}>{s.label}</div>
 <div style={{ marginTop: 4, fontSize: 13, color: '#6B6659' }}>{s.note}</div>
 </div>
 ))}
 </div>
 </div>
 </section>
 );
}

function HomeAQuote() {
 return (
 <section style={{ background: '#F7F4F0', padding: '88px 0' }}>
 <div className="container">
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 56, alignItems: 'start' }} className="stack-mobile">
 <div>
 <div className="eyebrow">In our own words</div>
 <h2 className="h2-mobile" style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.15, color: '#0D1B2A', margin: '14px 0 0', letterSpacing: '-0.01em' }}>
 The founding voice.
 </h2>
 <hr className="rule-teal" style={{ marginTop: 18 }} />
 </div>
 <div style={{ borderLeft: '6px solid #0D1B2A', paddingLeft: 32 }}>
 <p style={{
 fontSize: 'clamp(22px, 2.4vw, 28px)', fontWeight: 500, lineHeight: 1.4,
 color: '#0D1B2A', margin: 0, letterSpacing: '-0.005em',
 }}>
 "SCN2A Australia began the way so many rare-disease communities do, a handful of families, each feeling alone, who found each other. <em style={{ color: '#0D1B2A' }}>That foundation of lived experience</em> is still at the heart of everything we do."
 </p>
 <div style={{ marginTop: 22, display: 'flex', alignItems: 'center', gap: 16 }}>
 <div style={{ width: 48, height: 48, background: '#1E3A6E', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 18, letterSpacing: '0.04em' }}>KP</div>
 <div>
 <div style={{ fontWeight: 700, color: '#0D1B2A' }}>Kris Pierce</div>
 <div style={{ fontSize: 14, color: '#6B6659' }}>Founder & Director · mother of Will</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
 );
}

function HomeANewsletter() {
 const [email, setEmail] = React.useState('');
 const [sent, setSent] = React.useState(false);
 return (
 <section style={{ background: '#fff', padding: '72px 0', borderTop: '1px solid #D5CFBF' }}>
 <div className="container">
 <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center' }} className="stack-mobile">
 <div>
 <div className="eyebrow">On the record · monthly</div>
 <h2 className="h2-mobile" style={{ fontSize: 32, fontWeight: 700, color: '#0D1B2A', margin: '12px 0 12px', lineHeight: 1.2 }}>
 Subscribe to <em style={{ color: '#0D1B2A' }}>The Ledger</em>.
 </h2>
 <p style={{ fontSize: 16, color: '#6B6659', margin: 0, maxWidth: 540 }}>
 One email a month. Three to four items. Policy updates, research opportunities, community events. One primary call to action per issue. Unsubscribe any time.
 </p>
 </div>
 {sent ? (
 <Callout kind="definition" label="Thanks">You're on the list. We'll be in touch.</Callout>
 ) : (
 <form onSubmit={(e)=>{e.preventDefault(); if (email) setSent(true);}} style={{ display: 'flex', gap: 0 }}>
 <input type="email" required value={email} onChange={(e)=>setEmail(e.target.value)}
 aria-label="Email address"
 placeholder="your@email.org.au"
 style={{ flex: 1, fontFamily: 'inherit', fontSize: 15, padding: '14px 18px', border: '1.5px solid #0D1B2A', borderRight: 0, outline: 'none', color: '#0D1B2A', background: '#fff' }} />
 <button type="submit" style={{ background: '#1E3A6E', color: '#fff', border: 'none', padding: '0 28px', fontFamily: 'inherit', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>Subscribe <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} /></button>
 </form>
 )}
 </div>
 </div>
 </section>
 );
}

Object.assign(window, { HomeA });
