// Vertical "journey" timeline for the About page.
// Single rail down the left; year + node on the spine, content to the right.
// Data carried over from the SCN2A Australia Milestones graphic (June 2026).

const MILESTONES_TL = [
  { year: 'Pre-2017', through: null, track: 'context', tag: 'Foundations',
    title: 'A disorder comes into focus',
    summary: 'SCN2A is recognised internationally as a distinct disorder, and the first Australian families begin to find each other.',
    points: [
      'SCN2A increasingly recognised internationally as a distinct neurodevelopmental and epilepsy disorder, spanning gain- and loss-of-function presentations.',
      'Australian families begin connecting with international SCN2A communities and researchers.',
      'Expanding access to genomic sequencing drives a rise in confirmed Australian diagnoses.',
    ] },
  { year: '2017', through: null, track: 'org', tag: 'Community', defining: true,
    title: 'Genetic Epilepsy Team Australia (GETA) founded',
    summary: 'The first Australian community infrastructure SCN2A families could turn to, parent-led, and built to last.',
    points: [
      'First Family Conference on Rare Genetic Epilepsy held in Melbourne, 27 May 2017.',
      'Auspiced through the Epilepsy Foundation; convenes an annual conference of families, clinicians and researchers.',
      'Supports Australian research including stem-cell studies, mouse models and biotechnology. GETA turns 10 in 2027.',
    ] },
  { year: '2017', through: '2019', track: 'research', tag: 'Research', defining: true,
    title: 'The Florey SCN2A research program',
    summary: 'At the Florey Institute, Steven Petrou’s Ion Channels and Human Diseases Group builds the Australian centrepiece of SCN2A translational research.',
    points: [
      'Functional testing platforms for SCN2A variants; gain- versus loss-of-function classification.',
      'SCN2A knock-in mouse models and early antisense oligonucleotide (ASO) therapeutic programs.',
      'Natural-history and phenotype-correlation studies, the engine of Australia’s contribution to SCN2A precision medicine.',
    ] },
  { year: '2019', through: null, track: 'org', tag: 'Community', defining: true,
    title: 'SCN2A Australia founded, and building momentum',
    summary: 'Launched on Australia Day 2019 with a mission to “Work Locally, Connect Globally”, the organisation moves fast to link families to research.',
    points: [
      '26 January 2019, Organisation founded on Australia Day.',
      'Jan–Feb 2019, First research partnership established with the Florey team led by Prof. Steven Petrou.',
      'February 2019, Began promoting the SCN2A International Natural History Study, connecting Australian families to the global effort.',
      'November 2019, SCN2A Insights podcast launched (Kris Pierce and David Cunnington), plus the first webinar, “Developing Treatment for SCN2A”.',
    ] },
  { year: '2020', through: '2021', track: 'org', tag: 'Community',
    title: 'Community, advocacy and research infrastructure',
    summary: 'SCN2A Australia builds the scaffolding of a national community, campaigns, conferences and a research registry.',
    points: [
      '2020, Joined a growing international network of SCN2A organisations across Australia, Argentina, the UK, the US and beyond.',
      'February 2021, First SCN2A Awareness Day campaign, partnering with Oxford PharmaGenesis to share family stories.',
      'May 2021, Inaugural SCN2A Australia Conference.',
      'July 2021, Research pages and a research registry launched, expanding community engagement.',
    ] },
  { year: '2021', through: null, track: 'research', tag: 'Research', defining: true,
    title: 'Preclinical proof of concept',
    summary: 'Florey researchers establish the scientific case for taking SCN2A ASO therapy toward the clinic.',
    points: [
      'Melody Li, with Steven Petrou, published landmark preclinical work in the Journal of Clinical Investigation (2021).',
      'An antisense oligonucleotide targeting Scn2a reduced seizures and extended lifespan in a gain-of-function SCN2A epilepsy mouse model.',
    ] },
  { year: '2023', through: '2025', track: 'research', tag: 'Treatment', defining: true,
    title: 'Clinical translation begins',
    summary: 'Elsunersen becomes the first SCN2A-targeted ASO to reach patients, with direct Australian scientific involvement.',
    points: [
      'Elsunersen (formerly PRAX-222, Praxis Precision Medicines) selectively reduces SCN2A expression to address gain-of-function SCN2A-DEE.',
      'Holds FDA Orphan Drug and Rare Pediatric Disease designations, and EMA Orphan Drug designation.',
      '2025, Florey researchers (Steven Petrou, Géza Berecki) co-author a Nature Medicine report on Elsunersen in a preterm infant: intrathecal ASO dosing was associated with cessation of status epilepticus and a sustained reduction of more than 60% in seizure frequency.',
    ] },
  { year: '2024', through: null, track: 'org', tag: 'Community',
    title: 'Strategy and international recognition',
    summary: 'SCN2A Australia sets its formal direction as SCN2A is woven into global genomic-medicine pathways.',
    points: [
      'October 2024, First formal Strategic Plan published, setting out vision, mission and goals.',
      'Internationally, SCN2A is increasingly incorporated within rare-disease and genomic-medicine pathways, including NHS England.',
    ] },
  { year: '2025', through: null, track: 'org', tag: 'Community',
    title: 'Treatment-readiness resources and an accelerated pathway',
    summary: 'New family resources land just as the regulatory pathway for the first SCN2A therapy accelerates.',
    points: [
      'January 2025, Online shop launched as a community resource and fundraising channel.',
      'February 2025, Clinical Trials Information Hub created to help families understand treatment development, regulations and eligibility.',
      'December 2025, Praxis announced FDA alignment on a simplified, accelerated registrational pathway for Elsunersen, converting EMBRAVE3 to a single-arm design so every enrolled child receives active treatment. Topline results expected 2026; potential NDA in 2027.',
    ] },
  { year: '2026', through: null, track: 'policy', tag: 'Funding & policy',
    title: 'Funding research and shaping policy',
    summary: 'SCN2A Australia funds its first research project and brings its lived-experience authority to the national DEE conversation.',
    points: [
      'February 2026, Funded its first research project: a PhD studentship at the Florey Institute, under the supervision of Assoc Prof Maljevic.',
      'April 2026, Joined a global convening with the International Bureau of Epilepsy (IBE), bringing rare-epilepsy experts together to prioritise what we can achieve together.',
      'May 2026, Led a developmental and epileptic encephalopathy (DEE) multi-stakeholder roundtable, bringing the sector together to build a cohesive plan forward.',
      'May 2026, Lodged a formal submission to the Australian Senate inquiry into Epilepsy, advocating for a dedicated DEE policy framework.',
    ] },
];

