// Appendix slides A1–A6

// A1 — Founder
function A1_Founder({ number, total }) {
  const stats = [
    { l: 'PRIOR', v: 'fxhash', s: 'ex-COO + cofounder' },
    { l: 'RAISED', v: '$5M', s: 'seed · 1kx, USV, fabric' },
    { l: 'FOLLOW-ON', v: '$500K', s: 're7 · Coinbase · SGV' },
    { l: 'VOLUME', v: '$100M', s: 'trading volume' },
    { l: 'HYROX', v: 'PRO M', s: 'competing in pro division' },
    { l: 'MARATHON', v: '< 3h', s: 'training for sub-3' },
    { l: 'VO₂MAX', v: '61.3', s: 'ml/kg/min · lab test' },
    { l: 'LT2', v: '172 BPM', s: '94th percentile' },
    { l: 'SPONSOR', v: 'On', s: 'sponsors my marathon content · Berlin Marathon activation' },
  ];
  const timeline = [
    { y: '2017–21', e: 'Frankfurt School BSc · Banking & Finance', sub: 'Internships: consumer startups, VC, strategy consulting' },
    { y: '2021', e: 'fxhash co-founded · zero to largest gen art platform' },
    { y: '2023', e: '$5M seed · 1kx, USV, fabric' },
    { y: '2025', e: '$FXH + art coins · giving every artist a liquid market' },
    { y: '2026', e: 'Complete' },
  ];
  const profile = [
    { k: 'TRAINING', v: 'Hyrox pro M · sub-3 marathon arc' },
    { k: 'BIOMARKERS', v: 'Public arc · open n=1 data' },
    { k: 'BUILD', v: 'Claude Code + Codex as OS' },
    { k: 'ALPHA', v: '31 active · 2,700+ sessions in 90 days · 76 signed up' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="Founder">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* Heading row */}
        <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 }}>
            Built one before. <span style={{ color: D.textSecLight }}>Building this now.</span>
          </h1>
          <div style={{ textAlign: 'right', fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8, lineHeight: 1.7, whiteSpace: 'nowrap' }}>
            <div style={{ color: D.textLight }}>PAUL SCHMIDT · FOUNDER</div>
            <div>BERLIN · JULY 2026</div>
            <div>paul@ccomplete.app</div>
          </div>
        </div>

        {/* Main 2-col layout */}
        <div style={{ flex: 1, marginTop: 24, display: 'grid', gridTemplateColumns: '0.8fr 2.2fr', gap: 24 }}>
          {/* LEFT: photo + first-user profile */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <FounderPortrait size={360} />
            <div style={{ border: `1px solid ${D.borderLight}`, padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
              <SLabel color={D.textLight}>First user</SLabel>
              {profile.map((p, i) => (
                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 2, paddingTop: i === 0 ? 0 : 8, borderTop: i === 0 ? 'none' : `1px solid ${D.borderLight}` }}>
                  <span style={{ fontFamily: D.fontMono, fontSize: 10, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{p.k}</span>
                  <span style={{ fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, color: D.textLight, letterSpacing: -0.1, lineHeight: 1.3 }}>{p.v}</span>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT: track record + why me + timeline */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* Track record (single outer box with header strip + 3x2 stat grid) */}
            <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' }}>
                Track record · prior arc + athletic profile
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }}>
                {stats.map((c, i) => (
                  <div key={i} style={{
                    padding: '12px 22px', display: 'flex', flexDirection: 'column', gap: 4,
                    borderRight: i % 3 !== 2 ? `1px solid ${D.borderLight}` : 'none',
                    borderBottom: i < stats.length - 3 ? `1px solid ${D.borderLight}` : 'none',
                  }}>
                    <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>{c.l}</span>
                    <span style={{ fontFamily: D.fontMono, fontSize: 34, fontWeight: 700, color: D.textLight, lineHeight: 0.95, letterSpacing: -1 }}>{c.v}</span>
                    <span style={{ fontFamily: D.fontSans, fontSize: 13, color: D.textSecLight }}>{c.s}</span>
                  </div>
                ))}
              </div>
              <div style={{ padding: '10px 22px', borderTop: `1px solid ${D.borderLight}`, fontFamily: D.fontSans, fontSize: 13, fontStyle: 'italic', fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>
                My watch had my easy-pace ceiling 12 bpm hot. The lab test corrected it. That's why Complete exists.
              </div>
            </div>

            {/* Two-up: Why me + Timeline */}
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 20 }}>
              <div style={{ border: `1px solid ${D.borderLight}`, padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <SLabel color={D.textLight}>Why me</SLabel>
                <p style={{ margin: 0, fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, lineHeight: 1.4, color: D.textLight, letterSpacing: -0.1 }}>
                  Co-founded fxhash in 2021. Largest generative art platform in the world. Second-time founder now. I know which 80% of the operating mistakes to skip.
                </p>
                <p style={{ margin: 0, fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, lineHeight: 1.4, color: D.textLight, letterSpacing: -0.1 }}>
                  Building Complete as its first user. Hyrox pro, sub-3 marathon arc. Building the app I and my peers need. Open n=1.
                </p>
                <p style={{ margin: 0, fontFamily: D.fontSans, fontSize: 14, fontWeight: 500, lineHeight: 1.4, color: D.textSecLight, letterSpacing: -0.1 }}>
                  AI-native, solo by design: two founders, two visions broke fxhash's focus once. 2-3 hires max, health data first. Founder-led distribution underway.
                </p>
              </div>
              <div style={{ border: `1px solid ${D.borderLight}`, padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <SLabel color={D.textLight}>Timeline</SLabel>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  {timeline.map((t, i) => (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '88px 1fr', gap: 14, alignItems: 'baseline', padding: '7px 0', borderBottom: i === timeline.length - 1 ? 'none' : `1px solid ${D.borderLight}` }}>
                      <span style={{ fontFamily: D.fontMono, fontSize: 16, fontWeight: 700, color: D.textLight, letterSpacing: -0.4, whiteSpace: 'nowrap' }}>{t.y}</span>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                        <span style={{ fontFamily: D.fontSans, fontSize: 14, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35, letterSpacing: -0.1 }}>{t.e}</span>
                        {t.sub ? (
                          <span style={{ fontFamily: D.fontSans, fontSize: 12, fontWeight: 500, color: D.textSecLight, opacity: 0.75, lineHeight: 1.35, letterSpacing: -0.05 }}>{t.sub}</span>
                        ) : null}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Dark footer band */}
        <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 }}>Sub-3 marathon. Hyrox pro. Building the system I'm the user of.</span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>FOUNDER</span>
        </div>
      </div>
    </Slide>
  );
}

// A2 — Tech Stack
function A2_TechStack({ number, total }) {
  const cols = [
    { l: 'CLIENT', items: ['iOS native', 'SwiftUI', '@Observable', 'StoreKit 2'] },
    { l: 'BACKEND', items: ['Supabase', 'Postgres', 'Edge functions', 'Realtime'] },
    { l: 'DATA', items: ['HealthKit', '40 activities', 'Wearable-agnostic', 'PostHog telemetry'] },
    { l: 'AI LAYER', items: ['Claude Code', 'Codex', 'Deterministic Swift for signal', 'LLMs for text only'] },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="A2 · Tech stack">
      <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 }}>
          AI-native, end to end.
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, marginTop: 24, color: D.textSecLight, maxWidth: 1500, lineHeight: 1.35 }}>
          Deterministic Swift for signal. LLMs for text only. Trust over hallucination.
        </p>
        <div style={{ flex: 1, marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', border: `1px solid ${D.borderLight}` }}>
          {cols.map((c, i) => (
            <div key={i} style={{
              padding: '28px 30px', display: 'flex', flexDirection: 'column', gap: 18,
              borderRight: i !== 3 ? `1px solid ${D.borderLight}` : 'none',
            }}>
              <SLabel color={D.textLight}>{c.l}</SLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {c.items.map((it, j) => (
                  <span key={j} style={{ fontFamily: D.fontSans, fontSize: j === 0 ? 30 : 18, fontWeight: j === 0 ? 700 : 500, color: j === 0 ? D.textLight : D.textSecLight, letterSpacing: -0.3, lineHeight: 1.2 }}>
                    {it}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28, 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 }}>TARGETING 3–5 PERSON TEAM</span>
          <span style={{ fontFamily: D.fontSans, fontSize: 16, fontWeight: 700, letterSpacing: -0.2 }}>Ships at 100-person scope.</span>
        </div>
      </div>
    </Slide>
  );
}

// A3 — Why a16z Speedrun
function A3_WhySpeedrun({ number, total }) {
  const reasons = [
    { n: '01', t: 'Crypto + consumer adjacency', b: 'The rare consumer product where a token is structurally clean: SAFE + SAFT side-by-side. Crypto is yearning for great consumer apps. We\'re building one.' },
    { n: '02', t: 'Distribution edge already wired', b: 'Building on Base. A direct line to Base launch events and Basecamp meetups globally: an unfair distribution channel on the L2 we ship on.' },
    { n: '03', t: 'n=1 is a consumer thesis', b: 'Behavior change at consumer scale is the proof point. Our n=1 launch gate is exactly what a consumer-AI accelerator exists to validate.' },
    { n: '04', t: 'Network DNA + geography', b: 'Pattern recognition in consumer behavior change, plus a US hub a Berlin shipper cannot self-stamp.' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="A3 · Why now">
      <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 }}>
            Why now. <span style={{ color: D.textSecLight }}>Why this network.</span>
          </h1>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>FOUR REASONS · ONE FIT</span>
        </div>

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

// A4 — Product Arc
function A4_ProductArc({ number, total }) {
  const rows = [
    { phase: 'TODAY', surface: 'Races: Hyrox, run, GF · AI Coach · Recovery · Social · Roads', state: 'SHIPPING' },
    { phase: 'Q3 2026', surface: 'Races, expanded: cycling, swimming, triathlon', state: 'NEXT' },
    { phase: 'Late 2026', surface: 'Know your body: biomarkers, DNA, sweat', state: 'BIOMARKERS' },
    { phase: 'Early 2027', surface: 'Life events: pre-conception, postpartum, healthy aging', state: 'LIFE STAGES' },
    { phase: 'NEXT ROUND', surface: 'Physical layer: pop-ups → hubs / labs / clinic', state: 'IRL' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="A4 · Product arc">
      <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 }}>
          The arc.
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, color: D.textSecLight, margin: '20px 0 0 0', letterSpacing: -0.3, lineHeight: 1.3 }}>
          The go-to-market wedges + the product roadmap. Sport is the entry. <span style={{ color: D.textLight, fontWeight: 700 }}>n=1 medicine is the destination.</span>
        </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>PHASE</span>
            <span>SURFACE</span>
            <span>STATE</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: '28px 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: 24, fontWeight: 500, color: D.textSecLight, letterSpacing: -0.2 }}>{r.surface}</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>{r.state}</span>
            </div>
          ))}
        </div>
      </div>
    </Slide>
  );
}

