// Restless Egg — compact slide layer.
// Deck-specific variants for slides 2–10. Same Protocol V.01 visual system as
// the V.04 deck (zero radius, 1px borders, SF Pro / SF Mono, coral accent), but
// each slide carries ONE claim and lets big numbers or a screenshot do the work.
// The full V.04 slides stay untouched in CoreSlides / CoreSlides2 / AppendixSlides / V04Slides.
// Loaded after those files, so all primitives (Slide, BigStat, SLabel, PhoneFrame…) exist on window.

// Local phone frame with a settable height + optional coral accent (the shared
// PhoneFrame is locked to h=540). Same bezel treatment, top-cropped screenshot.
function REPhone({ src, h = 560, accent = false }) {
  const w = Math.round(h * 9 / 19.5);
  return (
    <div style={{
      width: w, height: h, background: '#000', padding: 6,
      border: `${accent ? 2 : 1}px solid ${accent ? D.coral : D.borderLight}`,
      position: 'relative', overflow: 'hidden', boxSizing: 'border-box',
    }}>
      <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block', background: '#E4E4E4' }} />
    </div>
  );
}

// Shared dark closing band (one line + a mono tag). Matches the V.04 slides.
function REBand({ children, tag }) {
  return (
    <div style={{ marginTop: 'auto', padding: '26px 36px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
      <span style={{ fontFamily: D.fontSans, fontSize: 26, fontWeight: 700, letterSpacing: -0.4 }}>{children}</span>
      {tag && <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>{tag}</span>}
    </div>
  );
}

function REHead({ children, kicker }) {
  return (
    <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.0, margin: 0, color: D.textLight }}>{children}</h1>
      {kicker && <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap', paddingBottom: 8 }}>{kicker}</span>}
    </div>
  );
}

function RESub({ children }) {
  return (
    <p style={{ fontFamily: D.fontSans, fontSize: 25, fontWeight: 500, margin: '20px 0 0 0', color: D.textSecLight, maxWidth: 1680, lineHeight: 1.3, letterSpacing: -0.3 }}>{children}</p>
  );
}

// ── 02 · The average ────────────────────────────────────────────────────────
// One claim: every zone you train starts from an estimate.
function RE_Average({ number, total }) {
  const cols = [
    { who: 'HER · AGE 28', formula: '192', real: '205', off: '13 BPM OFF' },
    { who: 'HIM · NEAR MAX', formula: '146', real: '158', off: '12 BPM HOT', note: 'Lab LT1 vs watch zone-2 ceiling' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="The average">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <REHead kicker="EVERY APP · EVERY WEARABLE">Everyone guesses the average.</REHead>
        <RESub>Every fitness app and wearable sets your training zones from one formula: 220 minus your age. It is tuned to a body that does not exist. Everyone is an n of one, and their training and longevity stack should be too.</RESub>

        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {cols.map((c, i) => (
            <div key={i} style={{ padding: '40px 44px', display: 'flex', flexDirection: 'column', gap: 20, borderRight: i === 0 ? `1px solid ${D.borderLight}` : 'none' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 15, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{c.who}</span>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 32 }}>
                <BigStat value={c.formula} label="Formula" valueSize={100} color={D.textSecLight} />
                <span style={{ fontFamily: D.fontSans, fontSize: 44, color: D.textSecLight, marginBottom: 20 }}>→</span>
                <BigStat value={c.real} label="Real number" valueSize={168} color={D.textLight} />
              </div>
              <span style={{ fontFamily: D.fontMono, fontSize: 30, fontWeight: 700, color: D.coral, letterSpacing: 0.5 }}>{c.off}</span>
              {c.note && <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 500, color: D.textSecLight }}>{c.note}</span>}
            </div>
          ))}
        </div>

        <REBand tag="THE AVERAGE">Built for the average. Nobody is.</REBand>
      </div>
    </Slide>
  );
}

