// Core slides 6–10

// 06 — Three wedges, one engine
function S06_Wedges({ number, total }) {
  const rows = [
    { wedge: 'Races', entry: 'Running, cardio, social races. One adaptable plan.', active: 'NOW' },
    { wedge: 'Know your body', entry: 'Women\'s health, biomarkers, longevity. The deep end.', active: '2026' },
    { wedge: 'Life events', entry: 'Pre-conception, postpartum, healthy aging.', active: '2026' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Wedges">
      <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 }}>
          Three wedges. <span style={{ color: D.textSecLight }}>One long-term goal.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, color: D.textSecLight, margin: '20px 0 0 0', letterSpacing: -0.3, maxWidth: 1560, lineHeight: 1.3 }}>
          Movement gets every body in the door. Health is where it goes deep. <span style={{ color: D.textLight, fontWeight: 700 }}>One engine runs the whole arc.</span>
        </p>

        <div style={{ flex: 1, marginTop: 36, 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 }}>WEDGE</span>
            <span>ENTRY POINT</span>
            <span>ACTIVE</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: '32px 0', alignItems: 'center' }}>
              <span style={{ fontFamily: D.fontSans, fontSize: 38, fontWeight: 700, color: D.textLight, letterSpacing: -0.5, paddingLeft: 24 }}>{r.wedge}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, color: D.textSecLight, letterSpacing: -0.2 }}>{r.entry}</span>
                {r.note ? <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>{r.note}</span> : null}
              </div>
              <span style={{ fontFamily: D.fontMono, fontSize: 24, fontWeight: 700, color: D.textLight, letterSpacing: 0.5 }}>{r.active}</span>
            </div>
          ))}
          <div style={{ flex: 1 }} />
        </div>

        <div style={{ display: 'flex' }}>
          <div style={{ flex: 1, padding: '22px 32px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 16, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap' }}>ONE ENGINE</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 700, letterSpacing: -0.2, whiteSpace: 'nowrap' }}>
              Sport is the entry. n=1 medicine is the goal.
            </span>
          </div>
        </div>
      </div>
    </Slide>
  );
}

// 07 — Six moats, one operating layer
function S07_Moats({ number, total }) {
  const moats = [
    { n: '01', t: 'Founder-market fit', b: 'Lived it two years. Built from my own need.' },
    { n: '02', t: 'Compounding data moat', b: 'Every user is a continuous n=1 experiment. At scale, a data asset no one else can build. The road to n=1 medicine. Engine validated on real users: 10 archetypes, 0 plan violations.' },
    { n: '03', t: 'Social, day one', b: 'Late social bolt-ons fail. We ship it day one: friend challenges, $COMPLETE-staked bets, leaderboards.' },
    { n: '04', t: 'HealthKit-native', b: 'Hardware-agnostic. Sits above WHOOP, Oura, Garmin, Coros.' },
    { n: '05', t: 'Always-on Roads', b: 'Most apps churn after the race. Roads keeps users coming back. Progression that compounds into decades of retention.' },
    { n: '06', t: 'Team-size collapse', b: '3–5 person AI-native team ships at 100-person scope.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Moats">
      <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 }}>
          Six moats. <span style={{ color: D.textSecLight }}>One operating layer.</span>
        </h1>

        <div style={{ flex: 1, marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: '1fr 1fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {moats.map((m, i) => (
            <div key={i} style={{
              padding: '28px 30px', display: 'flex', flexDirection: 'column', gap: 14,
              borderRight: i % 3 !== 2 ? `1px solid ${D.borderLight}` : 'none',
              borderBottom: i < 3 ? `1px solid ${D.borderLight}` : 'none',
            }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{m.n}</span>
              <div style={{ flex: 1 }} />
              <span style={{ fontFamily: D.fontSans, fontSize: 32, fontWeight: 700, color: D.textLight, letterSpacing: -0.5, lineHeight: 1.05 }}>{m.t}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>{m.b}</span>
              <div style={{ flex: 1 }} />
            </div>
          ))}
        </div>
      </div>
    </Slide>
  );
}

