/* ============================================================
   Speed Assessment — Section components
   Light / sport-clinical / data-led. Atomic sections that the
   LandingPage composer assembles into 3 page-depth variants.
   ============================================================ */

const SPORTS = {
  basketball: { label: 'Basketball', accent: '#F6930E', tint: 'rgba(246,147,14,0.08)', benchmark: { ten: '1.80', twenty: '3.05', flying: '3.35', agility: '4.55', jump: '2.45' }, elite: 'Elite U18' },
  afl:        { label: 'AFL',        accent: '#12D4C8', tint: 'rgba(18,212,200,0.08)', benchmark: { ten: '1.76', twenty: '2.98', flying: '3.22', agility: '4.48', jump: '2.60' }, elite: 'Draft Combine' },
  soccer:     { label: 'Soccer',     accent: '#359BEE', tint: 'rgba(53,155,238,0.08)', benchmark: { ten: '1.82', twenty: '3.08', flying: '3.40', agility: '4.62', jump: '2.40' }, elite: 'Academy U17' },
  netball:    { label: 'Netball',    accent: '#f6930e', tint: 'rgba(246,147,14,0.08)', benchmark: { ten: '1.88', twenty: '3.18', flying: '3.55', agility: '4.70', jump: '2.20' }, elite: 'State rep' },
  tennis:     { label: 'Tennis',     accent: '#12D4C8', tint: 'rgba(18,212,200,0.08)', benchmark: { ten: '1.85', twenty: '3.12', flying: '3.45', agility: '4.58', jump: '2.35' }, elite: 'Nat\'l ranked' },
};

// --------------------------------------------------------
// Shared atoms
// --------------------------------------------------------
const Eyebrow = ({ children, color, num }) => (
  <div style={{
    fontFamily: 'var(--font-speed)', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.24em',
    fontSize: 13, color: color || 'var(--p2a-orange)',
    display: 'inline-flex', alignItems: 'center', gap: 14,
    marginBottom: 24,
  }}>
    <span style={{ width: 32, height: 2, background: color || 'var(--p2a-orange)' }} />
    {num && <span style={{ opacity: 0.6, fontWeight: 600 }}>/ {num}</span>}
    {children}
  </div>
);

const Container = ({ children, style, narrow, className }) => (
  <div className={className} style={{
    maxWidth: narrow ? 920 : 1200, margin: '0 auto',
    padding: '0 32px', ...style,
  }}>{children}</div>
);

const Logo = ({ dark }) => (
  <img
    src={`assets/logos/logo-${dark ? 'white-on-black' : 'black-on-white'}.png`}
    alt="Power2ADAPT"
    style={{ height: 34, width: 'auto', display: 'block' }}
  />
);

// --------------------------------------------------------
// NAV
// --------------------------------------------------------
const Nav = ({ sport, onSportChange }) => (
  <nav style={{
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(10,26,30,0.85)',
    backdropFilter: 'blur(12px)',
    borderBottom: '1px solid var(--border-dark)',
  }}>
    <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 32px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{
          fontFamily: 'var(--font-speed)', fontWeight: 700,
          fontSize: 13, letterSpacing: '0.24em', textTransform: 'uppercase',
          color: '#fff', whiteSpace: 'nowrap',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ width: 24, height: 2, background: 'var(--p2a-orange)' }} />
          Speed Assessment
        </div>
      </div>
      <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="#tests" style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.85)', whiteSpace: 'nowrap', letterSpacing: '0.16em', textTransform: 'uppercase', textDecoration: 'none' }}>The Tests</a>
        <a href="#proof" style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.85)', whiteSpace: 'nowrap', letterSpacing: '0.16em', textTransform: 'uppercase', textDecoration: 'none' }}>Proof</a>
        <a href="#coach" style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.85)', whiteSpace: 'nowrap', letterSpacing: '0.16em', textTransform: 'uppercase', textDecoration: 'none' }}>Coach</a>
        <a href="https://app.speed-assessment.online/login" className="p2a-cta p2a-cta-primary" style={{ padding: '12px 20px', fontSize: 11 }}>Start Free Test</a>
      </div>
    </Container>
  </nav>
);