// ── 03 · Problem ─────────────────────────────────────────────────────────────
// One claim: four devices, one body, four VO₂max answers. Only the lab is real.
function RE_Problem({ number, total }) {
  const reads = [
    { v: '59', d: 'WHOOP' },
    { v: '55', d: 'COROS' },
    { v: '54', d: 'APPLE WATCH' },
    { v: '61.3', d: 'LAB TEST', lab: true },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Problem">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <REHead kicker="VO₂MAX · SAME BODY · SAME WEEK">One body. Four answers.</REHead>
        <RESub>My own VO₂max, same week, read four ways. Wearables guess. Only the lab measures. And VO₂max is the strongest single predictor of how long you live.</RESub>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {reads.map((r, i) => (
            <div key={i} style={{ padding: '44px 40px', display: 'flex', flexDirection: 'column', gap: 14, borderRight: i !== 3 ? `1px solid ${D.borderLight}` : 'none', background: r.lab ? D.textLight : 'transparent' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 150, fontWeight: 700, lineHeight: 0.85, letterSpacing: -6, color: r.lab ? D.coral : D.textLight }}>{r.v}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', color: r.lab ? D.bgLight : D.textSecLight }}>{r.d}</span>
            </div>
          ))}
        </div>

        <REBand tag="WE MEASURE">The number that fixes your training is also your clearest longevity marker.</REBand>
      </div>
    </Slide>
  );
}

// ── 04 · USP ─────────────────────────────────────────────────────────────────
// One claim: three measurement layers nobody else combines (aligned to main V.04 pass 6).
function RE_TwoTests({ number, total }) {
  const doors = [
    { n: 'IN THE LAB', title: 'VO₂max + LT1/LT2', lines: ['Gold-standard lab test.', 'Included in Premium.', 'Berlin partner, trials underway.'], tag: 'MEASURED · DEEP' },
    { n: 'IN THE APP', title: 'Complete Test', lines: ['Max-HR protocol, real zones.', 'Free, shipped today.', 'Re-anchors pace on race week.'], tag: 'FREE · LIVE NOW' },
    { n: 'EVERY SESSION', title: 'Learning engine', lines: ['Every session refines your numbers.', 'Tests calibrate the model.', 'Sharpens between tests.'], tag: 'ALWAYS ON' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="USP">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <REHead>We never stop measuring.</REHead>
        <RESub>Three layers nobody else combines: lab truth, an in-app test, and an engine that learns your body.</RESub>

        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {doors.map((d, i) => (
            <div key={i} style={{ padding: '38px 40px', display: 'flex', flexDirection: 'column', gap: 16, borderRight: i < 2 ? `1px solid ${D.borderLight}` : 'none' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 15, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{d.n}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 42, fontWeight: 700, color: D.textLight, letterSpacing: -1, lineHeight: 1.0 }}>{d.title}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 }}>
                {d.lines.map((l, j) => (
                  <span key={j} style={{ fontFamily: D.fontSans, fontSize: 20, fontWeight: 500, color: D.textSecLight, lineHeight: 1.3 }}>{l}</span>
                ))}
              </div>
              <span style={{ marginTop: 12, paddingTop: 16, borderTop: `1px solid ${D.borderLight}`, fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>{d.tag}</span>
            </div>
          ))}
        </div>

        <REBand tag="THE USP">Software companies won't go physical. Labs won't build the engine. Complete does both.</REBand>
      </div>
    </Slide>
  );
}

// ── 05 · Product · live ──────────────────────────────────────────────────────
// One claim: a live, working iOS app — with a real social layer people post to.
function RE_ProductLive({ number, total }) {
  // Full-width filmstrip: the whole app in one row, Social as the coral lead.
  const phones = [
    { src: 'assets/re-social.png', label: 'Social', accent: true },
    { src: 'assets/re-plan.png', label: 'Training Plan' },
    { src: 'assets/re-coach.png', label: 'Coach' },
    { src: 'assets/re-progress.png', label: 'Progress' },
    { src: 'assets/re-profile.png', label: 'You' },
    { src: 'assets/re-leaderboard.png', label: 'Leaderboard' },
    { src: 'assets/re-vo2ladder.png', label: 'VO₂max' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Product · live">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <REHead kicker="iOS · TESTFLIGHT · WORKING APP">Live on TestFlight today.</REHead>
        <RESub>Used daily by a friends-and-family alpha: personalised training, an AI coach, progress and longevity tracking, and a real social feed they post to.</RESub>

        <div style={{ flex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 18 }}>
          {phones.map((p, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <REPhone src={p.src} h={496} accent={p.accent} />
              <div style={{ width: '100%', borderTop: `1px solid ${p.accent ? D.coral : D.borderLight}`, paddingTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textLight, letterSpacing: 0.8, textTransform: 'uppercase' }}>{p.label}</span>
                {p.accent && <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.coral, letterSpacing: 0.6 }}>LIVE</span>}
              </div>
            </div>
          ))}
        </div>

      </div>
    </Slide>
  );
}