const HORIZON_TL = [
  { range: '2026–2027', points: [
    'EMBRAVE3 topline results; further ASO clinical data.',
    'Biomarker-validation studies and expanded natural-history datasets.',
    'Outcomes from the Senate epilepsy inquiry and progress toward a dedicated DEE policy framework.',
  ] },
  { range: '2027–2028', points: [
    'Possible first efficacy signals translating to regulatory decisions; potential first SCN2A-specific regulatory submission.',
    'GETA’s 10-year milestone (2027); deeper integration of patient-generated data into trials.',
  ] },
  { range: '2028–2030', points: [
    'Possible approval pathway for a first SCN2A-specific therapy.',
    'Expansion of newborn genomic-screening discussions.',
    'Integration of gene and precision therapies into clinical practice if efficacy and safety are demonstrated.',
  ] },
];

const TL_TRACKS = {
  org:      { label: 'Community & advocacy', color: '#0D1B2A', tint: '#E8E3DA' },
  research: { label: 'Research & treatment', color: '#0D1B2A', tint: '#EEF2F5' },
  policy:   { label: 'Policy & advocacy',   color: '#7A3650', tint: '#F1E4EA' },
  context:  { label: 'Foundations',         color: '#6B6659', tint: '#EEF2F5' },
};

function MilestonesTimeline() {
  // Left spine sits at this offset from the section's left edge (desktop).
  const RAIL = 150;       // px, width of the year column
  const DOT = 17;         // px, node diameter

  return (
    <section style={{ background: '#F7F4F0', padding: '88px 0' }}>
      <style>{`
        @media (max-width: 760px) {
          .tl-list .tl-row { grid-template-columns: 1fr !important; column-gap: 0 !important; padding-left: 26px; }
          .tl-list .tl-spine { left: 6px !important; }
          .tl-list .tl-node { left: 6px !important; }
          .tl-list .tl-year { text-align: left !important; padding-right: 0 !important; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
          .tl-list .tl-year > div, .tl-list .tl-year > span { margin-top: 0 !important; }
          .tl-horizon-grid { grid-template-columns: 1fr !important; row-gap: 22px; }
          .tl-horizon-grid > div:first-child { text-align: left !important; padding-right: 0 !important; }
        }
      `}</style>
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 760 }}>
          <div className="eyebrow">Our journey</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' }}>
            A decade of momentum.
          </h2>
          <hr className="rule-teal" />
          <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, color: '#6B6659', margin: '22px 0 0', maxWidth: 640 }}>
            From the first families connecting, to a research-enabled ecosystem supporting registries, clinical trials, and precision therapies. Working locally, connecting globally.
          </p>
        </div>

        {/* Timeline, single rail down the left */}
        <ol className="tl-list" style={{ listStyle: 'none', margin: 0, padding: 0, position: 'relative' }}>
          {/* continuous spine */}
          <span className="tl-spine" aria-hidden="true" style={{ position: 'absolute', top: 10, bottom: 10, left: RAIL, width: 2, background: '#CBD8DE' }} />

          {MILESTONES_TL.map((m, i) => {
            const tr = TL_TRACKS[m.track] || TL_TRACKS.org;
            return (
              <li key={i} className="tl-row" style={{ position: 'relative', display: 'grid', gridTemplateColumns: `${RAIL}px 1fr`, columnGap: 40, paddingBottom: i === MILESTONES_TL.length - 1 ? 0 : 36 }}>
                {/* Year column (right-aligned toward the spine) */}
                <div className="tl-year" style={{ textAlign: 'right', paddingRight: 26, paddingTop: 2 }}>
                  <div className="ledger-mono" style={{ fontSize: m.year.length > 4 ? 22 : 34, fontWeight: 800, color: tr.color, lineHeight: 1, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>{m.year}</div>
                  {m.through && <div style={{ fontSize: 12, fontWeight: 600, color: '#6B6659', marginTop: 6 }}>through {m.through}</div>}
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 12, fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: tr.color, justifyContent: 'flex-end' }}>
                    <i style={{ width: 7, height: 7, background: tr.color, display: 'inline-block', flex: '0 0 auto' }} />{m.tag}
                  </span>
                </div>

                {/* Node on the spine */}
                <span className="tl-node" aria-hidden="true" style={{ position: 'absolute', left: RAIL, top: 4, width: DOT, height: DOT, marginLeft: -(DOT / 2) + 1, borderRadius: '50%', background: '#fff', border: `3px solid ${tr.color}`, boxShadow: m.defining ? `0 0 0 4px ${tr.tint}` : 'none', zIndex: 1 }} />

                {/* Content */}
                <div className="tl-body" style={{ background: '#fff', border: '1px solid #D5CFBF', borderLeft: `3px solid ${tr.color}`, padding: '22px 26px 20px' }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
                    <h3 style={{ fontSize: 'clamp(19px, 2.2vw, 23px)', fontWeight: 700, color: '#0D1B2A', margin: 0, lineHeight: 1.22, letterSpacing: '-0.01em' }}>{m.title}</h3>
                    {m.defining && <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: tr.color, borderTop: `2px solid ${tr.color}`, paddingTop: 4 }}>Defining milestone</span>}
                  </div>
                  <p style={{ fontSize: 15.5, lineHeight: 1.58, color: '#6B6659', margin: '12px 0 16px' }}>{m.summary}</p>
                  <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                    {m.points.map((p, j) => (
                      <li key={j} style={{ display: 'flex', gap: 11 }}>
                        <i style={{ flex: '0 0 auto', width: 6, height: 6, marginTop: 8, background: tr.color }} />
                        <span style={{ fontSize: 14, lineHeight: 1.55, color: '#0D1B2A' }}>{p}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </li>
            );
          })}
        </ol>

        {/* Looking ahead */}
        <div style={{ marginTop: 40, background: '#E8E3DA', padding: 'clamp(28px, 3.5vw, 40px)', position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr', columnGap: 40 }} className="tl-horizon-grid">
            <div style={{ textAlign: 'right', paddingRight: 26 }}>
              <div className="eyebrow" style={{ color: '#0D1B2A' }}>Looking ahead</div>
              <div className="ledger-mono" style={{ fontSize: 30, fontWeight: 800, color: '#0D1B2A', lineHeight: 1, marginTop: 8, letterSpacing: '-0.02em' }}>2026–30</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }} className="stack-mobile-2">
              {HORIZON_TL.map((h, i) => (
                <div key={i} style={{ background: '#fff', border: '1px solid #D5CFBF', borderTop: '3px dashed #0D1B2A', padding: '18px 20px 16px' }}>
                  <h4 className="ledger-mono" style={{ margin: '0 0 12px', fontSize: 15.5, fontWeight: 700, color: '#0D1B2A' }}>{h.range}</h4>
                  <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {h.points.map((p, j) => (
                      <li key={j} style={{ display: 'flex', gap: 10 }}>
                        <i style={{ flex: '0 0 auto', width: 6, height: 6, marginTop: 7, background: '#1E3A6E' }} />
                        <span style={{ fontSize: 13.5, lineHeight: 1.5, color: '#0D1B2A' }}>{p}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MilestonesTimeline });