// --------------------------------------------------------
// HERO — big timer, split layout, sport-tweakable
// --------------------------------------------------------
const Hero = ({ sport }) => {
  const s = SPORTS[sport];
  return (
    <section style={{ background: 'var(--p2a-bg)', padding: '96px 0 112px', borderBottom: '1px solid var(--border-dark)', position: 'relative', overflow: 'hidden' }}>
      {/* Subtle track-lane pattern */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(90deg, transparent 0, transparent 119px, rgba(255,255,255,0.025) 119px, rgba(255,255,255,0.025) 120px)`,
        pointerEvents: 'none',
      }} />
      <Container className="grid-hero" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <Eyebrow>Excellence Through Consistency</Eyebrow>
          <h1 className="hero-h1" style={{
            fontFamily: 'var(--font-speed)', fontWeight: 700,
            fontSize: 92, lineHeight: 0.92,
            letterSpacing: '-0.025em',
            margin: '0 0 28px', color: '#fff',
            textTransform: 'uppercase',
          }}>
            Power Your<br /><span style={{ color: 'var(--p2a-teal)' }}>Performance.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--p2a-grey)', maxWidth: 540, margin: '0 0 36px' }}>
            From first movement skills to High Performance competition prep. Test your speed profile across <b style={{ color: '#fff' }}>5 benchmarks</b> used at AFL Draft Combines — then fix what's actually slowing you down.
          </p>
          <div className="hero-cta-row" style={{ display: 'flex', gap: 12, marginBottom: 36 }}>
            <a href="https://app.speed-assessment.online/login" className="p2a-cta p2a-cta-primary">
              Start My Assessment
            </a>
            <a href="#tests" className="p2a-cta p2a-cta-secondary">
              See The Tests
            </a>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, color: 'var(--p2a-grey-low)', fontSize: 12, letterSpacing: '0.06em' }}>
            <div style={{ display: 'flex' }}>
              {[0, 1, 2, 3].map(i => (
                <div key={i} style={{
                  width: 28, height: 28, borderRadius: '50%',
                  background: ['#F58220', '#2BD4C5', '#359BEE', '#525759'][i],
                  border: '2px solid var(--p2a-bg)',
                  marginLeft: i === 0 ? 0 : -8,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', fontSize: 10, fontWeight: 800,
                }}>{['JL', 'MR', 'TK', '+'][i]}</div>
              ))}
            </div>
            <span><b style={{ color: '#fff' }}>1,000+</b> athletes developed · Australian Athletics High Performance coach</span>
          </div>
        </div>

        {/* RIGHT — hero visual: speed profile dashboard */}
        <div className="hero-timer-wrap"><HeroTimer sport={sport} /></div>
      </Container>
    </section>
  );
};

const HeroTimer = ({ sport }) => {
  const s = SPORTS[sport];
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf; const start = performance.now();
    const tick = (now) => {
      const elapsed = ((now - start) / 1000) % 4.2;
      setT(elapsed > 3.05 ? 3.05 : elapsed);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [sport]);
  const sec = t.toFixed(2).split('.');
  return (
    <div style={{
      background: '#0a0a0a', borderRadius: 20,
      padding: 32, color: '#fff',
      boxShadow: '0 40px 80px -20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Lane stripes */}
      <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, transparent 0, transparent 60px, rgba(255,255,255,0.03) 60px, rgba(255,255,255,0.03) 61px)', pointerEvents: 'none' }} />

      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--p2a-teal)', fontWeight: 700 }}>
            ● Live · 20m sprint
          </div>
          <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 700 }}>
            Lane 4 · {s.label}
          </div>
        </div>

        <div style={{
          fontFamily: 'var(--font-speed)', fontWeight: 700,
          fontSize: 120, lineHeight: 1, letterSpacing: '-0.04em',
          display: 'flex', alignItems: 'baseline', justifyContent: 'center',
          padding: '24px 0',
          fontVariantNumeric: 'tabular-nums',
        }}>
          <span style={{ color: '#fff' }}>{sec[0]}</span>
          <span style={{ color: 'var(--p2a-orange)', fontSize: 80, margin: '0 4px' }}>.</span>
          <span style={{ color: 'var(--p2a-orange)' }}>{sec[1]}</span>
          <span style={{ fontSize: 28, color: 'rgba(255,255,255,0.4)', marginLeft: 10, letterSpacing: '0.1em', fontWeight: 600 }}>s</span>
        </div>

        {/* Track progress bar */}
        <div style={{ margin: '0 0 24px', position: 'relative' }}>
          <div style={{ height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{
              height: '100%', width: `${(t / 3.05) * 100}%`,
              background: 'linear-gradient(90deg, var(--p2a-orange), var(--p2a-teal))',
              transition: 'width 40ms linear',
            }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 10, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.4)', fontWeight: 700 }}>
            <span>0m</span><span>5m</span><span>10m</span><span>15m</span><span>20m</span>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          {[
            { label: 'Your best', val: '3.12s', delta: null },
            { label: `${s.elite} avg`, val: `${s.benchmark.twenty}s`, delta: null, hl: s.accent },
            { label: 'Gap', val: '-0.07s', delta: 'up', hl: '#ef4444' },
          ].map((m, i) => (
            <div key={i}>
              <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)', fontWeight: 700, marginBottom: 6 }}>{m.label}</div>
              <div style={{ fontFamily: 'var(--font-speed)', fontSize: 22, fontWeight: 700, color: m.hl || '#fff', fontVariantNumeric: 'tabular-nums' }}>{m.val}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// --------------------------------------------------------
// TRY IT NOW — live demo of the Speed Assessment app
// --------------------------------------------------------
const TryItNow = ({ sport, samplePrefill, showVipHint, forceVipUnlock }) => {
  return (
    <section id="try-it" style={{
      background: 'var(--p2a-bg)',
      padding: '112px 0',
      borderBottom: '1px solid var(--border-dark)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Subtle diagonal accent */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'repeating-linear-gradient(135deg, transparent 0, transparent 60px, rgba(245,130,32,0.04) 60px, rgba(245,130,32,0.04) 62px)',
      }} />
      <Container>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 16px', background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border-dark)', marginBottom: 24, fontFamily: 'var(--font-speed)' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--p2a-teal)', boxShadow: '0 0 10px var(--p2a-teal)', animation: 'tryit-pulse 1.6s ease-in-out infinite' }} />
            <style>{`@keyframes tryit-pulse{0%,100%{opacity:1}50%{opacity:0.4}}`}</style>
            <span style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(255,255,255,0.85)' }}>Live · No sign-up</span>
          </div>
          <h2 style={{
            fontFamily: 'var(--font-speed)', fontWeight: 700,
            fontSize: 64, lineHeight: 0.95, textTransform: 'uppercase',
            letterSpacing: '-0.02em', margin: '0 0 20px', color: '#fff',
          }}>
            Try it <span style={{ color: 'var(--p2a-teal)' }}>now.</span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.5, color: 'var(--p2a-grey)', margin: 0 }}>
            The real tool — right here. Plug in your time, pick your sport and age, see exactly where you sit against the benchmarks coaches use.
          </p>
        </div>

        {/* Demo frame */}
        <div style={{
          maxWidth: 640, margin: '0 auto',
          position: 'relative',
        }}>
          {/* Browser-chrome framing */}
          <div style={{
            background: '#0a0a0a', borderRadius: '20px 20px 0 0',
            padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 10,
            borderBottom: '1px solid rgba(255,255,255,0.06)',
          }}>
            <div style={{ display: 'flex', gap: 6 }}>
              {['#ff5f56', '#ffbd2e', '#27c93f'].map(c => (
                <span key={c} style={{ width: 12, height: 12, borderRadius: '50%', background: c, opacity: 0.9 }} />
              ))}
            </div>
            <div style={{
              flex: 1, height: 24, borderRadius: 6,
              background: 'rgba(255,255,255,0.05)',
              border: '1px solid rgba(255,255,255,0.06)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              gap: 6, fontSize: 11, color: 'rgba(255,255,255,0.45)',
              fontFamily: 'var(--font-mono, monospace)',
              letterSpacing: '0.04em',
            }}>
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="4" y="11" width="16" height="10" rx="1"/>
                <path d="M8 11V7a4 4 0 1 1 8 0v4"/>
              </svg>
              speed-assessment.online
            </div>
            <div style={{ width: 54 }} />
          </div>

          {/* Live app */}
          <div style={{
            borderRadius: '0 0 20px 20px',
            overflow: 'hidden',
            boxShadow: '0 40px 80px -20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06)',
          }}>
            <SpeedAssessmentApp
              initialSport={sport}
              samplePrefill={samplePrefill}
              showVipHint={showVipHint}
              forceVipUnlock={forceVipUnlock}
            />
          </div>

          {/* Floating annotations */}
          <div style={{
            position: 'absolute', left: -80, top: 180,
            display: 'flex', alignItems: 'center', gap: 10,
            background: 'var(--p2a-bg-2)', border: '1px solid var(--border-dark)',
            padding: '10px 14px',
            fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
            fontWeight: 700, color: 'rgba(255,255,255,0.8)',
            fontFamily: 'var(--font-speed)',
            whiteSpace: 'nowrap',
          }} className="demo-annotation demo-annotation-left">
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--p2a-orange)' }} />
            9 sports
          </div>

          <div style={{
            position: 'absolute', right: -96, top: 380,
            display: 'flex', alignItems: 'center', gap: 10,
            background: 'var(--p2a-bg-2)', border: '1px solid var(--border-dark)',
            padding: '10px 14px',
            fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
            fontWeight: 700, color: 'rgba(255,255,255,0.8)',
            fontFamily: 'var(--font-speed)',
            whiteSpace: 'nowrap',
          }} className="demo-annotation demo-annotation-right">
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--p2a-teal)' }} />
            Peer-reviewed data
          </div>
          <style>{`
            @media (max-width: 900px) {
              .demo-annotation { display: none !important; }
            }
          `}</style>
        </div>

        {/* Footer note + secondary CTA */}
        <div style={{ textAlign: 'center', maxWidth: 520, margin: '40px auto 0' }}>
          <p style={{ fontSize: 13, color: 'var(--p2a-grey)', lineHeight: 1.6, margin: '0 0 20px' }}>
            Want the full report — age-based acceleration + top-speed + agility + power profile, plus a 7-day training plan?
          </p>
          <a href="https://app.speed-assessment.online/login" className="p2a-cta p2a-cta-primary">
            Get My Full Assessment
          </a>
        </div>
      </Container>
    </section>
  );
};

// --------------------------------------------------------
// LOGO BAR / SOCIAL PROOF STRIP
// --------------------------------------------------------
const TrustStrip = () => (
  <section style={{ background: '#fff', padding: '32px 0', borderBottom: '1px solid var(--border)' }}>
    <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
      <div style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--p2a-grey)', fontWeight: 700 }}>
        Trusted by athletes from
      </div>
      {['AFL Academies', 'NBL1 clubs', 'NSW Netball', 'A-League youth', 'Tennis Australia'].map(org => (
        <div key={org} style={{
          fontFamily: 'var(--font-speed)', fontWeight: 600,
          fontSize: 14, letterSpacing: '0.08em', color: '#9CA3AF', textTransform: 'uppercase',
        }}>{org}</div>
      ))}
    </Container>
  </section>
);

// --------------------------------------------------------
// THE 3 MISTAKES
// --------------------------------------------------------
const Mistakes = () => (
  <section style={{ background: 'var(--p2a-bg)', padding: '112px 0', borderBottom: '1px solid var(--border-dark)' }}>
    <Container>
      <div style={{ maxWidth: 720, marginBottom: 64 }}>
        <Eyebrow color="var(--p2a-orange)" num="01">Why athletes stay slow</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-speed)', fontWeight: 700, fontSize: 64, lineHeight: 0.95, textTransform: 'uppercase', letterSpacing: '-0.02em', margin: '0 0 24px', color: '#fff' }} className="section-h2">
          3 mistakes holding<br/>your speed <span style={{ color: 'var(--p2a-teal)' }}>back.</span>
        </h2>
        <p style={{ fontSize: 18, color: 'var(--p2a-grey)', maxWidth: 560 }}>
          Running more won't fix it. Here's what coaching 1,000+ junior athletes reveals about why most training plateaus.
        </p>
      </div>

      <div className="grid-mistakes" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {[
          { n: '01', title: 'Training tired', body: 'Speed work must be done fresh. Your nervous system needs to be sharp — training speed when fatigued just increases injury risk.' },
          { n: '02', title: 'No assessment', body: "You can't improve what you don't measure. Most athletes don't know if they're an acceleration or a top-speed athlete. They just… run." },
          { n: '03', title: 'Ignoring technique', body: 'Proper sprint mechanics alone can drop 0.1–0.3 seconds off your time — without having to get stronger in the gym yet.' },
        ].map((m, i) => (
          <div key={i} style={{
            background: 'var(--p2a-bg-2)',
            border: '1px solid var(--border-dark)',
            padding: 36,
          }}>
            <div style={{ fontFamily: 'var(--font-speed)', fontSize: 13, fontWeight: 700, color: 'var(--p2a-orange)', letterSpacing: '0.24em', marginBottom: 18 }}>/ {m.n}</div>
            <div style={{ fontFamily: 'var(--font-speed)', fontSize: 26, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '-0.01em', color: '#fff', marginBottom: 14, lineHeight: 1.1 }}>
              {m.title}.
            </div>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--p2a-grey)' }}>{m.body}</p>
          </div>
        ))}
      </div>
    </Container>
  </section>
);

// --------------------------------------------------------
// THE 5 TESTS
// --------------------------------------------------------
const Tests = ({ sport }) => {
  const s = SPORTS[sport];
  const tests = [
    { n: '01', name: '10m Sprint',      metric: `${s.benchmark.ten}s`, label: 'Acceleration take-off',     body: 'First-step explosiveness. The single most important 10 metres in team sport.',   unit: 'seconds' },
    { n: '02', name: '20m Sprint',      metric: `${s.benchmark.twenty}s`, label: 'Acceleration',            body: 'Same protocol used at the AFL Draft Combine. Two-point stance, timing gates.',   unit: 'seconds' },
    { n: '03', name: 'Flying 30m',      metric: `${s.benchmark.flying}s`, label: 'Maximum velocity',        body: '20m run-in zone, sprint through. Measures your true top-end speed.',            unit: 'seconds' },
    { n: '04', name: '5-10-5 Pro Agility', metric: `${s.benchmark.agility}s`, label: 'Change of direction', body: 'Cut, accelerate, cut, finish. The sport-specific test NBA / NFL scouts use.',   unit: 'seconds' },
    { n: '05', name: 'Broad Jump',      metric: `${s.benchmark.jump}m`, label: 'Explosive power',           body: 'Horizontal power output. Correlates directly with 10m sprint performance.',     unit: 'metres' },
  ];
  return (
    <section id="tests" style={{ background: 'var(--p2a-bg-2)', padding: '112px 0', borderBottom: '1px solid var(--border-dark)', position: 'relative' }}>
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 640 }}>
            <Eyebrow color={s.accent} num="02">The assessment · {s.label}</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-speed)', fontWeight: 700, fontSize: 64, lineHeight: 0.95, textTransform: 'uppercase', letterSpacing: '-0.02em', margin: '0 0 24px', color: '#fff' }} className="section-h2">
              5 tests.<br/>Your complete<br/><span style={{ color: 'var(--p2a-teal)' }}>speed profile.</span>
            </h2>
            <p style={{ fontSize: 18, color: 'var(--p2a-grey)' }}>
              Every athlete has a different profile. Some are explosive but can't hold top speed. Others have great top speed but slow first steps. These 5 tests reveal yours.
            </p>
          </div>
          <div style={{
            background: 'var(--p2a-bg)', border: '1px solid var(--border-dark)',
            padding: '14px 20px', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(255,255,255,0.7)',
            display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-speed)',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: s.accent }} />
            Benchmarks: {s.elite}
          </div>
        </div>

        <div className="grid-tests" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {tests.map(t => (
            <div key={t.n} style={{
              background: 'var(--p2a-bg)',
              border: '1px solid var(--border-dark)',
              padding: '28px 22px',
              display: 'flex', flexDirection: 'column',
              minHeight: 320,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 24 }}>
                <div style={{ fontFamily: 'var(--font-speed)', fontSize: 11, fontWeight: 700, letterSpacing: '0.24em', color: s.accent }}>/ {t.n}</div>
                <TestIcon name={t.name} color={s.accent} />
              </div>
              <div style={{ fontFamily: 'var(--font-speed)', fontSize: 19, fontWeight: 700, textTransform: 'uppercase', color: '#fff', marginBottom: 8, lineHeight: 1.05 }}>{t.name}</div>
              <div style={{ fontSize: 12, color: 'var(--p2a-grey-low)', marginBottom: 18, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>{t.label}</div>
              <p style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--p2a-grey)', marginBottom: 'auto' }}>{t.body}</p>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px dashed rgba(255,255,255,0.12)' }}>
                <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--p2a-grey-low)', fontWeight: 700, marginBottom: 6 }}>Benchmark</div>
                <div style={{ fontFamily: 'var(--font-speed)', fontSize: 30, fontWeight: 700, color: '#fff', letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>{t.metric}</div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// Tiny glyph system — no icon font, all SVG
const TestIcon = ({ name, color }) => {
  const ic = {
    '10m Sprint':       <path d="M3 18 L14 18 M10 14 L14 18 L10 22" />,
    '20m Sprint':       <path d="M3 18 L20 18 M16 14 L20 18 L16 22" />,
    'Flying 30m':       <path d="M3 18 L21 18 M6 14 Q12 10 18 14 M17 14 L21 18 L17 22" />,
    '5-10-5 Pro Agility': <path d="M4 20 L10 12 L14 20 L20 12" />,
    'Broad Jump':       <path d="M4 20 Q12 6 20 20 M4 20 L20 20" />,
  };
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.9 }}>
      {ic[name]}
    </svg>
  );
};

// --------------------------------------------------------
// JORDYN CASE STUDY — big data visualisation
// --------------------------------------------------------
const CaseStudy = () => (
  <section id="proof" style={{ background: 'var(--p2a-bg-2)', color: '#fff', padding: '112px 0', borderBottom: '1px solid var(--border-dark)' }}>
    <Container>
      <div className="grid-case-study" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 72, alignItems: 'center' }}>
        <div>
          <Eyebrow color="var(--p2a-teal)" num="03">Real results · Jordyn S.</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-speed)', fontWeight: 700, fontSize: 60, lineHeight: 0.95, textTransform: 'uppercase', letterSpacing: '-0.02em', margin: '0 0 28px', color: '#fff' }}>
            She thought<br/>she wasn't<br/><span style={{ color: 'var(--p2a-teal)' }}>naturally fast.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--p2a-grey)', marginBottom: 20 }}>
            21-year-old basketball referee. Constantly getting told to push off stronger and get faster during league promotion try-outs. She was training, but training wrong.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--p2a-grey)', marginBottom: 32 }}>
            We assessed her real speed profile. Fixed her first 3 steps. Built a personalised program around her weaknesses. <b style={{ color: '#fff' }}>Six weeks later:</b>
          </p>
          <blockquote style={{
            borderLeft: '3px solid var(--p2a-orange)',
            padding: '8px 0 8px 24px',
            margin: '0 0 28px',
            fontFamily: 'var(--font-speed)', fontWeight: 500,
            fontSize: 22, lineHeight: 1.4, color: '#fff',
          }}>
            "I'm keeping up with the play and getting into better positions consistently. My confidence is through the roof."
          </blockquote>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 12, color: 'var(--p2a-grey-low)', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 700, fontFamily: 'var(--font-speed)' }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg, var(--p2a-orange), var(--p2a-teal))' }} />
            <div><b style={{ color: '#fff' }}>Jordyn S.</b> — Basketball Referee · Victoria NBL1</div>
          </div>
        </div>

        {/* RIGHT — before/after bars */}
        <div style={{
          background: 'var(--p2a-bg)',
          border: '1px solid var(--border-dark)',
          padding: 36,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--p2a-grey-low)', fontWeight: 700, fontFamily: 'var(--font-speed)' }}>Results after 6 weeks</div>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--p2a-teal)', fontWeight: 700, fontFamily: 'var(--font-speed)' }}>—0.45s</div>
          </div>

          {[
            { label: '20m Sprint', before: 4.25, after: 3.80, unit: 's', delta: '-0.45s' },
            { label: '5-10-5 Agility', before: 8.68, after: 7.54, unit: 's', delta: '-1.14s' },
            { label: '10m Sprint', before: 2.12, after: 1.94, unit: 's', delta: '-0.18s' },
          ].map((row, i) => {
            const max = Math.max(row.before, row.after);
            return (
              <div key={i} style={{ marginBottom: 28 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
                  <div style={{ fontFamily: 'var(--font-speed)', fontWeight: 700, fontSize: 14, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{row.label}</div>
                  <div style={{ fontFamily: 'var(--font-speed)', fontSize: 13, fontWeight: 700, color: 'var(--p2a-orange)' }}>{row.delta}</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 80px', gap: 12, alignItems: 'center', marginBottom: 6 }}>
                  <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)' }}>Before</div>
                  <div style={{ height: 16, background: 'rgba(255,255,255,0.06)', borderRadius: 3, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${(row.before / max) * 100}%`, background: 'rgba(255,255,255,0.25)' }} />
                  </div>
                  <div style={{ fontFamily: 'var(--font-speed)', fontWeight: 700, fontSize: 14, color: '#fff', fontVariantNumeric: 'tabular-nums', textAlign: 'right' }}>{row.before}{row.unit}</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 80px', gap: 12, alignItems: 'center' }}>
                  <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--p2a-teal)', fontWeight: 700 }}>After</div>
                  <div style={{ height: 16, background: 'rgba(18,212,200,0.08)', borderRadius: 3, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${(row.after / max) * 100}%`, background: 'linear-gradient(90deg, var(--p2a-teal), var(--p2a-orange))' }} />
                  </div>
                  <div style={{ fontFamily: 'var(--font-speed)', fontWeight: 700, fontSize: 14, color: 'var(--p2a-teal)', fontVariantNumeric: 'tabular-nums', textAlign: 'right' }}>{row.after}{row.unit}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </Container>
  </section>
);

// --------------------------------------------------------
// COACH CREDENTIALS
// --------------------------------------------------------
const Coach = () => (
  <section id="coach" style={{ background: 'var(--p2a-bg)', padding: '112px 0', borderBottom: '1px solid var(--border-dark)' }}>
    <Container>
      <div className="grid-coach" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 72, alignItems: 'center' }}>
        <div style={{
          aspectRatio: '1/1',
          position: 'relative',
          overflow: 'hidden',
          border: '1px solid var(--border-dark)',
          backgroundImage: 'url(assets/coach-al.jpg)',
          backgroundSize: 'cover',
          backgroundPosition: 'center 20%',
        }}>
          <div style={{
            position: 'absolute', left: 20, bottom: 20,
            background: 'rgba(10,26,30,0.92)',
            backdropFilter: 'blur(6px)',
            border: '1px solid var(--border-dark)',
            padding: '10px 14px', fontSize: 11, letterSpacing: '0.2em',
            textTransform: 'uppercase', fontWeight: 700, color: 'rgba(255,255,255,0.85)',
            display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-speed)',
          }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--p2a-teal)' }} />
            On track · Melbourne
          </div>
        </div>

        <div>
          <Eyebrow num="04">Directed by</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-speed)', fontWeight: 700, fontSize: 60, lineHeight: 0.95, textTransform: 'uppercase', letterSpacing: '-0.02em', margin: '0 0 24px', color: '#fff' }}>
            Alistair Tait.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--p2a-grey)', marginBottom: 36, maxWidth: 520 }}>
            Australian Athletics High Performance Sprint Coach. Bachelor of Sports Coaching, Victoria University. Twenty years coaching junior and elite athletes across a multitude of sports.
          </p>
          <p style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--p2a-grey-low)', marginBottom: 36, maxWidth: 520 }}>
            2006 Commonwealth Games — Athletics Training Venue Supervisor.
          </p>

          <div className="grid-coach-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--border-dark)', borderBottom: '1px solid var(--border-dark)' }}>
            {[
              { n: 'AA', l: 'High Performance Coach' },
              { n: '1,000+',    l: 'Athletes developed' },
              { n: '3×',    l: 'Victoria state rep' },
              { n: '2007', l: 'Founded' },
            ].map((stat, i) => (
              <div key={i} style={{ padding: '24px 0', borderLeft: i === 0 ? 'none' : '1px solid var(--border-dark)', paddingLeft: i === 0 ? 0 : 20 }}>
                <div style={{ fontFamily: 'var(--font-speed)', fontSize: 30, fontWeight: 700, letterSpacing: '-0.02em', color: '#fff' }}>{stat.n}</div>
                <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--p2a-grey-low)', fontWeight: 700, marginTop: 8 }}>{stat.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Container>
  </section>
);

// --------------------------------------------------------
// 7-DAY QUICK START OVERVIEW
// --------------------------------------------------------
const SevenDay = () => (
  <section style={{ background: 'var(--p2a-bg-2)', padding: '112px 0', borderBottom: '1px solid var(--border-dark)' }}>
    <Container>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 56, flexWrap: 'wrap', gap: 24 }}>
        <div style={{ maxWidth: 640 }}>
          <Eyebrow color="var(--p2a-teal)" num="05">Included · Free</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-speed)', fontWeight: 700, fontSize: 60, lineHeight: 0.95, textTransform: 'uppercase', letterSpacing: '-0.02em', margin: '0 0 24px', color: '#fff' }}>
            The 7-day<br/><span style={{ color: 'var(--p2a-teal)' }}>quick-start.</span>
          </h2>
          <p style={{ fontSize: 18, color: 'var(--p2a-grey)' }}>
            Run through your assessment + a structured week of training. See lasting results in 4–6 weeks of consistent work.
          </p>
        </div>
      </div>

      <div className="grid-seven-day" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8 }}>
        {[
          { d: 'MON', l: 'Assessment',    f: 'Baseline · 5 tests',       c: '#F58220' },
          { d: 'TUE', l: 'Acceleration',  f: '10m + 20m focus',          c: '#2BD4C5' },
          { d: 'WED', l: 'Recovery',      f: 'Mobility + film review',   c: 'rgba(255,255,255,0.4)' },
          { d: 'THU', l: 'Max velocity',  f: 'Flying 30s',               c: '#2BD4C5' },
          { d: 'FRI', l: 'Agility',       f: '5-10-5 variants',          c: '#F58220' },
          { d: 'SAT', l: 'Power',         f: 'Broad jump + plyos',       c: '#F58220' },
          { d: 'SUN', l: 'Retest',        f: 'Measure the delta',        c: '#2BD4C5' },
        ].map((day, i) => (
          <div key={i} style={{
            background: 'var(--p2a-bg)', border: '1px solid var(--border-dark)',
            padding: 22, borderTop: `3px solid ${day.c}`,
            display: 'flex', flexDirection: 'column', minHeight: 170,
          }}>
            <div style={{ fontFamily: 'var(--font-speed)', fontSize: 11, letterSpacing: '0.24em', fontWeight: 700, color: 'var(--p2a-grey-low)' }}>{day.d}</div>
            <div style={{ fontFamily: 'var(--font-speed)', fontSize: 18, fontWeight: 700, textTransform: 'uppercase', color: '#fff', margin: '12px 0 8px', lineHeight: 1.1 }}>{day.l}.</div>
            <div style={{ fontSize: 12, color: 'var(--p2a-grey)', marginTop: 'auto', lineHeight: 1.5 }}>{day.f}</div>
          </div>
        ))}
      </div>
    </Container>
  </section>
);

// --------------------------------------------------------
// COMMUNITY / CTA
// --------------------------------------------------------
const CTA = ({ compact }) => {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section id="cta" style={{
      background: 'var(--p2a-bg)', color: '#fff',
      padding: compact ? '88px 0' : '128px 0',
      position: 'relative', overflow: 'hidden',
      borderTop: '1px solid var(--border-dark)',
    }}>
      {/* Orange + teal gradient wash */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 20% 50%, rgba(245,130,32,0.18), transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(43,212,197,0.14), transparent 50%)',
      }} />
      <Container style={{ position: 'relative', textAlign: 'center', maxWidth: 820 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, marginBottom: 24, fontFamily: 'var(--font-speed)', fontSize: 13, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--p2a-orange)', fontWeight: 700 }}>
          <span style={{ width: 32, height: 2, background: 'var(--p2a-orange)' }} />
          Excellence Through Consistency
          <span style={{ width: 32, height: 2, background: 'var(--p2a-orange)' }} />
        </div>
        <h2 style={{ fontFamily: 'var(--font-speed)', fontWeight: 700, fontSize: compact ? 60 : 80, lineHeight: 0.92, textTransform: 'uppercase', letterSpacing: '-0.025em', margin: '0 0 28px', color: '#fff' }}>
          Your speed breakthrough<br/><span style={{ color: 'var(--p2a-teal)' }}>is waiting.</span>
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--p2a-grey)', maxWidth: 580, margin: '0 auto 44px' }}>
          Get the complete assessment guide, age-based benchmarks, video demos of every test, and the 7-day program — inside the free Power2ADAPT SKOOL community.
        </p>

        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 24, flexWrap: 'wrap' }}>
          <a href="https://www.skool.com/power2adapt-speed-school-8929/about" className="p2a-cta p2a-cta-primary">
            Join The Community
          </a>
          {/* PDF Guide CTA — restore when PDF is ready */}
        </div>

        <div style={{ paddingTop: 44, borderTop: '1px solid var(--border-dark)', marginTop: 24 }}>
          <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--p2a-grey-low)', fontWeight: 700, marginBottom: 16, fontFamily: 'var(--font-speed)' }}>Or get it by email</div>
          {submitted ? (
            <div style={{ fontSize: 14, color: 'var(--p2a-teal)' }}>✓ Sent to {email}. Check your inbox.</div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); if (email) setSubmitted(true); }} style={{ display: 'flex', gap: 8, maxWidth: 460, margin: '0 auto' }}>
              <input type="email" placeholder="you@email.com" value={email} onChange={e => setEmail(e.target.value)}
                style={{
                  flex: 1, padding: '16px 18px', borderRadius: 0,
                  border: '1px solid rgba(255,255,255,0.15)',
                  background: 'rgba(255,255,255,0.04)', color: '#fff',
                  fontFamily: 'var(--font-body)', fontSize: 14,
                }} />
              <button type="submit" className="p2a-cta p2a-cta-primary" style={{ padding: '16px 22px' }}>Send</button>
            </form>
          )}
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', gap: 24, marginTop: 36, fontSize: 11, color: 'var(--p2a-grey-low)', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700, flexWrap: 'wrap', fontFamily: 'var(--font-speed)' }}>
          <span>Athletes 13+</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span>Melbourne · Frankston · Mornington Peninsula · Online</span>
        </div>
      </Container>
    </section>
  );
};

// --------------------------------------------------------
// FOOTER
// --------------------------------------------------------
const Footer = () => (
  <footer style={{ background: '#0a0a0a', color: 'rgba(255,255,255,0.5)', padding: '40px 0', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
    <Container style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, flexWrap: 'wrap', gap: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <img src="assets/logos/logo-white-on-black.png" alt="Power2ADAPT" style={{ height: 34, width: 'auto', display: 'block', opacity: 0.55 }} />
        <span>© Power2ADAPT · Athletic Development & Performance Training</span>
      </div>
      <div style={{ display: 'flex', gap: 20 }}>
        <a href="#" style={{ color: 'rgba(255,255,255,0.5)' }}>Privacy</a>
        <a href="#" style={{ color: 'rgba(255,255,255,0.5)' }}>Terms</a>
        <a href="#" style={{ color: 'rgba(255,255,255,0.5)' }}>Contact</a>
      </div>
    </Container>
  </footer>
);

// Export to window for cross-script access
Object.assign(window, {
  SPORTS, Nav, Hero, TryItNow, TrustStrip, Mistakes, Tests, CaseStudy, Coach, SevenDay, CTA, Footer,
});