// 08 — Competition: pure defensibility. They estimate, off wrist HR and
// formulas. Every Complete athlete gets measured, in a lab or the free
// in-app test. (Endgame/vision column moved to the Why-Now slide.)
function S08_Competition({ number, total }) {
  const rivals = [
    { n: 'WHOOP', tag: 'ESTIMATE', b: 'Wrist HR and a recovery score. Zones inferred, never tested.' },
    { n: 'OURA', tag: 'ESTIMATE', b: 'Ring HRV and sleep. No load test, no lactate, no VO₂max.' },
    { n: 'APPLE WATCH', tag: 'ESTIMATE', b: 'VO₂max modeled from pace and HR. A formula standing in for a test.' },
    { n: 'COMPLETE', tag: 'MEASURED', b: 'Lab VO₂max and LT1/LT2, or the free in-app test. Every athlete, measured.', accent: true },
  ];
  const moats = [
    { n: '01', t: 'The calibration moat', b: 'Every tested athlete, lab or in-app, feeds the engine. The data moat compounds with every test, not just every login.' },
    { n: '02', t: 'Physical + software', b: 'Software companies won\'t go physical. Labs won\'t build the coaching software. Complete does both.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Defensibility">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32 }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.05, margin: 0, color: D.textLight }}>
            They estimate. <span style={{ color: D.textSecLight }}>We measure.</span>
          </h1>
          <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap', textAlign: 'right', paddingBottom: 6 }}>
            WRIST HR + FORMULA vs LAB OR IN-APP TEST
          </span>
        </div>

        <p style={{ fontFamily: D.fontSans, fontSize: 26, fontWeight: 500, color: D.textSecLight, margin: '16px 0 0 0', letterSpacing: -0.4, maxWidth: 1700, lineHeight: 1.25 }}>
          Whoop, Oura, and Apple infer your zones from wrist HR and population formulas. Deviate from the average and the number is a guess. <span style={{ color: D.textLight, fontWeight: 700 }}>Every Complete athlete gets measured.</span>
        </p>

        {/* Competitor row — estimate vs measured */}
        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {rivals.map((r, i) => (
            <div key={i} style={{
              padding: '32px 28px', display: 'flex', flexDirection: 'column', gap: 14,
              borderRight: i !== 3 ? `1px solid ${D.borderLight}` : 'none',
              background: r.accent ? D.textLight : 'transparent',
            }}>
              <span style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 700, color: r.accent ? D.coral : D.textLight, letterSpacing: -0.3 }}>{r.n}</span>
              <span style={{
                fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase',
                color: r.accent ? D.textLight : D.textSecLight,
              }}>{r.tag}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: r.accent ? D.bgLight : D.textSecLight, lineHeight: 1.45 }}>{r.b}</span>
            </div>
          ))}
        </div>

        {/* Blueprint jab */}
        <div style={{ marginTop: 28, padding: '28px 32px', border: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 28 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 25, fontWeight: 700, color: D.textLight, letterSpacing: -0.3, maxWidth: 1450, lineHeight: 1.35 }}>
            Bryan Johnson's Blueprint is the average of one man, <span style={{ color: D.textSecLight, fontWeight: 500 }}>his</span>, sold to everyone. Complete is a protocol for <span style={{ color: D.textSecLight, fontWeight: 500 }}>your</span> body. n=1, not his n=1.
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap' }}>BLUEPRINT</span>
        </div>

        {/* Top moats — flex:1, absorbs the remaining space so the footer sits flush */}
        <div style={{ flex: 1, marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {moats.map((m, i) => (
            <div key={i} style={{
              padding: '36px 34px', display: 'flex', flexDirection: 'column', gap: 16,
              borderRight: i !== 1 ? `1px solid ${D.borderLight}` : 'none',
            }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{m.n}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 36, fontWeight: 700, color: D.textLight, letterSpacing: -0.6, lineHeight: 1.1 }}>{m.t}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 19, fontWeight: 500, color: D.textSecLight, lineHeight: 1.45 }}>{m.b}</span>
              <span style={{ flex: 1 }} />
            </div>
          ))}
        </div>

        {/* Black footer — the mission statement */}
        <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.2 }}>n=1 medicine, measured, not modeled.</span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>DEFENSIBILITY</span>
        </div>
      </div>
    </Slide>
  );
}

