// Walk Around Australia for SCN2A — September 2026 campaign landing page.
// Virtual walking challenge: community logs km from anywhere, collectively
// walking a named coastline leg. Registration and fundraising via Funraisin.
// This page is the marketing front door; Funraisin handles the engine.

// ── Configuration ──────────────────────────────────────────────────────
// Update these as campaign decisions are finalised.
const WALK_CTA_URL = '#'; // ← Replace with Funraisin registration URL (e.g. walk.scn2aaustralia.org)
const WALK_CAMPAIGN = {
  period: '1–30 September 2026',
  launchDate: 'July 2026',
  distanceGoal: '5,000',
  distanceGoalLabel: 'Perth to Broome',
  dollarGoal: '$20,000',
  dollarStretch: '$30,000',
  participantGoal: '100',
};

// Placeholder live counters — wire to Funraisin API or update manually.
const WALK_LIVE = {
  participants: 0,
  kmLogged: 0,
  raised: 0,
  launched: false, // flip to true once registration opens to show counters
};

const WALK_INCENTIVES = [
  {
    icon: 'award',
    label: 'Raise $75+',
    reward: 'Receive an SCN2A Walk item — shirt, cap, or bear — courtesy of our sponsors.',
  },
  {
    icon: 'users',
    label: 'Top team',
    reward: 'The highest-raising team wins free registration for every member in 2027 (max 10).',
  },
  {
    icon: 'gamepad-2',
    label: 'Kids\' draw',
    reward: 'For every $15 a young participant raises, they earn an entry into the prize draw.',
  },
  {
    icon: 'map-pin-check',
    label: 'Distance badges',
    reward: 'Earn a badge every time the community total reaches the next town on the coast.',
  },
];

