// V.04 red-line slides — VO₂max / threshold-testing money machine.
// Voice: matches CoreSlides.jsx / CoreSlides2.jsx / AppendixSlides.jsx exactly.
// Four new slides: the hook (average vs n=1), two doors into measured,
// the beachhead (who first), and the staged capital plan.

// 01c — THE HOOK: all training logic is built for the average. Nobody is.
// Proof everyone can check: HR zones, all derived from 220 − age.
function S01c_Average({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="The estimates">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.05, margin: 0, color: D.textLight }}>
          Your body runs <span style={{ color: D.textSecLight }}>on estimates.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 25, fontWeight: 500, marginTop: 20, marginBottom: 0, color: D.textSecLight, maxWidth: 1620, lineHeight: 1.3 }}>
          Your training and your longevity stack are built on numbers nobody ever measured. Every zone, score, and plan starts from a population formula. Here is one you can check yourself: 220 minus your age.
        </p>

        <div style={{ flex: 1, marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 84px 1fr', gap: 0, alignItems: 'stretch' }}>
          {/* HER */}
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '30px 34px', display: 'flex', flexDirection: 'column', gap: 22 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <SLabel color={D.textLight}>Her · Age 28</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>220 − AGE</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 28 }}>
              <BigStat value="192" label="Formula says" valueSize={72} color={D.textSecLight} />
              <span style={{ fontFamily: D.fontSans, fontSize: 40, color: D.textSecLight, marginBottom: 14 }}>→</span>
              <BigStat value="205" label="Real max" valueSize={148} color={D.textLight} />
            </div>
            <div style={{ marginTop: 'auto', padding: '16px 20px', border: `1px solid ${D.coral}`, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 24, fontWeight: 700, color: D.coral, letterSpacing: 0.5 }}>13 BPM OFF</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35 }}>
                Every zone shifted before she takes a step.
              </span>
            </div>
          </div>

          {/* Divider */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textLight, letterSpacing: 1.5, lineHeight: 1 }}>SAME</span>
            <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textLight, letterSpacing: 1.5, lineHeight: 1 }}>FORMULA</span>
            <span style={{ fontSize: 24, color: D.textLight, lineHeight: 1, marginTop: 10 }}>·</span>
          </div>

          {/* HIM */}
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '30px 34px', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <SLabel color={D.textLight}>Him · Lands near his max</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>220 − AGE</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 20 }}>
              <BigStat value="193" label="Formula" valueSize={48} color={D.textSecLight} />
              <span style={{ fontFamily: D.fontSans, fontSize: 26, color: D.textSecLight, marginBottom: 8 }}>vs</span>
              <BigStat value="195" label="Real max" valueSize={72} color={D.textLight} />
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 20, paddingTop: 14, borderTop: `1px solid ${D.borderLight}` }}>
              <BigStat value="158" label="Watch zone-2 ceiling" valueSize={40} color={D.textSecLight} />
              <span style={{ fontFamily: D.fontSans, fontSize: 22, color: D.textSecLight, marginBottom: 6 }}>vs</span>
              <BigStat value="146" label="Lab LT1" valueSize={56} color={D.textLight} />
            </div>
            <div style={{ marginTop: 'auto', padding: '16px 20px', border: `1px solid ${D.coral}`, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 24, fontWeight: 700, color: D.coral, letterSpacing: 0.5 }}>12 BPM HOT</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35 }}>
                Every easy run trained carb-burn instead of the engine.
              </span>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 'auto', padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>
            Built for the average. <span style={{ color: D.coral }}>Nobody is.</span>
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>THE ESTIMATES</span>
        </div>
      </div>
    </Slide>
  );
}