// 09 — Traction
function S09_Traction({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="Problem validation">
      <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 }}>
          Problem validation.
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 40, fontWeight: 500, lineHeight: 1.1, margin: '14px 0 0 0', color: D.textSecLight, letterSpacing: -0.6, whiteSpace: 'nowrap' }}>
          31 actives, ~4×/week. 2,700+ sessions in 90 days. 76 total.
        </p>

        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {[
            { n: '31', l: 'athletes actively training', s: 'last 30 days' },
            { n: '2,700+', l: 'sessions', s: 'last 90 days' },
            { n: '~4', l: 'sessions per week', s: 'per active' },
            { n: '76', l: 'signed up', s: 'total cohort' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '28px 26px', display: 'flex', flexDirection: 'column', gap: 10,
              borderRight: i !== 3 ? `1px solid ${D.borderLight}` : 'none',
            }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 88, fontWeight: 700, color: D.textLight, lineHeight: 0.9, letterSpacing: -3 }}>{s.n}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 700, color: D.textLight, textTransform: 'uppercase', letterSpacing: 0.8 }}>{s.l}</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 12, color: D.textSecLight, letterSpacing: 0.6, textTransform: 'uppercase' }}>{s.s}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 16, fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>
          ACTIVES AVERAGE ~4 SESSIONS PER WEEK · 0 PAYING BY DESIGN · DEPTH OVER HEADCOUNT
        </div>

        <div style={{ marginTop: 16, 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.2 }}>
            First Berlin lab partner signed <span style={{ color: D.textSecLight, fontWeight: 500 }}>· first athlete tests underway</span> · in talks with additional labs · founder tested, zones corrected.
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap' }}>TESTING TRACTION</span>
        </div>

        <div style={{ flex: 1, marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 2.4fr', gap: 24 }}>
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '24px 28px', display: 'flex', flexDirection: 'column', gap: 14 }}>
            <SLabel color={D.textLight}>Launch gate</SLabel>
            <p style={{ margin: 0, fontFamily: D.fontSans, fontSize: 20, fontWeight: 500, lineHeight: 1.35, color: D.textLight, letterSpacing: -0.2 }}>
              Public launch gated on truly n=1: the system handles each user's training journey <em style={{ fontStyle: 'italic' }}>without me in the loop</em>. Inside a month.
            </p>
            <div style={{ flex: 1 }} />
            <Sparkline color={D.textLight} width={400} height={48} data={[80, 96, 112, 105, 128, 140, 134, 158, 176, 168, 192, 205, 222]} />
            <span style={{ fontFamily: D.fontMono, fontSize: 11, color: D.textSecLight, letterSpacing: 0.6 }}>WEEKLY ACTIVE SESSIONS · MAR 23 → JUN 16</span>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', border: `1px solid ${D.borderLight}` }}>
            <div style={{ padding: '12px 22px', borderBottom: `1px solid ${D.borderLight}`, fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 1.2, textTransform: 'uppercase' }}>
              Patterns we see · 3 of many · 70-athlete cohort
            </div>
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0 }}>
              {[
                {
                  label: 'ARCHETYPE · Hybrid athlete',
                  stats: [
                    { v: '168', s: 44, l: 'HEALTHKIT SESSIONS' },
                    { v: '17/22', s: 44, l: 'WEEKS AT 3+ SESSIONS' },
                  ],
                  caption: 'Multi-sport training arc. Live on alpha since April 2026.',
                },
                {
                  label: 'ARCHETYPE · Cycle-aware woman',
                  stats: [
                    { v: '57', s: 44, l: 'COMPLETE SESSIONS' },
                    { v: '6 / 6', s: 44, l: 'WEEKS ACTIVE' },
                  ],
                  caption: 'Schedules training around her luteal phase. One of the surfaces Complete goes deepest on. Male-skewed studies skip it entirely.',
                },
                {
                  label: 'ARCHETYPE · 50+ healthspan',
                  stats: [
                    { v: '62', s: 44, l: 'HEALTHKIT SESSIONS' },
                    { v: '14', s: 44, l: 'SUPPLEMENTS TRACKED' },
                  ],
                  caption: 'Late entry to the bundling decade. Complete reads HealthKit history and tracks the supplement stack. Whole-body n=1 over averages.',
                },
              ].map((card, ci) => (
                <div key={ci} style={{
                  padding: '22px 24px', display: 'flex', flexDirection: 'column', gap: 12,
                  borderRight: ci < 2 ? `1px solid ${D.borderLight}` : 'none',
                }}>
                  <SLabel color={D.textLight}>{card.label}</SLabel>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 4 }}>
                    {card.stats.map((st, si) => (
                      <div key={si} style={{ display: 'flex', flexDirection: 'column' }}>
                        <div style={{ display: 'flex', alignItems: 'flex-end', height: 44, lineHeight: 1 }}>
                          <span style={{ fontFamily: D.fontMono, fontSize: st.s, fontWeight: 700, color: D.textLight, letterSpacing: st.s >= 40 ? -2 : -0.4, whiteSpace: 'nowrap' }}>{st.v}</span>
                        </div>
                        <div style={{ fontFamily: D.fontMono, fontSize: 10, color: D.textSecLight, letterSpacing: 0.6, marginTop: 8, whiteSpace: 'nowrap' }}>{st.l}</div>
                      </div>
                    ))}
                  </div>
                  <div style={{ flex: 1 }} />
                  <span style={{ fontFamily: D.fontSans, fontSize: 14, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4, letterSpacing: -0.1 }}>
                    {card.caption}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Slide>
  );
}

