// ============================================================
// Direction N, "Neural Ink" (Brand v2.0)
// Navy is the anchor (hero, evidence band, footer via shared
// chrome); Warm White is the dominant canvas. Light -> dark ->
// light rhythm. Strict mulberry: one content accent per view.
// Cobalt for micro-details only. Plus Jakarta Sans throughout.
// Palette: navy #0D1B2A · canvas #F7F4F0 · slate #1B2838 ·
// sandstone #E8E3DA · stone #B8B2A8 · muted #6B6659 ·
// cream #D5CFBF · mulberry #8E3B5E · cobalt #4A7EC7
// ============================================================

function HomeNeural({ navigate }) {
  return (
    <div className="dir-n" data-screen-label="Home, N (Neural Ink v2.0)">
      <NeuralHero navigate={navigate} />
      <NeuralMission navigate={navigate} />
      <NeuralStatBand />
      <NeuralPathways navigate={navigate} />
      <NeuralEvidence navigate={navigate} />
      <NeuralAcknowledgement />
    </div>
  );
}

// --- Hero: bold NAVY-BLUE, photo-led. Striking, navy-led, consistent
//     with the navy used across all pages. Mulberry = headline mark. ---
function NeuralHero({ navigate }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', isolation: 'isolate', background: '#1E3A6E' }}>
      <img src={PHOTO.homeHero} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0, filter: 'saturate(0.95)' }} />
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(100deg, rgba(30,58,110,0.94) 0%, rgba(30,58,110,0.82) 46%, rgba(30,58,110,0.48) 100%)' }} />
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: '#8E3B5E', zIndex: 2 }} />
      <div className="container" style={{ position: 'relative', zIndex: 2, padding: '104px 32px 84px', color: '#fff' }}>
        <div className="eyebrow" style={{ color: '#D8C2CD', marginBottom: 16 }}>SCN2A Australia · est. 2019</div>
        <h1 className="hero-h1-mobile-lg" style={{ fontSize: 'clamp(38px, 5.2vw, 56px)', fontWeight: 800, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, maxWidth: 880, color: '#fff', textWrap: 'pretty' }}>
          Founded by families,<br />
          <span style={{ borderBottom: '4px solid #8E3B5E', paddingBottom: 2 }}>driven by evidence.</span>
        </h1>
        <p className="hero-sub-mobile" style={{ fontSize: 20, lineHeight: 1.5, marginTop: 24, maxWidth: 660, color: 'rgba(255,255,255,0.92)' }}>
          We connect the SCN2A community, advance the research, and carry its voice into the decisions that shape care. Born from lived experience, grounded in science.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
          <button onClick={() => navigate('newly-diagnosed')} style={ctaLight}>Newly diagnosed? Start here</button>
          <button onClick={() => navigate('understand')} style={ctaOutlineLight}>Understand SCN2A &amp; DEE</button>
        </div>
      </div>
    </section>
  );
}

// --- Mission (light canvas). Mulberry = pull-quote border. ---
function NeuralMission({ navigate }) {
  return (
    <section style={{ background: '#F7F4F0', padding: '88px 0' }}>
      <div className="container">
        <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.6vw, 36px)', fontWeight: 700, color: '#0D1B2A', margin: '0 0 20px', lineHeight: 1.18, letterSpacing: '-0.01em', maxWidth: 780, textWrap: 'pretty' }}>
          We connect families, researchers and the systems that shape their care.
        </h2>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: '#0D1B2A', margin: 0, maxWidth: '66ch' }}>
          SCN2A Australia began as a support network for families navigating SCN2A-related disorders, one of the genetic causes of developmental and epileptic encephalopathy. Through that work we built deep expertise in diagnosis, research, advocacy and the systems families have to navigate.
        </p>
        <blockquote style={{ borderLeft: '3px solid #8E3B5E', margin: '28px 0 0', padding: '4px 0 4px 22px', fontSize: 20, fontStyle: 'italic', fontWeight: 500, color: '#0D1B2A', maxWidth: 640 }}>
          From a kitchen-table conversation to Senate submissions: community-led advocacy, in action.
        </blockquote>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 28 }}>
          <button onClick={() => navigate('about')} style={ctaNavy}>Read our story</button>
          <button onClick={() => navigate('change')} style={ctaOutlineNavy}>How we drive change</button>
        </div>
      </div>
    </section>
  );
}