function WalkEventPage({ navigate }) {

  const goFunraisin = () => {
    if (WALK_CTA_URL && WALK_CTA_URL !== '#') {
      window.open(WALK_CTA_URL, '_blank', 'noopener');
    } else {
      const el = document.getElementById('walk-how');
      if (el) el.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div data-screen-label="Walk Around Australia — September 2026">

      {/* ── HERO ── */}
      <section style={{
        background: '#1E3A6E', color: '#fff', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: '#8E3B5E', zIndex: 2 }} />
        <NetworkMotif opacity={0.14} stroke="#fff" dense />

        <div className="container" style={{ position: 'relative', zIndex: 2, padding: '88px 32px 56px', textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: '#D8C2CD', marginBottom: 14 }}>
            Get Involved · {WALK_CAMPAIGN.period}
          </div>

          <h1 className="hero-h1-mobile-lg" style={{
            fontSize: 'clamp(42px, 7vw, 80px)', fontWeight: 800, lineHeight: 0.95,
            letterSpacing: '-0.02em', color: '#fff', margin: '0 auto',
            textTransform: 'uppercase', maxWidth: 900,
          }}>
            Walk, Run
          </h1>

          {/* Feature photo — organic blob crop (Fun Fest inspired) */}
          <div style={{
            width: 'min(580px, 88%)', margin: '28px auto', aspectRatio: '1.4 / 1',
            borderRadius: '62% 38% 55% 45% / 55% 48% 52% 45%',
            overflow: 'hidden', border: '6px solid rgba(255,255,255,0.25)',
            boxShadow: '0 12px 40px rgba(30,58,110,0.35)',
          }}>
            <img
              src={PHOTO.familiesCarers || 'assets/photography/families-carers-selfie.jpg'}
              alt="SCN2A families walking together"
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            />
          </div>

          <h1 className="hero-h1-mobile-lg" style={{
            fontSize: 'clamp(42px, 7vw, 80px)', fontWeight: 800, lineHeight: 0.95,
            letterSpacing: '-0.02em', color: '#fff', margin: '0 auto 20px',
            textTransform: 'uppercase',
          }}>
            Push or Roll
          </h1>

          <p className="hero-sub-mobile" style={{
            fontSize: 20, lineHeight: 1.55, margin: '0 auto 28px', maxWidth: 640,
            color: 'rgba(255,255,255,0.92)',
          }}>
            This September, the SCN2A Australia community is walking around Australia together.
            Log your kilometres from anywhere, move the map, and raise funds for research
            and the families navigating SCN2A.
          </p>

          {/* Single primary CTA — "Walk with us" */}
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button size="lg" variant="mulberry" onClick={goFunraisin}>
              Walk with us <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} />
            </Button>
            <Button size="lg" variant="outlineLight" onClick={() => navigate('walk')}>
              See the map
            </Button>
          </div>

          {/* Ledger metadata */}
          <div className="ledger-mono" style={{
            marginTop: 36, paddingTop: 18,
            borderTop: '1px dashed rgba(255,255,255,0.35)',
            display: 'flex', gap: 32, flexWrap: 'wrap', justifyContent: 'center',
            fontSize: 12, color: 'rgba(255,255,255,0.75)', letterSpacing: '0.08em',
          }}>
            <span>{WALK_CAMPAIGN.period.toUpperCase()}</span>
            <span>LOG KM FROM ANYWHERE IN AUSTRALIA</span>
            <span>WALK · RUN · PUSH · ROLL · EVERY DISTANCE COUNTS</span>
          </div>
        </div>
      </section>

      <Breadcrumbs items={[
        { label: 'Get Involved', to: 'involved' },
        { label: 'Walk Around Australia', to: 'walk' },
        { label: 'September Challenge' },
      ]} navigate={navigate} />

      {/* ── LIVE COUNTERS (shown once campaign is live) ── */}
      {WALK_LIVE.launched && (
        <section style={{ background: '#E8E3DA', padding: '48px 0' }}>
          <div className="container">
            <div style={{
              display: 'flex', gap: 48, justifyContent: 'center', flexWrap: 'wrap',
              textAlign: 'center',
            }}>
              {[
                { value: WALK_LIVE.participants.toLocaleString(), label: 'Walkers registered' },
                { value: WALK_LIVE.kmLogged.toLocaleString() + ' km', label: 'Kilometres logged' },
                { value: '$' + WALK_LIVE.raised.toLocaleString(), label: 'Raised so far' },
              ].map((s, i) => (
                <div key={i}>
                  <div className="ledger-mono" style={{
                    fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 800,
                    color: '#1E3A6E', lineHeight: 1,
                  }}>
                    {s.value}
                  </div>
                  <div style={{
                    fontSize: 12, fontWeight: 700, letterSpacing: '0.1em',
                    textTransform: 'uppercase', color: '#6B6659', marginTop: 10,
                  }}>
                    {s.label}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ── THE HUMAN ANCHOR — a family story ── */}
      <section style={{ background: '#F7F4F0', padding: '80px 0' }}>
        <div className="container">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48, alignItems: 'center',
          }} className="stack-mobile">
            {/* Photo */}
            <div style={{
              borderRadius: 5, overflow: 'hidden',
              border: '1px solid #D5CFBF',
            }}>
              <img
                src={PHOTO.familyStory || 'assets/photography/family-story-portrait.jpg'}
                alt="An SCN2A family"
                style={{ width: '100%', height: 'auto', display: 'block' }}
              />
            </div>
            {/* Story */}
            <div style={{ maxWidth: 560 }}>
              <div className="eyebrow" style={{ color: '#8E3B5E' }}>Why we walk</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',
              }}>
                Every kilometre is for a child like ours.
              </h2>
              <hr className="rule-coral" />
              <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.7, color: '#0D1B2A' }}>
                {/* Replace with a real family story once consent is confirmed. */}
                "When our daughter was diagnosed with an SCN2A-related disorder, we felt completely
                alone. Finding this community changed everything. Walking together is our way of
                saying: no family should navigate this without support, and no child should wait
                for research that could change their life."
              </p>
              <p style={{ marginTop: 10, fontSize: 15, fontWeight: 700, color: '#6B6659', fontStyle: 'italic' }}>
                {/* Replace with real name */}
                — An SCN2A family
              </p>
              <div style={{ marginTop: 24 }}>
                <Button size="md" variant="mulberry" onClick={goFunraisin}>
                  Walk with us <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── THE CHALLENGE — distance + dollar goals ── */}
      <section style={{ background: '#E8E3DA', padding: '72px 0' }}>
        <div className="container">
          <div style={{ maxWidth: 760, marginBottom: 40 }}>
            <div className="eyebrow" style={{ color: '#0D1B2A' }}>The September challenge</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',
            }}>
              Walk {WALK_CAMPAIGN.distanceGoalLabel} together.
            </h2>
            <hr className="rule-coral" />
            <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.7, color: '#0D1B2A', maxWidth: 620 }}>
              Our September goal is {WALK_CAMPAIGN.distanceGoal} km along the Australian coastline
              — the first leg from {WALK_CAMPAIGN.distanceGoalLabel}. Every kilometre you
              walk, run, push, or roll adds to the community total and moves our mascot further
              along the coast.
            </p>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
          }} className="stack-mobile-2">
            {[
              {
                stat: WALK_CAMPAIGN.distanceGoal,
                unit: 'kilometre goal',
                body: WALK_CAMPAIGN.distanceGoalLabel + ' — the first named leg of the coastline. Beat it and we push for the next town.',
              },
              {
                stat: WALK_CAMPAIGN.dollarGoal,
                unit: 'Fundraising goal',
                body: 'With a stretch target of ' + WALK_CAMPAIGN.dollarStretch + '. Every dollar stays in Australia for research and family programs.',
              },
              {
                stat: '100%',
                unit: 'Your way',
                body: 'Walk, run, push a pram, roll a wheelchair, or hit the treadmill. Log it from anywhere in the country. Every distance counts.',
              },
            ].map((c, i) => (
              <div key={i} style={{
                background: '#fff', border: '1px solid #D5CFBF', borderRadius: 5,
                padding: '26px 24px',
              }}>
                <div className="ledger-mono" style={{
                  fontSize: 34, fontWeight: 800, color: '#1E3A6E', lineHeight: 1,
                }}>
                  {c.stat}
                </div>
                <div style={{
                  fontSize: 13, fontWeight: 700, letterSpacing: '0.04em',
                  textTransform: 'uppercase', color: '#6B6659', marginTop: 8,
                }}>
                  {c.unit}
                </div>
                <p style={{
                  fontSize: 15, lineHeight: 1.6, color: '#0D1B2A', margin: '12px 0 0',
                }}>
                  {c.body}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <div id="walk-how">
        <SubsectionGrid
          eyebrow="How it works"
          title="Three steps to walk for SCN2A."
          body="Register on Funraisin, log your kilometres, and watch the map move."
          items={[
            {
              icon: 'user-plus',
              title: 'Register and set a goal',
              body: 'Sign up as an individual or start a team. Set a personal distance and fundraising target, and share your page with supporters.',
              cta: 'Walk with us',
              coral: true,
            },
            {
              icon: 'footprints',
              title: 'Log every kilometre',
              body: 'Connect Strava, Fitbit, Garmin, or MapMyFitness to sync automatically — or log manually. Walk, run, push, or roll. It all counts.',
              cta: 'How tracking works',
              coral: true,
            },
            {
              icon: 'map',
              title: 'Move the map',
              body: 'Every kilometre carries the community further along the coast. Watch the mascot pass each town and earn distance badges along the way.',
              cta: 'See the map',
              coral: true,
            },
          ]}
          navigate={navigate}
          accent="coral"
        />
      </div>

      {/* ── SPONSOR PER KILOMETRE ── */}
      <section style={{ background: '#F7F4F0', padding: '72px 0' }}>
        <div className="container">
          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'start',
          }} className="stack-mobile">
            <div style={{ maxWidth: 560 }}>
              <div className="eyebrow" style={{ color: '#0D1B2A' }}>Sponsor a walker</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',
              }}>
                Back every step, upfront.
              </h2>
              <hr className="rule-coral" />
              <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.7, color: '#0D1B2A' }}>
                Pick a walker, choose a rate per kilometre, and donate the total now. No pledges
                to chase, no invoices after September. Your donation is receipted instantly and
                100% tax deductible.
              </p>
              <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.65, color: '#6B6659' }}>
                If your walker sets a 100 km goal, sponsoring at $2/km means a $200 donation today.
                When they beat their goal, you get a good-news story, not a bill.
              </p>
            </div>

            {/* Per-km presets card */}
            <div style={{
              background: '#fff', border: '1px solid #D5CFBF', borderRadius: 5,
              padding: '28px 26px',
            }}>
              <div style={{
                fontSize: 13, fontWeight: 700, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: '#6B6659', marginBottom: 16,
              }}>
                Sponsor per km (100 km goal)
              </div>
              {[
                { rate: '$1/km', total: '$100' },
                { rate: '$2/km', total: '$200' },
                { rate: '$5/km', total: '$500' },
              ].map((p, i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '14px 0',
                  borderBottom: i < 2 ? '1px solid #D5CFBF' : 'none',
                }}>
                  <span style={{ fontSize: 16, fontWeight: 600, color: '#0D1B2A' }}>{p.rate}</span>
                  <span className="ledger-mono" style={{ fontSize: 20, fontWeight: 800, color: '#1E3A6E' }}>{p.total}</span>
                </div>
              ))}
              <div style={{ marginTop: 20 }}>
                <Button size="md" variant="navy" full onClick={goFunraisin}>
                  Sponsor a walker <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── FUNDRAISING INCENTIVES (navy band) ── */}
      <section style={{
        background: '#1E3A6E', color: '#fff', padding: '80px 0',
        position: 'relative', overflow: 'hidden',
      }}>
        <NetworkMotif opacity={0.12} stroke="#E8E3DA" />
        <div className="container" style={{ position: 'relative' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr',
            gap: 28, alignItems: 'start',
          }} className="stack-mobile-2">

            {/* Lead column */}
            <div>
              <div className="eyebrow" style={{ color: '#D8C2CD' }}>Incentives</div>
              <h2 className="h2-mobile" style={{
                fontSize: 'clamp(26px, 3vw, 36px)', fontWeight: 700,
                color: '#fff', margin: '12px 0 14px', lineHeight: 1.15,
              }}>
                Fundraising prizes
              </h2>
              <p style={{
                fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.88)',
                margin: '0 0 20px',
              }}>
                Hit your targets and earn rewards along the way. The further you go, the
                more you unlock.
              </p>
              <Button size="md" variant="outlineLight" onClick={goFunraisin}>
                Start fundraising
              </Button>
            </div>

            {/* Incentive cards */}
            {WALK_INCENTIVES.slice(0, 3).map((tier, i) => (
              <div key={i} style={{
                background: 'rgba(255,255,255,0.08)', borderRadius: 5,
                padding: '24px 22px', border: '1px solid rgba(255,255,255,0.12)',
              }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 5,
                  background: 'rgba(142,59,94,0.35)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 14,
                }}>
                  <i data-lucide={tier.icon} style={{ width: 24, height: 24, color: '#D8C2CD' }} />
                </div>
                <div style={{
                  fontSize: 13, fontWeight: 700, letterSpacing: '0.08em',
                  textTransform: 'uppercase', color: '#D8C2CD', marginBottom: 8,
                }}>
                  {tier.label}
                </div>
                <p style={{
                  fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.9)', margin: 0,
                }}>
                  {tier.reward}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── REGISTER — individuals and teams ── */}
      <section id="walk-register" style={{ background: '#E8E3DA', padding: '80px 0' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: '#8E3B5E' }}>Register</div>
          <h2 className="h2-mobile" style={{
            fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A',
            margin: '14px auto 16px', lineHeight: 1.15, letterSpacing: '-0.01em',
          }}>
            Walk as an individual or start a team.
          </h2>
          <hr className="rule-coral" style={{ margin: '0 auto' }} />

          <div style={{
            display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap',
            marginTop: 40, maxWidth: 800, margin: '40px auto 0',
          }}>
            {[
              {
                title: 'Individuals',
                icon: 'user',
                detail: 'Set your own distance and fundraising goal, connect your fitness app, and log kilometres throughout September.',
              },
              {
                title: 'Teams',
                icon: 'users',
                detail: 'Start a team with family, friends, or colleagues. Your kilometres and dollars combine. One motivated captain, ten walkers.',
              },
            ].map((card, i) => (
              <div key={i} style={{
                flex: '1 1 320px', maxWidth: 380,
                background: '#fff', borderRadius: 5,
                overflow: 'hidden', textAlign: 'left',
                border: '1px solid #D5CFBF',
              }}>
                <div style={{
                  background: '#1E3A6E', color: '#fff', padding: '24px 26px',
                  display: 'flex', alignItems: 'center', gap: 14,
                }}>
                  <i data-lucide={card.icon} style={{ width: 28, height: 28, flexShrink: 0 }} />
                  <div style={{ fontSize: 24, fontWeight: 700 }}>{card.title}</div>
                </div>
                <div style={{ padding: '22px 26px 28px' }}>
                  <p style={{ fontSize: 15, lineHeight: 1.6, color: '#6B6659', margin: '0 0 20px' }}>
                    {card.detail}
                  </p>
                  <Button size="md" variant="mulberry" full onClick={goFunraisin}>
                    Walk with us <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 4, verticalAlign: '-2px' }} />
                  </Button>
                </div>
              </div>
            ))}
          </div>

          <p style={{ marginTop: 28, fontSize: 14, color: '#6B6659', maxWidth: 520, margin: '28px auto 0' }}>
            Registration and fundraising are handled
            on our Funraisin site. Donations are 100% tax deductible and receipted automatically.
          </p>
        </div>
      </section>

      {/* ── FAQ / PRACTICAL INFO ── */}
      <section style={{ background: '#fff', padding: '80px 0' }}>
        <div className="container">
          <div style={{ maxWidth: 760, marginBottom: 40 }}>
            <div className="eyebrow" style={{ color: '#0D1B2A' }}>Frequently asked questions</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',
            }}>
              Everything you need to know
            </h2>
            <hr className="rule-coral" />
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
          }} className="stack-mobile-2">
            {[
              {
                icon: 'calendar',
                title: 'When does it run?',
                body: 'Kilometre logging runs 1–30 September 2026. Fundraising stays open for two weeks after.',
              },
              {
                icon: 'map-pin',
                title: 'Where do I walk?',
                body: 'Anywhere. Your street, a local park, a treadmill. Log from anywhere in Australia — the community total moves the map.',
              },
              {
                icon: 'smartphone',
                title: 'How do I track?',
                body: 'Connect Strava, Fitbit, Garmin, or MapMyFitness and your km sync automatically. Or log manually on Funraisin. Apple Watch? Connect via Strava (free).',
              },
              {
                icon: 'accessibility',
                title: 'Is it accessible?',
                body: 'Walk, run, push a pram, or roll a wheelchair. A non-ambulant child’s distance counts exactly the same as anyone’s. Every distance counts.',
              },
              {
                icon: 'receipt',
                title: 'Are donations tax deductible?',
                body: 'Yes. All donations are DGR-eligible and receipted automatically through Funraisin. ABN 70 665 788 161.',
              },
              {
                icon: 'clock',
                title: 'How quickly do km appear?',
                body: 'Fitness apps sync roughly hourly and pull the previous day’s data. Strava is near real-time. Allow up to 24 hours.',
              },
            ].map((item, i) => (
              <div key={i} style={{
                display: 'flex', gap: 16, alignItems: 'flex-start',
                padding: '20px 22px', background: '#F7F4F0', borderRadius: 5,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 5, background: '#E8E3DA',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <i data-lucide={item.icon} style={{ width: 22, height: 22, color: '#1E3A6E' }} />
                </div>
                <div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: '#0D1B2A' }}>{item.title}</div>
                  <p style={{ fontSize: 15, lineHeight: 1.6, color: '#6B6659', margin: '4px 0 0' }}>{item.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── WHERE THE FUNDS GO ── */}
      <section style={{ background: '#E8E3DA', padding: '72px 0' }}>
        <div className="container">
          <div style={{ maxWidth: 760, marginBottom: 40 }}>
            <div className="eyebrow" style={{ color: '#0D1B2A' }}>Where the funds go</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',
            }}>
              Every dollar drives change.
            </h2>
            <hr className="rule-coral" />
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
          }} className="stack-mobile-2">
            {[
              {
                stat: '50%',
                unit: 'Research partnerships',
                body: 'Funds Australian research into SCN2A treatments and therapies, including clinical trial readiness.',
              },
              {
                stat: '30%',
                unit: 'Family programs',
                body: 'Supports family navigation, newly-diagnosed kits, community meetups, and the national family network.',
              },
              {
                stat: '20%',
                unit: 'Awareness & advocacy',
                body: 'Builds public understanding and drives policy change for rare neurological conditions.',
              },
            ].map((c, i) => (
              <div key={i} style={{
                background: '#fff', border: '1px solid #D5CFBF', borderRadius: 5,
                padding: '26px 24px',
              }}>
                <div className="ledger-mono" style={{
                  fontSize: 34, fontWeight: 800, color: '#1E3A6E', lineHeight: 1,
                }}>
                  {c.stat}
                </div>
                <div style={{
                  fontSize: 13, fontWeight: 700, letterSpacing: '0.04em',
                  textTransform: 'uppercase', color: '#6B6659', marginTop: 8,
                }}>
                  {c.unit}
                </div>
                <p style={{
                  fontSize: 15, lineHeight: 1.6, color: '#0D1B2A', margin: '12px 0 0',
                }}>
                  {c.body}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CLOSING CTA ── */}
      <CTABlock
        eyebrow={'September 2026'}
        title="Lace up. Log in. Walk for SCN2A."
        body="Register as an individual or start a team, set a goal, and walk from anywhere in Australia this September. Every kilometre moves the map and raises funds for the families and research that need it most."
        ctaLabel="Walk with us"
        onCta={goFunraisin}
        secondaryLabel="Contact us"
        onSecondary={() => navigate('contact')}
      />
    </div>
  );
}

Object.assign(window, { WalkEventPage });