// 08 — Economics: THE MONEY MACHINE. Unit economics on the bundled lab test,
// plus the race-cycle multiplier that pegs repeat testing to the race calendar.
function S08_Economics({ number, total }) {
  const cols = [
    { k: 'STANDALONE LAB TEST', price: '€250', ps: 72, sub: 'Going rate. One visit. No plan, no follow-up.' },
    { k: 'AT-HOME TREADMILL KIT', price: '€150', ps: 84, sub: 'A guess in a box. Junk.' },
    { k: 'COMPLETE PREMIUM', price: '€249', ps: 96, sub: 'Per year. Lab test included, plus the whole engine.', accent: true },
  ];
  const unitEcon = [
    { k: 'COST PER TEST', k2: 'PARTNER REV-SHARE', v: '€100', tag: 'WORKING ASSUMPTION · €90–120 RANGE' },
    { k: 'PREMIUM PRICE', k2: 'PER YEAR, INCL. ONE TEST', v: '€249', tag: null },
    { k: 'PAYBACK', k2: 'VS. AVG. STANDALONE TEST', v: 'DAY 1', tag: null },
    { k: 'TEST → PREMIUM', k2: 'CONVERSION', v: '25%', tag: 'WORKING ASSUMPTION · CONSERVATIVE' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Money machine">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32 }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.05, margin: 0, color: D.textLight }}>
            The money <span style={{ color: D.textSecLight }}>machine.</span>
          </h1>
          <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap', paddingBottom: 6 }}>
            RESULTS, NOT THESIS
          </span>
        </div>

        <p style={{ fontFamily: D.fontSans, fontSize: 25, fontWeight: 500, color: D.textSecLight, margin: '14px 0 0 0', letterSpacing: -0.4, maxWidth: 1700, lineHeight: 1.25 }}>
          A standalone VO₂max and lactate test goes for €250. Complete Premium is <span style={{ color: D.textLight, fontWeight: 700 }}>€249 a year, and the test is included.</span> Function Health did this for blood. We do it for performance.
        </p>

        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {cols.map((c, i) => (
            <div key={i} style={{
              padding: '18px 24px', display: 'flex', flexDirection: 'column', gap: 8,
              borderRight: i !== 2 ? `1px solid ${D.borderLight}` : 'none',
              background: c.accent ? D.textLight : 'transparent',
            }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: c.accent ? D.coral : D.textSecLight, letterSpacing: 1 }}>{c.k}</span>
              <div style={{ height: 84, marginTop: 4, display: 'flex', alignItems: 'flex-end' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: c.ps, fontWeight: 700, color: c.accent ? D.coral : D.textLight, lineHeight: 0.9, letterSpacing: -2 }}>{c.price}</span>
              </div>
              <span style={{ marginTop: 6, fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, color: c.accent ? D.bgLight : D.textSecLight, lineHeight: 1.35 }}>{c.sub}</span>
            </div>
          ))}
        </div>

        {/* Unit economics — labeled working assumptions */}
        <div style={{ marginTop: 16 }}>
          <SLabel color={D.textLight}>Unit economics · per tested athlete</SLabel>
          <div style={{ marginTop: 8, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
            {unitEcon.map((u, i) => (
              <div key={i} style={{
                padding: '14px 20px', display: 'flex', flexDirection: 'column', gap: 4,
                borderRight: i !== 3 ? `1px solid ${D.borderLight}` : 'none',
              }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.7 }}>{u.k}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 10, color: D.textTer, letterSpacing: 0.5 }}>{u.k2}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 42, fontWeight: 700, color: D.textLight, letterSpacing: -1.2, lineHeight: 1, marginTop: 2 }}>{u.v}</span>
                {u.tag && (
                  <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.coral, letterSpacing: 0.5, textTransform: 'uppercase', marginTop: 2 }}>{u.tag}</span>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Race-cycle multiplier */}
        <div style={{ marginTop: 12, padding: '14px 24px', border: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 28 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, maxWidth: 1260 }}>
            <SLabel color={D.textLight}>Race-cycle multiplier</SLabel>
            <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, color: D.textSecLight, lineHeight: 1.3 }}>
              Testing pegs to the race calendar. One lab test per training block, the free in-app test re-anchors race pace. An athlete racing 2–3 times a year keeps coming back.
            </span>
          </div>
          <span style={{ fontFamily: D.fontMono, fontSize: 44, fontWeight: 700, color: D.textLight, letterSpacing: -1.2, whiteSpace: 'nowrap' }}>2–3×/YR</span>
        </div>

        <div style={{ flex: 1 }} />

        <div style={{ marginTop: 16, padding: '16px 28px', border: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 20, fontWeight: 700, color: D.textLight, letterSpacing: -0.3 }}>
            Every Berlin facility we called: <span style={{ color: D.textSecLight, fontWeight: 500 }}>booked out for months. €250 for a PDF and no plan.</span>
          </span>
          <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap' }}>REAL DEMAND · TODAY · BEFORE WE SCALE IT</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 }}>The test alone costs more than a year of Complete.</span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>MONEY MACHINE</span>
        </div>
      </div>
    </Slide>
  );
}