// ── 06 · Traction ────────────────────────────────────────────────────────────
// One claim: small alpha, deep usage, testing underway.
function RE_Traction({ number, total }) {
  const stats = [
    { n: '31', l: 'active athletes', s: 'last 30 days' },
    { n: '2,700+', l: 'sessions logged', s: 'last 90 days' },
    { n: '~4', l: 'sessions per week', s: 'per active, median' },
    { n: '76', l: 'signed up', s: 'invite-only alpha' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Traction">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <REHead kicker="FRIENDS & FAMILY · 0 PAYING BY DESIGN">Small alpha. Deep usage.</REHead>
        <RESub>A friends-and-family alpha of 76, no paid marketing. The active core trains four times a week across cardio, strength, and sport.</RESub>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {stats.map((s, i) => (
            <div key={i} style={{ padding: '40px 36px', display: 'flex', flexDirection: 'column', gap: 14, borderRight: i !== 3 ? `1px solid ${D.borderLight}` : 'none' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 120, fontWeight: 700, color: D.textLight, lineHeight: 0.85, letterSpacing: -5 }}>{s.n}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 20, fontWeight: 700, color: D.textLight, textTransform: 'uppercase', letterSpacing: 0.6 }}>{s.l}</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 14, color: D.textSecLight, letterSpacing: 0.6, textTransform: 'uppercase' }}>{s.s}</span>
            </div>
          ))}
        </div>

        <REBand tag="TESTING TRACTION">First Berlin lab partner signed. First athlete tests underway.</REBand>
      </div>
    </Slide>
  );
}

// ── 07 · Beachhead ───────────────────────────────────────────────────────────
// One claim: hybrid racers first, reached on the race calendar, already spending.
function RE_WhoFirst({ number, total }) {
  const rows = [
    { a: 'Hyrox athletes', c: 'CIRCUIT' },
    { a: 'Half-marathon runners', c: 'TWICE A YEAR' },
    { a: 'Full-marathon runners', c: 'ONE SHOT A YEAR' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Beachhead">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <REHead kicker="KNOWN CITY · DATE · AUDIENCE">Racers first.</REHead>
        <RESub>Hybrid athletes run, lift, and race. We reach them on the race calendar, and none can train right without their real base.</RESub>

        <div style={{ marginTop: 40, display: 'flex', gap: 32, alignItems: 'stretch' }}>
          <div style={{ flex: 1.4, display: 'flex', flexDirection: 'column', border: `1px solid ${D.borderLight}` }}>
            {rows.map((r, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '30px 36px', borderBottom: i !== rows.length - 1 ? `1px solid ${D.borderLight}` : 'none' }}>
                <span style={{ fontFamily: D.fontSans, fontSize: 44, fontWeight: 700, color: D.textLight, letterSpacing: -0.8 }}>{r.a}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 17, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.6 }}>{r.c}</span>
              </div>
            ))}
          </div>
          <div style={{ flex: 1, border: `1px solid ${D.borderLight}`, padding: '32px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16 }}>
            <SLabel color={D.textLight}>Already spending</SLabel>
            <span style={{ fontFamily: D.fontMono, fontSize: 118, fontWeight: 700, color: D.textLight, lineHeight: 0.85, letterSpacing: -5 }}>€1,500+</span>
            <span style={{ fontFamily: D.fontSans, fontSize: 21, fontWeight: 500, color: D.textSecLight, lineHeight: 1.3 }}>a year on entries, coaching, and the gym. Complete is the cheapest upgrade they can buy.</span>
          </div>
        </div>

        <div style={{ marginTop: 24, padding: '18px 28px', border: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: D.fontMono, fontSize: 15, fontWeight: 700, color: D.textLight, letterSpacing: 0.4 }}><span style={{ color: D.coral }}>650K+</span> HYROX ATHLETES · 24/25 SEASON</span>
          <span style={{ fontFamily: D.fontMono, fontSize: 15, fontWeight: 700, color: D.textLight, letterSpacing: 0.4 }}><span style={{ color: D.coral }}>1.1M+</span> LONDON MARATHON BALLOT ENTRIES · WORLD RECORD</span>
          <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>DEMAND OUTRUNS THE START LINE</span>
        </div>

        <REBand tag="THE BEACHHEAD">"12 weeks to Berlin. Do you know your paces?"</REBand>
      </div>
    </Slide>
  );
}