// 03b — TWO DOORS into measured: the lab test (razor, gold standard) and the
// free in-app Complete Test (max-HR protocol → real max + corrected zones).
function S03b_TwoTests({ number, total }) {
  const ways = [
    {
      n: '01', kicker: 'LAB · GOLD STANDARD', title: 'VO₂max + LT1/LT2',
      lede: 'Lab-grade truth.',
      lines: [
        'Berlin lab partner, first trials underway.',
        'Included in Premium, €249/yr.',
      ],
      tag: 'MEASURED · LAB',
    },
    {
      n: '02', kicker: 'COMPLETE TEST · IN-APP', title: 'Max-HR protocol',
      lede: 'Free. Shipped today.',
      lines: [
        'Your real max + corrected zones.',
        'Race week: re-anchors your race pace.',
      ],
      tag: 'MEASURED · IN-APP',
    },
    {
      n: '03', kicker: 'EVERY SESSION · ALWAYS ON', title: 'Learning engine',
      lede: 'Sharpens between tests.',
      lines: [
        'Every session refines your numbers.',
        'Lab and in-app results calibrate the model.',
      ],
      tag: 'ESTIMATED · IMPROVING',
    },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="USP">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.05, margin: 0, color: D.textLight }}>
          Measured right. <span style={{ color: D.textSecLight }}>Then acted on.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 25, fontWeight: 500, marginTop: 20, marginBottom: 0, color: D.textSecLight, maxWidth: 1620, lineHeight: 1.3 }}>
          Three layers nobody else combines: <span style={{ color: D.textLight, fontWeight: 700 }}>lab truth, an in-app test, an engine that learns your body.</span>
        </p>

        <div style={{ flex: 1, marginTop: 30, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {ways.map((d, i) => (
            <div key={i} style={{
              padding: '28px 32px', display: 'flex', flexDirection: 'column', gap: 14,
              borderRight: i < 2 ? `1px solid ${D.borderLight}` : 'none',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{d.n}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>{d.kicker}</span>
              </div>
              <span style={{ fontFamily: D.fontSans, fontSize: 36, fontWeight: 700, color: D.textLight, letterSpacing: -0.8, lineHeight: 1.05 }}>{d.title}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 20, fontWeight: 700, color: i === 2 ? D.coral : D.textSecLight, letterSpacing: -0.2 }}>{d.lede}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
                {d.lines.map((line, j) => (
                  <span key={j} style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>{line}</span>
                ))}
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ paddingTop: 14, borderTop: `1px solid ${D.borderLight}`, fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>
                {d.tag}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 'auto', padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>Software companies won't go physical. Labs won't build the engine. <span style={{ color: D.coral }}>Complete does both.</span></span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>THE USP</span>
        </div>
      </div>
    </Slide>
  );
}

// 03c — The beachhead: who first. Reuses the S06_Wedges row-table skeleton.
function S03c_WhoFirst({ number, total }) {
  const rows = [
    { audience: 'Hyrox athletes', why: 'Can\'t pace stations without their real base. Concentrated at every regional.', demand: 'CIRCUIT' },
    { audience: 'Half-marathon runners', why: 'Race-driven, already paying for entries and coaching. Guessing the base costs them the back half.', demand: 'TWICE A YEAR' },
    { audience: 'Full-marathon runners', why: 'The highest-stakes race on the calendar. One wrong zone burns the taper.', demand: 'ONE SHOT A YEAR' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Beachhead">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.05, margin: 0, color: D.textLight }}>
          Racers first. <span style={{ color: D.textSecLight }}>We know where they are.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, color: D.textSecLight, margin: '20px 0 0 0', letterSpacing: -0.3, maxWidth: 1620, lineHeight: 1.3 }}>
          <span style={{ color: D.textLight, fontWeight: 700 }}>Hybrid athletes</span>: they run, lift, cycle, race. We find them where they race, Hyrox, half marathon, full marathon. <span style={{ color: D.textLight, fontWeight: 700 }}>Concentrated, race-driven, already paying</span>, and none of them can train efficiently without knowing their actual base.
        </p>

        <div style={{ flex: 1, marginTop: 32, display: 'flex', flexDirection: 'column' }}>
          {/* Header */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 2.6fr 0.6fr', gap: 0, borderTop: `1px solid ${D.borderLight}`, borderBottom: `1px solid ${D.borderLight}`, padding: '14px 0', fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>
            <span style={{ paddingLeft: 24 }}>AUDIENCE</span>
            <span>WHY THEY'RE FIRST</span>
            <span>CALENDAR</span>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.2fr 2.6fr 0.6fr', gap: 0, borderBottom: `1px solid ${D.borderLight}`, padding: '28px 0', alignItems: 'center' }}>
              <span style={{ fontFamily: D.fontSans, fontSize: 34, fontWeight: 700, color: D.textLight, letterSpacing: -0.5, paddingLeft: 24 }}>{r.audience}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 21, fontWeight: 500, color: D.textSecLight, letterSpacing: -0.2, lineHeight: 1.35, paddingRight: 24 }}>{r.why}</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 15, fontWeight: 700, color: D.textLight, letterSpacing: 0.6 }}>{r.demand}</span>
            </div>
          ))}
        </div>

        {/* GTM punch */}
        <div style={{ marginTop: 20, padding: '22px 28px', border: `1px solid ${D.borderLight}`, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <SLabel color={D.textLight}>Go-to-market</SLabel>
            <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>EVERY RACE IS A KNOWN CITY, DATE, AND AUDIENCE</span>
          </div>
          <span style={{ fontFamily: D.fontSans, fontSize: 27, fontWeight: 700, fontStyle: 'italic', color: D.textLight, letterSpacing: -0.4 }}>
            "12 weeks to Berlin. Do you know your paces?"
          </span>
          <div style={{ paddingTop: 8, borderTop: `1px solid ${D.borderLight}`, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textLight, letterSpacing: 0.4 }}>€450 PER RACE ENTRY</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 14, color: D.textSecLight }}>·</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textLight, letterSpacing: 0.4 }}>1 TO 3 RACES A YEAR</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 14, color: D.textSecLight }}>·</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textLight, letterSpacing: 0.4 }}>€100/MONTH ON THE GYM</span>
            </div>
            <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 700, color: D.textSecLight, letterSpacing: -0.2, lineHeight: 1.35 }}>
              They already spend <span style={{ color: D.textLight }}>€1,500+ a year</span> on the sport. €249 with a lab test included is the cheapest performance upgrade they can buy.
            </span>
          </div>
          <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>HYPER-TARGETED ADS</span>
            <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>POP-UP TESTING ON THE CALENDAR</span>
            <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>MOBILE RIG TRAVELS TO THE RACES</span>
          </div>
        </div>

        <div style={{ marginTop: 24, padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>
            Every race is a known city, date, and audience. <span style={{ color: D.coral }}>Demand is predictable and geographic.</span>
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>THE BEACHHEAD</span>
        </div>
      </div>
    </Slide>
  );
}