// --- Stat band (sandstone + cobalt top rule). No mulberry. ---
function NeuralStatBand() {
  const stats = [
    { fig: '23', lab: 'Research projects', sub: 'SCN2A-led, DEE-wide' },
    { fig: '$39M+', lab: 'Funding influenced', sub: 'across the partner network' },
    { fig: '12+', lab: 'Partner institutions', sub: 'Australia & international' },
    { fig: '5', lab: 'States & territories', sub: 'national reach' },
  ];
  return (
    <section style={{ background: '#E8E3DA', borderTop: '2px solid #4A7EC7', padding: '72px 0' }}>
      <div className="container">
        <div className="eyebrow" style={{ color: '#6B6659' }}>Our impact to date</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28, marginTop: 32 }} className="stack-mobile-2">
          {stats.map((s) => (
            <div key={s.lab}>
              <div style={{ fontSize: 52, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1, color: '#0D1B2A' }}>{s.fig}</div>
              <div style={{ marginTop: 10, fontWeight: 700, color: '#0D1B2A' }}>{s.lab}</div>
              <div style={{ marginTop: 4, fontSize: 13, color: '#6B6659' }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Pathways (light). Cobalt 'New' tag; one mulberry key link. ---
function NeuralPathways({ navigate }) {
  const cards = [
    { t: 'For families & carers', b: 'Newly diagnosed or navigating DEE daily: find information, connect with others, and access our guides.', cta: 'Family support', to: 'support', feat: false },
    { t: 'Use our navigation tool', b: 'A plain-English, clinician-reviewed guide that opens into clear pathways. Start wherever your questions are.', cta: 'Start the tool', to: 'navigator', feat: true },
    { t: 'For clinicians & researchers', b: 'Partner with us, access our registry, and connect with the families shaping research priorities.', cta: 'Professional pathways', to: 'professionals', feat: false },
  ];
  return (
    <section style={{ background: '#F7F4F0', padding: '88px 0' }}>
      <div className="container">
        <h2 className="h2-mobile" style={{ fontSize: 'clamp(26px, 3.2vw, 34px)', fontWeight: 700, color: '#0D1B2A', margin: '0 0 0', lineHeight: 1.18, letterSpacing: '-0.01em' }}>
          Different doorways into the same work.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 40 }} className="stack-mobile">
          {cards.map((c) => (
            <a key={c.t} href={hrefFor(c.to)} onClick={(e) => { e.preventDefault(); navigate(c.to); }} className="card-hover"
              style={{ background: c.feat ? '#0D1B2A' : '#fff', border: c.feat ? '1px solid #0D1B2A' : '1px solid #D5CFBF', borderTop: '3px solid #4A7EC7', borderRadius: 5, padding: '26px 24px 28px', textDecoration: 'none', color: c.feat ? '#fff' : '#0D1B2A', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.feat && <span style={{ alignSelf: 'flex-start', fontSize: 11, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 3, background: '#4A7EC7', color: '#fff' }}>New</span>}
              <h3 style={{ fontSize: 19, fontWeight: 700, margin: 0, lineHeight: 1.25 }}>{c.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: c.feat ? 'rgba(255,255,255,0.82)' : '#6B6659', margin: 0 }}>{c.b}</p>
              <div style={{ marginTop: 'auto', paddingTop: 8, fontSize: 14, fontWeight: 700, color: c.feat ? '#fff' : '#0D1B2A' }}>
                {c.cta} <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Evidence band (the single dark punctuation). Cobalt rules. ---
function NeuralEvidence({ navigate }) {
  return (
    <section style={{ background: '#1E3A6E', color: '#fff', padding: '88px 0' }}>
      <div className="container">
        <div className="eyebrow" style={{ color: '#D8C2CD' }}>And then we built the evidence</div>
        <h2 className="h2-mobile" style={{ fontSize: 'clamp(26px, 3.2vw, 34px)', fontWeight: 700, color: '#fff', margin: '14px 0 0', lineHeight: 1.18, letterSpacing: '-0.01em', maxWidth: 720, textWrap: 'pretty' }}>
          Community-led advocacy, grounded in lived experience and evidence.
        </h2>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'rgba(255,255,255,0.88)', margin: '18px 0 0', maxWidth: '60ch' }}>
          Those numbers didn't come first — they grew from families organising, partnering with researchers, and carrying the community's voice into the decisions that shape care.
        </p>
        <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button onClick={() => navigate('change')} style={ctaLight}>Read our advocacy work</button>
          <button onClick={() => navigate('research')} style={ctaOutlineLight}>For researchers</button>
        </div>
      </div>
    </section>
  );
}

function NeuralAcknowledgement() {
  return (
    <section style={{ background: '#E8E3DA', color: '#0D1B2A', padding: '40px 0' }}>
      <div className="container" style={{ maxWidth: 900, textAlign: 'center' }}>
        <div className="eyebrow" style={{ color: '#6B6659', marginBottom: 12 }}>Acknowledgement of Country</div>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: '#0D1B2A', margin: 0 }}>
          SCN2A Australia acknowledges the Kabi Kabi peoples and the Jinibara peoples, the Traditional Custodians of the lands and waters we all now share, and pays respect to Elders past and present.
        </p>
      </div>
    </section>
  );
}

// --- shared inline button styles (Neural Ink) ---
const ctaBase = { fontFamily: "'Plus Jakarta Sans','Inter',sans-serif", fontWeight: 600, fontSize: 15, padding: '12px 22px', borderRadius: 5, border: 0, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8, lineHeight: 1, textDecoration: 'none' };
const ctaLight = { ...ctaBase, background: '#F7F4F0', color: '#0D1B2A' };
const ctaOutlineLight = { ...ctaBase, background: 'transparent', color: '#fff', border: '1.5px solid rgba(255,255,255,0.55)' };
const ctaNavy = { ...ctaBase, background: '#1E3A6E', color: '#fff' };
const ctaOutlineNavy = { ...ctaBase, background: 'transparent', color: '#0D1B2A', border: '1.5px solid #0D1B2A' };

Object.assign(window, { HomeNeural });