// ── 08 · Economics ───────────────────────────────────────────────────────────
// One claim: the standalone test alone costs more than a year of Complete.
function RE_Economics({ number, total }) {
  const cols = [
    { k: 'STANDALONE LAB TEST', price: '€250', sub: 'Going rate. One visit. A PDF, no plan.', accent: false },
    { k: 'COMPLETE PREMIUM', price: '€249', sub: 'Per year. One lab test included, plus the whole app.', accent: true },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Economics">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <REHead kicker="BERLIN LAB PARTNER">The test costs more than the app.</REHead>
        <RESub>A standalone VO₂max and lactate test goes for €250. Complete Premium is €249 a year, one lab test included.</RESub>

        <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {cols.map((c, i) => (
            <div key={i} style={{ padding: '36px 44px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16, borderRight: i === 0 ? `1px solid ${D.borderLight}` : 'none', background: c.accent ? D.textLight : 'transparent' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 16, fontWeight: 700, color: c.accent ? D.coral : D.textSecLight, letterSpacing: 1 }}>{c.k}</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 132, fontWeight: 700, color: c.accent ? D.coral : D.textLight, lineHeight: 0.85, letterSpacing: -5 }}>{c.price}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 22, fontWeight: 500, color: c.accent ? D.bgLight : D.textSecLight, lineHeight: 1.3 }}>{c.sub}</span>
            </div>
          ))}
        </div>

        {/* n=1 contrast: a generalised protocol sold to all vs a protocol built per user */}
        <div style={{ marginTop: 24, border: `1px solid ${D.borderLight}` }}>
          <div style={{ padding: '12px 28px', borderBottom: `1px solid ${D.borderLight}`, fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>n = 1, PRICED FOR EVERYONE</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
            <div style={{ padding: '22px 28px', borderRight: `1px solid ${D.borderLight}`, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 15, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.6 }}>BRYAN JOHNSON · $2M / YEAR</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 21, fontWeight: 500, color: D.textSecLight, lineHeight: 1.3 }}>Optimises one body, then sells you his protocol.</span>
            </div>
            <div style={{ padding: '22px 28px', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 15, fontWeight: 700, color: D.coral, letterSpacing: 0.6 }}>COMPLETE · €249 / YEAR</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 21, fontWeight: 700, color: D.textLight, lineHeight: 1.3 }}>Measures your body, then builds yours.</span>
            </div>
          </div>
        </div>

        <REBand tag="MONEY MACHINE">The test alone costs more than a year of Complete.</REBand>
      </div>
    </Slide>
  );
}