// A5 — $COMPLETE Token
function A5_Token({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="A5 · Token">
      <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 }}>
            $COMPLETE. <span style={{ color: D.textSecLight }}>Three jobs. One asset.</span>
          </h1>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textSecLight, letterSpacing: 1, whiteSpace: 'nowrap' }}>FUTURE · POST-PMF · OFF THIS RAISE</span>
        </div>
        <p style={{ fontFamily: D.fontSans, fontSize: 20, fontWeight: 500, margin: '18px 0 0 0', color: D.textSecLight, maxWidth: 1600, lineHeight: 1.35 }}>
          Not part of this raise. $COMPLETE launches later, once the product has proven itself. The SAFE is valued at the next priced round on traction alone; token mechanics contribute nothing to that number.
        </p>

        <div style={{ flex: 1, marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {[
            { n: '01', t: 'Earn → spend back', stat: '', statL: 'GOALS · BOUNTIES · TRAINING', b: 'Hit your goals, win bounties, or just train, and you earn $COMPLETE, then spend it on sub + supplements. Put in the work and your membership pays for itself. Rewards recirculate, not dumped on the market.' },
            { n: '02', t: 'Passive revenue', stat: '~8%', statL: 'TRADE VOL → ETH', b: '10% trade tax routes to ETH treasury that buys + burns supply. ~8% net into ETH.' },
            { n: '03', t: 'Social betting', stat: '1v1', statL: 'TRACKED · BOTH CONFIRM', b: 'Challenge a friend on pace, distance or lifts. Stake $COMPLETE. Winner takes the pot; rake buys back + burns. The bet is the marketing.', hero: true },
          ].map((c, i) => (
            <div key={i} style={{
              padding: '28px 30px', display: 'flex', flexDirection: 'column', gap: 16,
              borderRight: i !== 2 ? `1px solid ${D.borderLight}` : 'none',
              background: c.hero ? D.textLight : 'transparent',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: c.hero ? '#8A8A8A' : D.textSecLight, letterSpacing: 1 }}>{c.hero ? `${c.n} · LEAD` : c.n}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: c.hero ? '#BBBBBB' : D.textSecLight, letterSpacing: 0.8 }}>{c.statL}</span>
              </div>
              <span style={{ fontFamily: D.fontSans, fontSize: 38, fontWeight: 700, color: c.hero ? D.bgLight : D.textLight, letterSpacing: -0.5, lineHeight: 1 }}>{c.t}</span>
              {c.stat && <span style={{ fontFamily: D.fontMono, fontSize: 84, fontWeight: 700, color: c.hero ? D.bgLight : D.textLight, lineHeight: 0.9, letterSpacing: -2 }}>{c.stat}</span>}
              <span style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: c.hero ? '#BBBBBB' : D.textSecLight, lineHeight: 1.4 }}>{c.b}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          <div style={{ padding: '18px 22px', borderRight: `1px solid ${D.borderLight}` }}>
            <SLabel color={D.textLight}>Structure</SLabel>
            <div style={{ marginTop: 10, fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>
              This raise is a single SAFE, valued at the next priced round on product traction. $COMPLETE is a future, separate track: it launches post product-market fit and carries no weight in that valuation.
            </div>
          </div>
          <div style={{ padding: '18px 22px', borderRight: `1px solid ${D.borderLight}` }}>
            <SLabel color={D.textLight}>Distribution</SLabel>
            <div style={{ marginTop: 10, fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.4 }}>
              Once live, the airdrop pulses retail downloads at <span style={{ fontWeight: 700, color: D.textLight }}>zero paid CAC</span>. Token incentives do the acquisition, not ad spend.
            </div>
          </div>
          <div style={{ padding: '18px 22px', background: D.textLight, color: D.bgLight }}>
            <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, letterSpacing: 1 }}>OPERATING PRINCIPLE</span>
            <div style={{ marginTop: 10, fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, lineHeight: 1.35, letterSpacing: -0.3 }}>
              Use crypto for what it gives. Don't let it run the company.
            </div>
          </div>
        </div>
      </div>
    </Slide>
  );
}