// 09b — Staged plan: "we hit this, then that." Reuses the A4_ProductArc
// staged-table skeleton. Each stage proves one thing before the next spend.
function S09b_StagedPlan({ number, total }) {
  const rows = [
    { phase: 'STAGE 0 · NOW', what: 'Berlin lab partner signed. In-app Complete Test shipped. 76-athlete alpha.', proves: 'People pay for measured.' },
    { phase: 'STAGE 1 · €500K', what: 'Own mobile-capable rig. Berlin base, German race-calendar pop-ups. First hire: health data.', proves: 'Cost per test < revenue per test. Pop-up CAC < LTV.' },
    { phase: 'STAGE 2 · CITY 2', what: 'Same rig, same playbook, new city.', proves: 'The model repeats.' },
    { phase: 'STAGE Z · DESTINATION', what: 'The measured n=1 record becomes the longevity platform. More good years.', proves: 'More good years.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Staged plan">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.05, margin: 0, color: D.textLight }}>
          Not ideas. <span style={{ color: D.textSecLight }}>A sequence.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, color: D.textSecLight, margin: '20px 0 0 0', letterSpacing: -0.3, lineHeight: 1.3 }}>
          Four stages. <span style={{ color: D.textLight, fontWeight: 700 }}>Each one proves a single thing</span> before the next euro moves.
        </p>

        <div style={{ flex: 1, marginTop: 28, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 2.6fr 0.9fr', gap: 0, borderTop: `1px solid ${D.borderLight}`, borderBottom: `1px solid ${D.borderLight}`, padding: '14px 24px', fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>
            <span>STAGE</span>
            <span>WHAT HAPPENS</span>
            <span>PROVES</span>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.2fr 2.6fr 0.9fr', gap: 0, borderBottom: `1px solid ${D.borderLight}`, padding: '38px 24px', alignItems: 'center', background: i === 0 ? '#CFCFCF' : 'transparent' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 22, fontWeight: 700, color: D.textLight, letterSpacing: -0.2 }}>{r.phase}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 23, fontWeight: 500, color: D.textSecLight, letterSpacing: -0.2, lineHeight: 1.35, paddingRight: 24 }}>{r.what}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 700, color: D.textLight, letterSpacing: -0.1, lineHeight: 1.35 }}>{r.proves}</span>
            </div>
          ))}
          <div style={{ flex: 1 }} />
        </div>

        <div style={{ marginTop: 20, padding: '16px 28px', border: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, color: D.textLight, letterSpacing: -0.3 }}>
            Stage 0 is self-funded. <span style={{ color: D.textSecLight }}>€500K unlocks Stage 1, nothing more.</span>
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap' }}>CAPITAL DISCIPLINE, NOT A WISH LIST</span>
        </div>

        <div style={{ marginTop: 24, padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>
            Four stages. <span style={{ color: D.coral }}>Each one proves the next before we spend on it.</span>
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>THE PLAN</span>
        </div>
      </div>
    </Slide>
  );
}

Object.assign(window, { S01c_Average, S03b_TwoTests, S03c_WhoFirst, S09b_StagedPlan });