// ============================================================
// Direction C, "The Network"
// Graphic-led. Network/connection motif as primary visual
// language. Oversized typography, asymmetric grids,
// dot-and-arc constellations. Pushes the brand vocabulary.
// ============================================================

function HomeC({ navigate }) {
 return (
 <div className="dir-c" data-screen-label="Home, C (The Network)">
 <HomeCHero navigate={navigate} />
 <HomeCConstellation navigate={navigate} />
 <HomeCPillars />
 <HomeCDouble navigate={navigate} />
 <HomeCNumbers />
 <HomeCRecent navigate={navigate} />
 <HomeCCTA navigate={navigate} />
 </div>
 );
}

// --- Hero: full-bleed dark teal, big network graphic ----------
function HomeCHero({ navigate }) {
 // Node coordinates for the hero network SVG
 // Centred on Australia (large central node) + global partners orbiting
 const nodes = [
 // Australia (central, large)
 { id: 'AU', x: 660, y: 360, r: 22, label: 'AU · SCN2A AUSTRALIA', primary: true },
 // Australian gov & sector
 { id: 'MSAC', x: 460, y: 260, r: 7, label: 'MSAC ESC' },
 { id: 'GENO', x: 540, y: 180, r: 7, label: 'Genomics Australia' },
 { id: 'GETA', x: 780, y: 200, r: 7, label: 'GETA' },
 { id: 'EFA', x: 860, y: 320, r: 7, label: 'Epilepsy Foundation AU' },
 { id: 'RVA', x: 800, y: 460, r: 7, label: 'Rare Voices AU' },
 // International peers
 { id: 'IBE', x: 240, y: 360, r: 11, label: 'IBE · Community Council' },
 { id: 'ILAE', x: 330, y: 480, r: 11, label: 'ILAE Care Pathways' },
 { id: 'GG', x: 280, y: 220, r: 10, label: 'Global Genes' },
 { id: 'IRD', x: 1040, y: 380, r: 11, label: 'IRDiRC' },
 // Far satellites
 { id: 'X1', x: 140, y: 140, r: 4 },
 { id: 'X2', x: 120, y: 540, r: 4 },
 { id: 'X3', x: 1080, y: 200, r: 4 },
 { id: 'X4', x: 1120, y: 520, r: 4 },
 { id: 'X5', x: 980, y: 540, r: 4 },
 { id: 'X6', x: 380, y: 580, r: 4 },
 ];
 // Edges connecting AU to everyone
 const edges = nodes.filter(n => n.id !== 'AU').map(n => ({ from: 'AU', to: n.id }));
 // Some inter-edges
 edges.push({ from: 'IBE', to: 'ILAE' }, { from: 'ILAE', to: 'IRD' }, { from: 'IBE', to: 'GG' }, { from: 'MSAC', to: 'GENO' }, { from: 'GETA', to: 'EFA' });
 const nodeMap = Object.fromEntries(nodes.map(n => [n.id, n]));

 return (
 <section style={{ background: '#1E3A6E', color: '#fff', position: 'relative', overflow: 'hidden' }}>
 {/* Network SVG, contained to right side */}
 <svg viewBox="0 0 1200 700" preserveAspectRatio="xMidYMid slice"
 style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.92 }}>
 {/* Edges */}
 <g stroke="rgba(255,255,255,0.32)" strokeWidth="1" fill="none">
 {edges.map((e, i) => {
 const a = nodeMap[e.from], b = nodeMap[e.to];
 if (!a || !b) return null;
 // Curved bezier
 const mx = (a.x + b.x) / 2;
 const my = (a.y + b.y) / 2 - 30;
 return <path key={i} d={`M ${a.x} ${a.y} Q ${mx} ${my} ${b.x} ${b.y}`} />;
 })}
 </g>
 {/* Nodes */}
 <g>
 {nodes.map(n => (
 <g key={n.id}>
 {n.primary && <circle cx={n.x} cy={n.y} r={n.r + 14} fill="rgba(142,59,94,0.18)" />}
 {n.primary && <circle cx={n.x} cy={n.y} r={n.r + 8} fill="none" stroke="#8E3B5E" strokeWidth="1" strokeDasharray="2 3" />}
 <circle cx={n.x} cy={n.y} r={n.r}
 fill={n.primary ? '#8E3B5E' : 'rgba(255,255,255,0.92)'}
 className={!n.primary && n.r >= 7 ? 'node-pulse' : undefined}
 style={n.primary ? {} : { animationDelay: `${(n.x % 5) * 0.5}s` }} />
 </g>
 ))}
 </g>
 {/* Labels for major nodes */}
 <g fill="rgba(255,255,255,0.78)" style={{ fontFamily: 'JetBrains Mono, Courier New, monospace', fontSize: 11, letterSpacing: '0.08em' }}>
 {nodes.filter(n => n.label).map(n => (
 <text key={n.id} x={n.x + n.r + 8} y={n.y + 4}>{n.label}</text>
 ))}
 </g>
 </svg>

 {/* Dark vignette over network for readability */}
 <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(13,27,42,0.92) 0%, rgba(13,27,42,0.72) 38%, rgba(13,27,42,0.30) 100%)' }} />
 <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: '#8E3B5E' }} />

 <div className="container" style={{ position: 'relative', padding: '96px 32px 112px', minHeight: '76vh', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
 <div className="eyebrow ledger-mono" style={{ color: '#E8E3DA', marginBottom: 22, letterSpacing: '0.22em' }}>
 ● 23 RESEARCH PROJECTS · 12 INSTITUTIONS · 5 STATES & TERRITORIES
 </div>
 <h1 className="hero-h1-mobile-lg" style={{
 fontSize: 'clamp(48px, 7.8vw, 108px)', fontWeight: 800, lineHeight: 0.92,
 letterSpacing: '-0.035em', color: '#fff',
 margin: 0, maxWidth: 940, textWrap: 'pretty',
 }}>
 One&nbsp;family <span style={{ color: '#8E3B5E' }}>matters</span>.<br />
 A&nbsp;thousand <span style={{ textDecoration: 'underline', textDecorationColor: '#8E3B5E', textDecorationThickness: '4px', textUnderlineOffset: '8px' }}>change&nbsp;policy</span>.
 </h1>
 <p className="hero-sub-mobile" style={{ fontSize: 20, lineHeight: 1.5, marginTop: 32, maxWidth: 600, color: 'rgba(255,255,255,0.92)' }}>
 SCN2A Australia is the connecting node between Australian families, international peers, researchers, clinicians, and policymakers, for the entire developmental epileptic encephalopathy community.
 </p>
 <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
 <Button size="lg" variant="coral" onClick={() => navigate('involved')}>Join the network</Button>
 <Button size="lg" variant="outlineLight" onClick={() => navigate('change')}>See our advocacy work</Button>
 </div>
 </div>
 </section>
 );
}