// A6 — How Complete Makes Behavior Legible
function A6_Behavior({ number, total }) {
  const rows = [
    { surface: 'Identity markers', sees: 'Who you are in the data. Athlete type, training age, recovery archetype.', backed: 'AthleteScores · Swift, on-device' },
    { surface: 'Cause → effect cards', sees: 'What you did → what your body did. Workout density → recovery. Sleep → readiness.', backed: 'RecoveryService + HealthKit' },
    { surface: 'Weekly reflection', sees: 'What changed. What worked. What to repeat. Plain text.', backed: 'AdaptiveCoachNotes · LLM-on-text only' },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="A6 · Behavior">
      <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 }}>
          How Complete makes <span style={{ color: D.textSecLight }}>behavior legible.</span>
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, marginTop: 24, color: D.textSecLight, maxWidth: 1500, lineHeight: 1.35 }}>
          Behavior change is the wedge. The product surfaces behavior in a way the user can feel and trust.
        </p>

        <div style={{ flex: 1, marginTop: 36, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 2.4fr 1.2fr', 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>SURFACE</span>
            <span>WHAT THE USER SEES</span>
            <span>BACKED BY</span>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.1fr 2.4fr 1.2fr', gap: 0, borderBottom: `1px solid ${D.borderLight}`, padding: '32px 24px', alignItems: 'center' }}>
              <span style={{ fontFamily: D.fontSans, fontSize: 30, fontWeight: 700, color: D.textLight, letterSpacing: -0.4, lineHeight: 1.05 }}>{r.surface}</span>
              <span style={{ fontFamily: D.fontSans, fontSize: 20, fontWeight: 500, color: D.textSecLight, letterSpacing: -0.2, lineHeight: 1.4 }}>{r.sees}</span>
              <span style={{ fontFamily: D.fontMono, fontSize: 15, fontWeight: 700, color: D.textLight, letterSpacing: 0.5 }}>{r.backed}</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.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>THE TRUST LOOP</span>
          <span style={{ fontFamily: D.fontSans, fontSize: 18, fontWeight: 700, letterSpacing: -0.2, whiteSpace: 'nowrap' }}>
            The user trusts the model of themselves the product offers.
          </span>
        </div>
      </div>
    </Slide>
  );
}