// ── 09 · Founder ─────────────────────────────────────────────────────────────
// One claim: built a category leader before; now the first user of this one.
function RE_Founder({ number, total }) {
  const track = [
    { l: 'PRIOR', v: 'fxhash', s: 'co-founder · largest gen-art platform' },
    { l: 'ARTWORKS SOLD', v: '2M+', s: 'on the platform' },
    { l: 'TRADING VOLUME', v: '$100M+', s: 'lifetime' },
    { l: 'RAISED', v: '$5.5M', s: '1kx · Fabric · USV' },
  ];
  const athlete = [
    { l: 'HYROX', v: 'PRO M', s: 'competing' },
    { l: 'MARATHON', v: '< 3h', s: 'training for sub-3' },
    { l: 'VO₂MAX', v: '61.3', s: 'lab test' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Founder">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <REHead kicker="PAUL SCHMIDT · BERLIN">Built one before.</REHead>
        <RESub>I co-founded fxhash, the largest generative art platform in the world. Now I build Complete as its first user.</RESub>

        <div style={{ flex: 1, marginTop: 36, display: 'grid', gridTemplateColumns: '0.7fr 2.3fr', gap: 32 }}>
          <FounderPortrait size={400} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, justifyContent: 'center' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
              {track.map((c, i) => (
                <div key={i} style={{ padding: '24px 26px', display: 'flex', flexDirection: 'column', gap: 6, borderRight: i !== 3 ? `1px solid ${D.borderLight}` : 'none' }}>
                  <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{c.l}</span>
                  <span style={{ fontFamily: D.fontMono, fontSize: 52, fontWeight: 700, color: D.textLight, lineHeight: 0.9, letterSpacing: -2 }}>{c.v}</span>
                  <span style={{ fontFamily: D.fontSans, fontSize: 14, color: D.textSecLight, lineHeight: 1.3 }}>{c.s}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
              {athlete.map((c, i) => (
                <div key={i} style={{ padding: '24px 26px', display: 'flex', flexDirection: 'column', gap: 6, borderRight: i !== 2 ? `1px solid ${D.borderLight}` : 'none' }}>
                  <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{c.l}</span>
                  <span style={{ fontFamily: D.fontMono, fontSize: 52, fontWeight: 700, color: D.textLight, lineHeight: 0.9, letterSpacing: -2 }}>{c.v}</span>
                  <span style={{ fontFamily: D.fontSans, fontSize: 14, color: D.textSecLight, lineHeight: 1.3 }}>{c.s}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <REBand tag="FOUNDER">Hyrox athlete, sub-3 marathoner, building the app I need.</REBand>
      </div>
    </Slide>
  );
}

// ── 10 · Staged plan (program milestones, no capital ask) ────────────────────
function RE_StagedPlan({ number, total }) {
  const rows = [
    { phase: 'NOW', what: 'Working app on TestFlight. First Berlin lab partner signed.' },
    { phase: 'NEXT', what: 'Prove conversion at race-calendar pop-up testing.' },
    { phase: 'THEN', what: 'Repeat the operating model in city two.' },
    { phase: 'LONG TERM', what: 'Measured personal data becomes the longevity platform.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Where this goes">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <REHead kicker="ONE STEP PROVES THE NEXT">Now. Next. Then.</REHead>
        <RESub>Each milestone proves the next before we spend on it. We take the measured protocol only pros and the wealthy could buy and open it to everyone.</RESub>

        <div style={{ flex: 1, marginTop: 40, display: 'flex', flexDirection: 'column', border: `1px solid ${D.borderLight}` }}>
          {rows.map((r, i) => (
            <div key={i} style={{ flex: 1, display: 'grid', gridTemplateColumns: '0.9fr 3fr', gap: 0, alignItems: 'center', padding: '0 40px', borderBottom: i !== rows.length - 1 ? `1px solid ${D.borderLight}` : 'none', background: i === 0 ? '#CFCFCF' : 'transparent' }}>
              <span style={{ fontFamily: D.fontMono, fontSize: 34, fontWeight: 700, color: D.textLight, letterSpacing: 0 }}>{r.phase}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 32, fontWeight: 500, color: D.textSecLight, letterSpacing: -0.4, lineHeight: 1.25 }}>{r.what}</span>
            </div>
          ))}
        </div>

        {/* Closing band carries the brand line + a QR to the full V.04 deck */}
        <div style={{ marginTop: 'auto', padding: '24px 36px', background: D.textLight, color: D.bgLight, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <span style={{ fontFamily: D.fontSans, fontSize: 26, fontWeight: 700, letterSpacing: -0.4 }}>Fitness is the way in. Longevity is why.</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            <div style={{ textAlign: 'right', fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, letterSpacing: 0.8, lineHeight: 1.6 }}>
              <div style={{ color: D.coral }}>THE FULL DECK</div>
              <div style={{ color: D.bgLight }}>complete-deck-html.vercel.app</div>
            </div>
            <QRPlaceholder size={96} dark={true} value="https://complete-deck-html.vercel.app/" />
          </div>
        </div>
      </div>
    </Slide>
  );
}

Object.assign(window, {
  RE_Average, RE_Problem, RE_TwoTests, RE_ProductLive, RE_Traction,
  RE_WhoFirst, RE_Economics, RE_Founder, RE_StagedPlan,
});