// --- Constellation pathways: 3 audience nodes ----------------
function HomeCConstellation({ navigate }) {
 const items = [
 { tag: '01 / FAMILIES', title: 'Support & connection', body: 'Newly diagnosed, finding peers, navigating the system.', to: 'support', accent: '#8E3B5E' },
 { tag: '02 / RESEARCH', title: 'Partner on the science', body: 'Family advisory, registry, family-prioritised endpoints.', to: 'professionals', accent: '#0D1B2A' },
 { tag: '03 / POLICY', title: 'Submissions & change', body: 'Filed, footnoted, on the record, with international peers.', to: 'change', accent: '#0D1B2A' },
 ];
 return (
 <section style={{ background: '#fff', padding: '112px 0 96px', position: 'relative', overflow: 'hidden' }}>
 <div className="container" style={{ position: 'relative' }}>
 <div style={{ maxWidth: 720, marginBottom: 56 }}>
 <div className="eyebrow ledger-mono" style={{ color: '#6B6659' }}>03 / NODES</div>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(32px, 4vw, 52px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 0', lineHeight: 1.05, letterSpacing: '-0.02em' }}>
 Where you connect to the work.
 </h2>
 </div>
 <div style={{ position: 'relative' }}>
 {/* connecting lines (decorative) */}
 <svg viewBox="0 0 1200 220" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
 <g fill="none" stroke="#0D1B2A" strokeWidth="1" strokeDasharray="2 4" opacity="0.4">
 <path d="M 200 110 Q 400 30 600 110 T 1000 110" />
 <path d="M 200 110 Q 400 190 600 110 T 1000 110" />
 </g>
 <g fill="#0D1B2A">
 <circle cx="200" cy="110" r="5" />
 <circle cx="600" cy="110" r="5" />
 <circle cx="1000" cy="110" r="5" />
 </g>
 </svg>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, position: 'relative' }} className="stack-mobile">
 {items.map((it) => (
 <a key={it.title} href={'#' + it.to} onClick={(e)=>{e.preventDefault();navigate(it.to);}}
 className="card-hover"
 style={{
 background: '#fff', border: '1.5px solid #0D1B2A', padding: '32px 30px 28px',
 textDecoration: 'none', color: '#0D1B2A',
 display: 'flex', flexDirection: 'column', gap: 14, position: 'relative',
 }}>
 <div style={{ position: 'absolute', top: -10, left: 24, background: '#fff', padding: '0 10px' }}>
 <span className="ledger-mono" style={{ fontSize: 11, fontWeight: 700, color: it.accent, letterSpacing: '0.14em' }}>{it.tag}</span>
 </div>
 <h3 style={{ fontSize: 26, fontWeight: 700, color: '#0D1B2A', margin: '6px 0 0', lineHeight: 1.2, letterSpacing: '-0.01em' }}>{it.title}</h3>
 <p style={{ fontSize: 15.5, lineHeight: 1.6, color: '#6B6659', margin: 0 }}>{it.body}</p>
 <div style={{ marginTop: 12, fontSize: 14, fontWeight: 700, color: it.accent, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
 Continue <i data-lucide="arrow-right" style={{ width: 16, height: 16, color: '#0D1B2A', strokeWidth: 2 }} />
 </div>
 </a>
 ))}
 </div>
 </div>
 </div>
 </section>
 );
}

// --- Pillars: arranged like a pentagonal node graph ----------
function HomeCPillars() {
 const pillars = [
 { n: '01', t: 'Families as experts', b: 'Deep expertise born of lived experience. We name and honour it.' },
 { n: '02', t: 'Stories, scaled', b: 'One family\'s story matters. A thousand stories change policy.' },
 { n: '03', t: 'Sustained presence', b: 'The accumulated weight of being in the room, year after year.' },
 { n: '04', t: 'Australian peer, global', b: 'Not a chapter. A peer to SCN2A Europe, IBE.' },
 { n: '05', t: 'Evidence + experience', b: 'Both are legitimate knowledge. Strength lies in combining them.' },
 ];
 return (
 <section style={{ background: '#F7F4F0', padding: '96px 0', position: 'relative', overflow: 'hidden' }}>
 <NetworkMotif opacity={0.22} dense />
 <div className="container" style={{ position: 'relative' }}>
 <div style={{ maxWidth: 720, marginBottom: 56 }}>
 <div className="eyebrow ledger-mono">FIVE PILLARS</div>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(32px, 4vw, 50px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 0', lineHeight: 1.08, letterSpacing: '-0.02em' }}>
 What we stand on.
 </h2>
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, alignItems: 'stretch' }} className="stack-mobile-2">
 {pillars.map((p, i) => (
 <div key={p.n} style={{
 background: i === 2 ? '#0D1B2A' : '#fff',
 color: i === 2 ? '#fff' : '#0D1B2A',
 padding: '24px 22px 24px',
 border: i === 2 ? 'none' : '1px solid #D5CFBF',
 display: 'flex', flexDirection: 'column', gap: 10,
 minHeight: 220,
 }}>
 <div className="ledger-mono" style={{ fontSize: 12, fontWeight: 700, color: i === 2 ? '#E8E3DA' : '#0D1B2A', letterSpacing: '0.1em' }}>{p.n}</div>
 <h3 style={{ fontSize: 18, fontWeight: 700, margin: 0, lineHeight: 1.25, color: i === 2 ? '#fff' : '#0D1B2A' }}>{p.t}</h3>
 <p style={{ fontSize: 14, lineHeight: 1.55, color: i === 2 ? 'rgba(255,255,255,0.88)' : '#6B6659', margin: 0 }}>{p.b}</p>
 <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: i === 2 ? 'rgba(255,255,255,0.72)' : '#0D1B2A' }}>
 <span style={{ width: 4, height: 4, borderRadius: 0, background: i === 2 ? '#E8E3DA' : '#0D1B2A' }} />
 <span style={{ fontFamily: 'monospace', letterSpacing: '0.08em' }}>NODE {p.n}</span>
 </div>
 </div>
 ))}
 </div>
 </div>
 </section>
 );
}