// A7 — The Physical Layer
function A7_PhysicalLayer({ number, total }) {
  const phases = [
    {
      n: 'PHASE 1',
      when: 'this round',
      title: 'Testing + fuel',
      lines: [
        'Lab collaboration in Berlin, unnamed; first paid trials live.',
        'In talks with additional labs.',
        'Premium, €249/yr: one lab test per training block.',
        'Free in-app Complete Test re-anchors race pace, race week.',
        "Next: our own mobile rig, touring Germany's race calendar.",
        'Pop-ups, fuel and electrolytes alongside.',
      ],
      state: 'IN MOTION · TESTING + FUEL',
    },
    {
      n: 'PHASE 2',
      when: '12–18 months',
      title: 'Apparel',
      lines: [
        'Purpose-made cotton.',
        'For lifestyle and movement.',
        'Anti-synthetic gymslop.',
        'Things that don\'t exist yet.',
      ],
      state: 'PLANNED',
    },
    {
      n: 'PHASE 3',
      when: 'next round',
      title: 'Life centers',
      lines: [
        '1–2 flagship locations.',
        'Gym + recovery',
        '+ bloodwork + clinic.',
        'The Apple Store of',
        'body optimization.',
      ],
      state: 'WHEN SCALE IS EARNED',
    },
  ];
  return (
    <Slide number={number} total={total} dark={false} label="A7 · Physical layer">
      <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 }}>
          The physical layer.
        </h1>
        <p style={{ fontFamily: D.fontSans, fontSize: 24, fontWeight: 500, marginTop: 24, color: D.textSecLight, maxWidth: 1660, lineHeight: 1.35 }}>
          Staged, not speculative. Testing runs in Berlin via an unnamed lab collaboration; first paid trials are underway, and we're in talks with additional labs. The lifestyle brand, built in three deliberate beats.
        </p>

        <div style={{ flex: 1, marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${D.borderLight}` }}>
          {phases.map((p, i) => (
            <div key={i} style={{
              padding: '28px 30px', display: 'flex', flexDirection: 'column', gap: 18,
              borderRight: i < 2 ? `1px solid ${D.borderLight}` : 'none',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <SLabel color={D.textLight}>{p.n}</SLabel>
                <span style={{ fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.8 }}>{p.when.toUpperCase()}</span>
              </div>
              <span style={{ fontFamily: D.fontSans, fontSize: 38, fontWeight: 700, color: D.textLight, letterSpacing: -0.5, lineHeight: 1 }}>{p.title}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {p.lines.map((line, j) => (
                  <span key={j} style={{ fontFamily: D.fontSans, fontSize: 17, fontWeight: 500, color: D.textSecLight, lineHeight: 1.35 }}>{line}</span>
                ))}
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ paddingTop: 12, borderTop: `1px solid ${D.borderLight}`, fontFamily: D.fontMono, fontSize: 11, fontWeight: 700, color: D.textLight, letterSpacing: 1 }}>
                {p.state}
              </div>
            </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 }}>App today. Lifestyle next. Life centers when scale is earned.</span>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, letterSpacing: 1.5, whiteSpace: 'nowrap', color: D.coral }}>PHYSICAL LAYER</span>
        </div>
      </div>
    </Slide>
  );
}

// A8 — Product Today (live screenshots) — recovered to appendix as the "it's real" proof
function A8_ProductLive({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="Product · live">
      <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 }}>
            Live. Used. <span style={{ color: D.textSecLight }}>Working.</span>
          </h1>
          <span style={{ fontFamily: D.fontMono, fontSize: 14, fontWeight: 700, color: D.textSecLight, letterSpacing: 1 }}>iOS · LIVE TODAY · TESTFLIGHT</span>
        </div>

        <div style={{ flex: 1, marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 36, alignItems: 'stretch' }}>
          {[
            { label: 'Progress', sub: 'Complete Age · VO₂max · Elo', src: 'assets/screen-progress-v03.png' },
            { label: 'You', sub: 'Profile · Elo · marathon', src: 'assets/screen-you-v03.png' },
            { label: 'Roads', sub: 'Skill tree · tiered rungs', src: 'assets/screen-roads-v03.png' },
          ].map((p, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
              <PhoneFrame src={p.src} />
              <div style={{ width: '100%', borderTop: `1px solid ${D.borderLight}`, paddingTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: D.fontSans, fontSize: 22, fontWeight: 700, color: D.textLight, letterSpacing: -0.3 }}>{p.label}</span>
                <span style={{ fontFamily: D.fontMono, fontSize: 12, fontWeight: 700, color: D.textSecLight, letterSpacing: 0.6 }}>{p.sub.toUpperCase()}</span>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 20, fontFamily: D.fontSans, fontSize: 15, fontWeight: 500, fontStyle: 'italic', color: D.textSecLight }}>
          Blood panels: already in the app.
        </div>

        <div style={{ marginTop: 16, padding: '18px 0', borderTop: `1px solid ${D.borderLight}`, display: 'flex', justifyContent: 'space-between', gap: 16, fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: D.textLight, letterSpacing: 1, flexWrap: 'wrap' }}>
          <span>AI COACH</span><span>RECOVERY</span><span>VO₂MAX</span><span>PLAN GENERATION</span><span>WEARABLE-AGNOSTIC</span><span>SOCIAL</span><span>PAYWALL WIRED</span><span>STOREKIT 2</span>
        </div>
      </div>
    </Slide>
  );
}

// Appendix section divider — flat grey ground, single word
function A0_AppendixDivider({ number, total }) {
  return (
    <Slide number={number} total={total} dark={false} label="Appendix" style={{ background: '#9A9A9A' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <span style={{ fontFamily: D.fontSans, fontSize: 200, fontWeight: 700, letterSpacing: -8, lineHeight: 0.9, color: D.textLight }}>Appendix</span>
      </div>
    </Slide>
  );
}

Object.assign(window, { A0_AppendixDivider, A1_Founder, A2_TechStack, A3_WhySpeedrun, A4_ProductArc, A5_Token, A6_Behavior, A7_PhysicalLayer, A8_ProductLive });