// 10 — Ask
function S10_Ask({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="Ask">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <h1 style={{ fontFamily: D.fontSans, fontSize: 88, fontWeight: 700, letterSpacing: -3, lineHeight: 1.05, margin: 0, color: D.textLight }}>
            €500K <span style={{ color: D.textSecLight }}>on a SAFE.</span>
          </h1>
          <div style={{ textAlign: 'right', fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8, lineHeight: 1.7 }}>
            <div style={{ color: D.textLight }}>SAFE · €500K · ANGEL ROUND</div>
            <div style={{ color: D.coral }}>€50K SOFT-COMMITTED · RAISE OPENS AUG 2026</div>
            <div style={{ color: D.textLight }}>24 MONTHS + FIRST HIRE</div>
            <div>VALUED AT NEXT PRICED ROUND · TRACTION, NOT TOKEN</div>
            <div>TODAY · €0 BURN · SELF-FUNDED → ~€20.8K / MO · 24 MO</div>
          </div>
        </div>

        <p style={{ fontFamily: D.fontSans, fontSize: 26, fontWeight: 500, margin: '22px 0 0 0', color: D.textSecLight, letterSpacing: -0.2, maxWidth: 1620 }}>
          24 months to prove the wedge in Berlin, <span style={{ color: D.textLight, fontWeight: 700 }}>plus the first hire: a health-data and medicine lead.</span> Candidates already being scoped.
        </p>

        <div style={{ flex: 1, marginTop: 18, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
          {/* The round */}
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '18px 22px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <SLabel color={D.textLight}>The round</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, color: D.textSecLight, letterSpacing: 0.6 }}>SAFE</span>
            </div>
            {/* Round status: soft commits in, lead open — rebuilt 2026-07-17 per Paul */}
            <div style={{ marginTop: 14, paddingBottom: 12, borderBottom: `1px solid ${D.borderLight}`, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 56, fontWeight: 700, color: D.coral, letterSpacing: -2, lineHeight: 0.9 }}>€50K</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>ANGEL SOFT COMMITS · IN</span>
            </div>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
              {[
                ['Lead', 'Looking for the lead to close it out.'],
                ['Timeline', 'Raise process opens August 2026 — incorporation with it.'],
                ['Structure', 'SAFE, valued at the next priced round.'],
              ].map(([k, v], i, arr) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '10px 0', borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${D.borderLight}` }}>
                  <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{k.toUpperCase()}</span>
                  <div style={{ marginTop: 4, fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, color: D.textLight, lineHeight: 1.3, letterSpacing: -0.1 }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${D.borderLight}`, fontFamily: D.fontMono, fontSize: 11, color: D.textSecLight, letterSpacing: 0.5 }}>
              €5.99/WK · €14.99/MO · €99/YR · €249 PREMIUM (INCL. TEST) · STOREKIT 2
            </div>
          </div>

          {/* Burn math: €500K over 24 months, drafted line items */}
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '18px 22px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <SLabel color={D.textLight}>Monthly burn</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.coral, letterSpacing: 0.6 }}>WORKING ASSUMPTIONS</span>
            </div>

            {/* Today row */}
            <div style={{ marginTop: 12, padding: '8px 0', borderTop: `1px solid ${D.borderLight}`, borderBottom: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>TODAY · SELF-FUNDED</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 20, fontWeight: 700, color: D.textLight, letterSpacing: -0.4 }}>€0</span>
            </div>

            <div style={{ marginTop: 12, fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>RAISE · €500K / 24 MO · AVERAGE MONTHLY</div>

            <div style={{ marginTop: 4, display: 'flex', flexDirection: 'column' }}>
              {[
                ['Founder', '€4.5K'],
                ['First hire, health data', '€5.5K'],
                ['Product / contract', '€3.5K'],
                ['Testing ops', '€2.5K'],
                ['Marketing + race pop-ups', '€3.0K'],
                ['Infra / tools', '€1.0K'],
                ['Legal / misc', '€0.8K'],
              ].map(([k, v], i, arr) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${D.borderLight}`, fontFamily: D.fontSans, fontSize: 13, fontWeight: 500, color: D.textLight, letterSpacing: -0.1 }}>
                  <span style={{ color: D.textSecLight }}>{k}</span>
                  <span style={{ fontFamily: D.fontMono, fontWeight: 700 }}>{v}</span>
                </div>
              ))}
            </div>

            <div style={{ flex: 1 }} />
            <div style={{ marginTop: 12, paddingTop: 10, borderTop: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 11, color: D.textSecLight, letterSpacing: 0.6 }}>~€20.8K / MO · 24 MO =</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 20, fontWeight: 700, color: D.textLight, letterSpacing: -0.4 }}>€500K</span>
            </div>
            <div style={{ marginTop: 6, fontFamily: D.fontSans, fontSize: 11, fontStyle: 'italic', color: D.textSecLight, letterSpacing: -0.1 }}>
              Line items are working assumptions, not commitments.
            </div>
          </div>

          {/* Use of funds — the rig + race pop-ups + lean ops */}
          <div style={{ border: `1px solid ${D.borderLight}`, padding: '18px 22px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <SLabel color={D.textLight}>Use of funds</SLabel>
              <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.coral, letterSpacing: 0.8 }}>WORKING ASSUMPTIONS</span>
            </div>
            <div style={{ marginTop: 12, flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                ['01', 'Mobile testing rig', '~€20–25K one-off, inside the raise. A VO₂max + LT rig that travels Germany\'s race calendar.'],
                ['02', 'First hire: health data / medicine', 'Builds the measurement-to-protocol systems.'],
                ['03', 'Race pop-up program', 'Testing stations at start lines, pegged to the race calendar. Where the free in-app test meets the paid lab upsell.'],
                ['04', 'Lean ops, 24 months', 'Founder-led, plus the first hire. Product, testing ops, and distribution run lean.'],
              ].map(([n, t, b], i) => (
                <div key={i} style={{ flex: 1, display: 'grid', gridTemplateColumns: '24px 1fr', gap: 8, padding: '8px 0', borderBottom: `1px solid ${D.borderLight}`, alignItems: 'center' }}>
                  <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{n}</span>
                  <div>
                    <div style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 700, color: D.textLight, letterSpacing: -0.2 }}>{t}</div>
                    <div style={{ fontFamily: D.fontSans, fontSize: 13, color: D.textSecLight, lineHeight: 1.35 }}>{b}</div>
                  </div>
                </div>
              ))}
              <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, fontStyle: 'italic', color: D.textSecLight, letterSpacing: -0.1, paddingTop: 4 }}>
                A small round is easier to fill.
              </span>
            </div>
          </div>
        </div>

        {/* Footer: closer + links + QR */}
        <div style={{ marginTop: 22, paddingTop: 16, borderTop: `1px solid ${D.borderLight}`, display: 'grid', gridTemplateColumns: '1.5fr 1fr 0.55fr', gap: 24, alignItems: 'center' }}>
          <div style={{ fontFamily: D.fontSans, fontSize: 22, fontWeight: 700, color: D.textLight, letterSpacing: -0.3, lineHeight: 1.2 }}>
            Movement is the lever. Healthy life is the outcome. Complete is the system.
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-end' }}>
            <a href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ0G0PuMUD60aD8HnnMzGmHmGwurTc2E6NFbseJjDFqFxLhJOhzwQCj-g9qi_VMlthf8CMmSHzfH" style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textLight, letterSpacing: 0.8, textDecoration: 'none', borderBottom: `1px solid ${D.textLight}`, paddingBottom: 2 }}>BOOK A MEETING →</a>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <QRPlaceholder size={110} dark={false} label={false} value="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ0G0PuMUD60aD8HnnMzGmHmGwurTc2E6NFbseJjDFqFxLhJOhzwQCj-g9qi_VMlthf8CMmSHzfH" />
          </div>
        </div>
      </div>
    </Slide>
  );
}

Object.assign(window, { S06_Wedges, S07_Moats, S08_Competition, S08_Economics, S09_Traction, S10_Ask });