// --- Asymmetric double-feature: about + featured story ------
function HomeCDouble({ navigate }) {
 return (
 <section style={{ background: '#fff', padding: '96px 0' }}>
 <div className="container">
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1.5px solid #0D1B2A' }} className="stack-mobile">
 <div style={{ padding: '56px 48px', borderRight: '1.5px solid #0D1B2A' }}>
 <div className="eyebrow ledger-mono">ORIGIN</div>
 <h3 style={{ fontSize: 'clamp(26px, 2.6vw, 34px)', fontWeight: 700, color: '#0D1B2A', lineHeight: 1.15, margin: '14px 0 18px', letterSpacing: '-0.01em' }}>
 SCN2A core. DEE leadership.
 </h3>
 <p style={{ fontSize: 17, lineHeight: 1.65, color: '#0D1B2A', margin: '0 0 16px' }}>
 Founded in 2019 as the peak Australian voice for families affected by SCN2A. We've since expanded our reach to serve the broader DEE community, KCNQ2, STXBP1, SCN8A and others, while keeping SCN2A as our specialist core.
 </p>
 <p style={{ fontSize: 17, lineHeight: 1.65, color: '#6B6659', margin: '0 0 24px' }}>
 We are not a service provider. We are a connector, a bridge between families and the researchers, clinicians, and policymakers who can create lasting change.
 </p>
 <Button variant="outline" onClick={() => navigate('about')}>Our story <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} /></Button>
 </div>
 <div style={{
 padding: '56px 48px',
 background: 'linear-gradient(135deg, #0D1B2A 0%, #0D1B2A 100%)',
 color: '#fff', position: 'relative', overflow: 'hidden',
 }}>
 <NetworkMotif opacity={0.20} stroke="#fff" />
 <div style={{ position: 'relative' }}>
 <div className="eyebrow ledger-mono" style={{ color: '#E8E3DA' }}>OUR FOUNDING VOICE</div>
 <blockquote style={{
 fontSize: 'clamp(22px, 2.4vw, 30px)', fontWeight: 500, lineHeight: 1.35,
 letterSpacing: '-0.005em', margin: '20px 0 28px',
 }}>
 "After a 14-year diagnostic odyssey, our son Will was diagnosed with SCN2A. <em style={{ color: '#E8E3DA' }}>This is what community-led advocacy looks like</em>, from a kitchen-table network to federal policy."
 </blockquote>
 <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
 <div style={{ width: 44, height: 44, borderRadius: 0, background: '#8E3B5E', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16 }}>KP</div>
 <div>
 <div style={{ fontWeight: 700 }}>Kris Pierce</div>
 <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)' }}>Founder & Director · mother of Will</div>
 </div>
 <Button size="sm" variant="outlineLight" onClick={() => navigate('about')}>Our story <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} /></Button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
 );
}

// --- Big numbers, as a star chart -----------------------------
function HomeCNumbers() {
 const items = [
 { fig: '23', unit: '', l: 'Research projects' },
 { fig: '$39', unit: 'M+', l: 'Funding influenced' },
 { fig: '12', unit: '+', l: 'Institutions' },
 { fig: '5', unit: '', l: 'States & territories' },
 ];
 return (
 <section style={{ background: '#1E3A6E', color: '#fff', padding: '112px 0', position: 'relative', overflow: 'hidden' }}>
 <NetworkMotif opacity={0.20} stroke="#E8E3DA" dense />
 <div className="container" style={{ position: 'relative' }}>
 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 16 }}>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(32px, 4.4vw, 56px)', fontWeight: 700, color: '#fff', margin: 0, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
 The work, by the numbers.
 </h2>
 <span className="ledger-mono" style={{ fontSize: 12, color: 'rgba(255,255,255,0.65)', letterSpacing: '0.1em' }}>● LIVE · MAY 2026</span>
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }} className="stack-mobile-2">
 {items.map((s, i) => (
 <div key={s.l} style={{
 padding: '28px 18px 24px',
 borderTop: '1px solid rgba(255,255,255,0.28)',
 borderRight: i < items.length - 1 ? '1px solid rgba(255,255,255,0.16)' : 'none',
 borderBottom: '1px solid rgba(255,255,255,0.28)',
 position: 'relative',
 }}>
 <div style={{ fontSize: 'clamp(48px, 5vw, 76px)', fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.03em' }}>
 {s.fig}<span style={{ color: '#8E3B5E', fontSize: 32 }}>{s.unit}</span>
 </div>
 <div style={{ marginTop: 14, fontSize: 13, color: 'rgba(255,255,255,0.78)', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>{s.l}</div>
 {/* tiny node */}
 <div style={{ position: 'absolute', top: -4, left: 18, width: 7, height: 7, borderRadius: 0, background: '#8E3B5E' }} />
 </div>
 ))}
 </div>
 </div>
 </section>
 );
}

// --- Recent activity (timeline / log feed) -------------------
function HomeCRecent({ navigate }) {
 const items = [
 ];
 return (
 <section style={{ background: '#fff', padding: '96px 0' }}>
 <div className="container">
 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', marginBottom: 32, gap: 16 }}>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.6vw, 44px)', fontWeight: 700, color: '#0D1B2A', margin: 0, letterSpacing: '-0.01em' }}>
 On the record.
 </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={{ borderTop: '1px solid #0D1B2A' }}>
 {items.map((it, i) => (
 <a key={i} href="#news" onClick={(e)=>{e.preventDefault();navigate('news');}}
 style={{
 display: 'grid', gridTemplateColumns: '160px 120px 1fr auto',
 alignItems: 'center', gap: 24,
 padding: '24px 0',
 borderBottom: '1px solid #D5CFBF',
 textDecoration: 'none', color: '#0D1B2A',
 transition: 'background 200ms',
 }}
 onMouseEnter={(e)=>{ e.currentTarget.style.background = '#F7F4F0'; e.currentTarget.style.paddingLeft = '16px'; e.currentTarget.style.paddingRight = '16px'; }}
 onMouseLeave={(e)=>{ e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '0'; e.currentTarget.style.paddingRight = '0'; }}
 className="stack-mobile">
 <span className="ledger-mono" style={{ fontSize: 13, color: '#6B6659' }}>{it.date}</span>
 <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
 <span style={{ width: 8, height: 8, borderRadius: 0, background: it.accent }} />
 <span className="ledger-mono" style={{ fontSize: 11, fontWeight: 700, color: it.accent, letterSpacing: '0.1em' }}>{it.tag}</span>
 </span>
 <div>
 <div style={{ fontSize: 18, 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: 20, height: 20, color: '#0D1B2A', strokeWidth: 2 }} />
 </a>
 ))}
 </div>
 </div>
 </section>
 );
}

// --- Final CTA: big coral block ------------------------------
function HomeCCTA({ navigate }) {
 return (
 <section style={{ background: '#1E3A6E', color: '#fff', padding: '96px 0', position: 'relative', overflow: 'hidden' }}>
 <NetworkMotif opacity={0.20} stroke="#E8E3DA" dense />
 <div className="container" style={{ position: 'relative' }}>
 <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'center' }} className="stack-mobile">
 <div>
 <div className="eyebrow ledger-mono" style={{ color: 'rgba(255,255,255,0.85)' }}>JOIN THE NODE</div>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(32px, 4.4vw, 56px)', fontWeight: 700, lineHeight: 1.08, color: '#fff', margin: '14px 0 18px', letterSpacing: '-0.02em' }}>
 Connect with the families who already know.
 </h2>
 <p style={{ fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.95)', margin: 0, maxWidth: 580 }}>
 Opt-in. Moderated. Free. Register on the Connect map and a team member will email you within five working days.
 </p>
 </div>
 <div style={{ justifySelf: 'end' }}>
 <Button size="lg" variant="onTeal" onClick={() => navigate('involved')}>Register on the Connect map <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} /></Button>
 </div>
 </div>
 </div>
 </section>
 );
}

Object.assign(window, { HomeC });