/* Finch pitch deck — slide components. Depends on atoms.jsx globals. */

/* =========================================================================
   SLIDE 1 — COVER
   ========================================================================= */
const Slide1 = () => (
  <SlideFrame idx={1} total={10} noFooter>
    <div style={{
      position: 'absolute', inset: 0, paddingTop: 6,
      display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 0,
    }}>
      <div style={{
        padding: `${S.py}px ${S.px}px`,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <img src="assets/logo.png" alt="finch" style={{ height: 56, width: 'auto', alignSelf: 'flex-start' }} />

        <div>
          <Title size={TYPE.titleLg} style={{ marginBottom: 36 }}>
            Apply Smarter. Land Roles with <Accent>Confidence</Accent>.
          </Title>
          <Subtitle size={34} style={{ maxWidth: 760, color: C.fg2 }}>
            The end-to-end internship application platform built to convert effort into interviews.
          </Subtitle>
          <div style={{
            marginTop: 40, display: 'flex', flexWrap: 'wrap', gap: 14,
            alignItems: 'center', fontSize: 24, fontWeight: 500, color: C.fg3,
            letterSpacing: '0.01em',
          }}>
            <span>Pre-Revenue</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>B2C SaaS</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>Texas A&amp;M University</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span style={{ color: C.primary, fontWeight: 600 }}>applyfinch.com</span>
          </div>
        </div>

        <div style={{ fontSize: 24, fontWeight: 500, color: C.fg3, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          Innovation Expo · 2026
        </div>
      </div>

      <div style={{ position: 'relative', background: C.dark, color: '#F9F9F8', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: '-15%', right: '-10%', width: 900, height: 900, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(241,90,41,0.25), rgba(241,90,41,0) 60%)',
        }} />
        <div style={{
          position: 'absolute', bottom: '-20%', left: '-15%', width: 700, height: 700, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(241,90,41,0.14), rgba(241,90,41,0) 60%)',
        }} />

        <div style={{
          position: 'absolute', inset: 0, padding: 80,
          display: 'flex', flexDirection: 'column', justifyContent: 'center', zIndex: 1,
        }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 40 }}>
            {['#FF5F57', '#FEBC2E', '#28C840'].map(c => (
              <span key={c} style={{ width: 12, height: 12, borderRadius: '50%', background: c, opacity: 0.85 }} />
            ))}
          </div>

          <Eyebrow color="rgba(241,90,41,0.9)" style={{ fontSize: 16, marginBottom: 20 }}>Start an Application Run</Eyebrow>

          <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.12, color: '#F9F9F8', marginBottom: 36 }}>
            Stop writing the same résumé a hundred <Accent>different</Accent> ways.
          </div>

          <div style={{
            background: '#1A1A1A', border: `1px solid ${C.darkBord}`,
            borderRadius: 16, padding: 20, boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
          }}>
            <div style={{ fontSize: 18, color: '#D4D4D4', padding: '6px 4px 18px' }}>
              software engineer intern, summer 2026, bay area
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 14, borderTop: `1px solid ${C.darkBord}` }}>
              {['Remote', 'Hybrid', 'On-site'].map((t, i) => (
                <span key={t} style={{
                  fontSize: 13, fontWeight: 500, padding: '7px 12px', borderRadius: 8,
                  background: i === 0 ? 'rgba(241,90,41,0.14)' : '#262626',
                  color: i === 0 ? C.primary : '#D4D4D4',
                  border: i === 0 ? `1px solid rgba(241,90,41,0.3)` : `1px solid ${C.darkBord}`,
                }}>{t}</span>
              ))}
              <div style={{ flex: 1 }} />
              <button style={{
                display: 'flex', alignItems: 'center', gap: 8,
                background: C.primary, color: '#fff', border: 'none',
                padding: '10px 16px', borderRadius: 10, fontSize: 14, fontWeight: 600,
              }}>
                Run pipeline
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/></svg>
              </button>
            </div>
          </div>

          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 8 }}>
            {[
              { label: 'Search', state: 'done' },
              { label: 'Rank', state: 'done' },
              { label: 'Tailor', state: 'active' },
              { label: 'ATS check', state: 'pending' },
              { label: 'Apply', state: 'pending' },
            ].map((step, i) => (
              <React.Fragment key={step.label}>
                <div style={{
                  flex: 1, padding: '10px 12px', borderRadius: 10,
                  background: step.state === 'active' ? 'rgba(241,90,41,0.1)' : '#1A1A1A',
                  border: step.state === 'active' ? `1.5px solid ${C.primary}` : `1px solid ${C.darkBord}`,
                  display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 500,
                  color: step.state === 'active' ? C.primary : step.state === 'done' ? '#D4D4D4' : '#737373',
                }}>
                  {step.state === 'done' && (
                    <span style={{ width: 14, height: 14, borderRadius: '50%', background: C.atsStrong, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5 9-11"/></svg>
                    </span>
                  )}
                  {step.state === 'active' && (
                    <span style={{ width: 10, height: 10, borderRadius: '50%', background: C.primary, boxShadow: `0 0 0 4px rgba(241,90,41,0.25)` }} />
                  )}
                  {step.state === 'pending' && (
                    <span style={{ width: 10, height: 10, borderRadius: '50%', border: `1.5px solid #3a3a3a` }} />
                  )}
                  {step.label}
                </div>
                {i < 4 && <span style={{ color: '#3a3a3a', fontSize: 14 }}>—</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </div>
  </SlideFrame>
);

/* =========================================================================
   SLIDE 2 — PROBLEM (dark)
   ========================================================================= */
const DarkStatCard = ({ value, label, sub }) => (
  <div style={{
    background: C.darkCard, border: `1px solid ${C.darkBord}`, borderRadius: 16,
    padding: '28px 32px',
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
  }}>
    <div style={{
      fontSize: 92, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1,
      color: '#F9F9F8', fontVariantNumeric: 'tabular-nums',
    }}>{value}</div>
    <div>
      <div style={{ fontSize: 20, fontWeight: 600, color: '#F9F9F8' }}>{label}</div>
      <div style={{ fontSize: 16, fontWeight: 400, color: 'rgba(249,249,248,0.55)', marginTop: 2 }}>{sub}</div>
    </div>
  </div>
);

const Slide2 = () => (
  <SlideFrame idx={2} total={10} dark>
    <Eyebrow style={{ marginBottom: 32 }}>The Problem</Eyebrow>
    <Title color="#F9F9F8" size={82} style={{ maxWidth: 1600, marginBottom: 56 }}>
      Students are doing everything right.{' '}
      <Accent>They're still getting ignored.</Accent>
    </Title>

    <div style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr 1fr 1fr', gap: 20, marginBottom: 48 }}>
      <div style={{
        background: C.darkCard, border: `1px solid ${C.darkBord}`, borderRadius: 16,
        padding: '28px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <Eyebrow color="rgba(249,249,248,0.55)" style={{ fontSize: 14 }}>One recruiting cycle</Eyebrow>
        <div style={{ marginTop: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
            <div style={{ width: 130, fontSize: 18, color: '#D4D4D4', fontWeight: 500 }}>Applications</div>
            <div style={{ flex: 1 }}>
              <div style={{
                height: 36, background: '#2A2A2A', borderRadius: 6,
                display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
                padding: '0 14px', color: '#F9F9F8', fontSize: 18, fontWeight: 700,
                fontVariantNumeric: 'tabular-nums',
              }}>80</div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 130, fontSize: 18, color: '#D4D4D4', fontWeight: 500 }}>Interviews</div>
            <div style={{ flex: 1, height: 36 }}>
              <div style={{
                height: 36, width: '3.75%', minWidth: 44, background: C.primary, borderRadius: 6,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontSize: 18, fontWeight: 700, fontVariantNumeric: 'tabular-nums',
              }}>3</div>
            </div>
          </div>
        </div>
      </div>

      <DarkStatCard value="3%" label="App → Interview" sub="Conversion rate" />
      <DarkStatCard value="60%" label="End cycle" sub="with no offer" />
      <DarkStatCard value="80%" label="Send the same résumé" sub="everywhere" />
    </div>

    <div style={{
      borderTop: `1px solid ${C.darkBord}`, paddingTop: 36,
      fontSize: 30, fontWeight: 400, lineHeight: 1.4,
      color: 'rgba(249,249,248,0.8)', maxWidth: 1500, textWrap: 'pretty',
    }}>
      20 minutes to apply. 10 seconds to get filtered out. Tailoring isn't laziness — it's math a full-time student can't do.
    </div>
  </SlideFrame>
);

/* =========================================================================
   SLIDE 3 — WHY NOT CHATGPT? (cinematic: real chat transcript vs one click)
   The left side IS the argument. Judges who have lived it will feel it instantly.
   ========================================================================= */
const ChatMsg = ({ from, time, body, fading }) => {
  const isUser = from === 'user';
  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      alignItems: isUser ? 'flex-end' : 'flex-start',
      marginBottom: 10, opacity: fading,
    }}>
      <div style={{
        fontSize: 11, color: 'rgba(249,249,248,0.35)',
        marginBottom: 4, letterSpacing: '0.02em',
        fontVariantNumeric: 'tabular-nums',
      }}>{time}</div>
      <div style={{
        maxWidth: '88%',
        background: isUser ? '#2A2A2A' : 'transparent',
        border: isUser ? 'none' : `1px solid #2A2A2A`,
        borderRadius: 14,
        padding: isUser ? '9px 14px' : '9px 14px',
        fontSize: 13, lineHeight: 1.45,
        color: isUser ? '#E5E5E5' : 'rgba(249,249,248,0.78)',
        fontFamily: isUser ? 'var(--font-sans)' : 'var(--font-sans)',
      }}>{body}</div>
    </div>
  );
};

const Slide3 = () => {
  // Realistic back-and-forth a student actually has at 2am for ONE résumé.
  // Deliberately verbose. Fades off the bottom of the slide.
  const msgs = [
    { from: 'user', time: '2:14 AM', body: 'here\'s the job description for a SWE intern role at Stripe. can you tailor my resume to match?', f: 1 },
    { from: 'user', time: '2:14 AM', body: '[pastes 800-word JD]\n[pastes resume]', f: 1 },
    { from: 'gpt', time: '2:15 AM', body: 'Sure! Here\'s a tailored version of your resume…', f: 1 },
    { from: 'user', time: '2:21 AM', body: 'it\'s 2 pages now. needs to be 1.', f: 1 },
    { from: 'gpt', time: '2:21 AM', body: 'Here\'s a shorter version with tighter bullet points…', f: 1 },
    { from: 'user', time: '2:27 AM', body: 'you made up a project i never did. "distributed payment system" isn\'t mine', f: 0.95 },
    { from: 'gpt', time: '2:27 AM', body: 'Apologies — here\'s a revised version using only the experience you provided.', f: 0.9 },
    { from: 'user', time: '2:34 AM', body: 'can you add keywords from the JD? it needs to pass an ATS', f: 0.82 },
    { from: 'gpt', time: '2:35 AM', body: 'Here\'s an ATS-optimized version with relevant keywords integrated…', f: 0.75 },
    { from: 'user', time: '2:41 AM', body: 'now it sounds robotic. dial it back', f: 0.62 },
    { from: 'user', time: '2:48 AM', body: 'the formatting broke when i pasted into docs', f: 0.5 },
    { from: 'gpt', time: '2:49 AM', body: 'Try copy-pasting as plain text first, then apply formatting…', f: 0.38 },
    { from: 'user', time: '3:02 AM', body: 'ok now do the same thing for this Airbnb PM internship', f: 0.26 },
    { from: 'gpt', time: '3:03 AM', body: 'I don\'t have context from our earlier conversation — could you paste your resume again?', f: 0.16 },
  ];

  return (
    <SlideFrame idx={3} total={10} dark pad="0" noFooter>
      {/* Top bar — eyebrow + headline, sits above both panes */}
      <div style={{
        padding: `52px 72px 28px`, position: 'relative', zIndex: 2,
      }}>
        <Eyebrow style={{ marginBottom: 20 }}>The Question Everyone Asks</Eyebrow>
        <div style={{
          fontSize: 82, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.02,
          color: '#F9F9F8', maxWidth: 1700,
        }}>
          "Why not just use{' '}
          <span style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 500,
            color: C.primary,
          }}>ChatGPT</span>?"
        </div>
      </div>

      {/* Split: left chat transcript, right one-click */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 240, bottom: 0,
        display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 0,
      }}>
        {/* LEFT — the actual chat */}
        <div style={{
          position: 'relative', overflow: 'hidden',
          padding: '28px 48px 0 72px',
          borderRight: `1px solid ${C.darkBord}`,
        }}>
          {/* meta header */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginBottom: 20, paddingBottom: 16,
            borderBottom: `1px solid ${C.darkBord}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 30, height: 30, borderRadius: 8,
                background: '#10A37F', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 16, fontWeight: 700, color: '#fff', fontFamily: 'var(--font-serif)',
              }}>✦</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: '#F9F9F8' }}>Tailor resume for Stripe SWE intern</div>
                <div style={{ fontSize: 11, color: 'rgba(249,249,248,0.45)' }}>2:14 AM → 4:07 AM · one résumé</div>
              </div>
            </div>
            <div style={{
              fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'rgba(249,249,248,0.4)',
            }}>
              What you're actually doing
            </div>
          </div>

          {/* Chat messages */}
          <div style={{ paddingBottom: 260 }}>
            {msgs.map((m, i) => (
              <ChatMsg key={i} from={m.from} time={m.time} body={m.body} fading={m.f} />
            ))}
          </div>

          {/* Fade overlay */}
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 0, height: 300,
            background: `linear-gradient(to bottom, rgba(10,13,20,0) 0%, ${C.dark} 60%)`,
            pointerEvents: 'none',
          }} />

          {/* Bottom sticker */}
          <div style={{
            position: 'absolute', left: 72, right: 48, bottom: 48,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '10px 16px', borderRadius: 999,
              background: 'rgba(255,255,255,0.06)',
              border: `1px solid ${C.darkBord}`,
              fontSize: 13, fontWeight: 500, color: 'rgba(249,249,248,0.65)',
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: '50%', background: '#F59E0B',
              }} />
              12 more messages · context resets at job 4
            </div>
            <div style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
              fontSize: 44, letterSpacing: '-0.02em', color: C.primary,
              lineHeight: 1, fontVariantNumeric: 'tabular-nums',
            }}>
              1h 53m<span style={{ fontSize: 22, color: 'rgba(249,249,248,0.5)', fontFamily: 'var(--font-sans)', fontStyle: 'normal', marginLeft: 8 }}>/ résumé</span>
            </div>
          </div>
        </div>

        {/* RIGHT — the Finch one-click */}
        <div style={{
          position: 'relative',
          background: `linear-gradient(180deg, #0E1320 0%, #0A0D14 100%)`,
          padding: '28px 72px 0 56px',
          display: 'flex', flexDirection: 'column',
        }}>
          {/* radial orange glow */}
          <div style={{
            position: 'absolute', top: '20%', right: '-10%', width: 700, height: 700, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(241,90,41,0.22), rgba(241,90,41,0) 60%)',
            pointerEvents: 'none',
          }} />

          {/* meta header */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginBottom: 20, paddingBottom: 16,
            borderBottom: `1px solid ${C.darkBord}`, position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 30, height: 30, borderRadius: 8,
                background: C.primary, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14, fontWeight: 700, color: '#fff',
              }}>F</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: '#F9F9F8' }}>Pipeline run · 15 jobs</div>
                <div style={{ fontSize: 11, color: 'rgba(249,249,248,0.45)' }}>2:14 AM → 2:18 AM · fifteen résumés</div>
              </div>
            </div>
            <div style={{
              fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: C.primary,
            }}>
              What Finch does
            </div>
          </div>

          {/* The three steps, big and spacious */}
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 24, flex: 1, justifyContent: 'center', paddingBottom: 80 }}>
            <StepRow n="1" time="2:14 AM" label="Paste profile." detail="Once. Not per job." />
            <StepRow n="2" time="2:15 AM" label="Pick 15 jobs." detail="Search, rank, select." />
            <StepRow n="3" time="2:18 AM" label="Download 15 PDFs." detail="Each ATS-scored. Ready to submit." final />
          </div>

          {/* Bottom payoff */}
          <div style={{
            position: 'absolute', left: 56, right: 72, bottom: 32,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '10px 16px', borderRadius: 999,
              background: 'rgba(241,90,41,0.12)',
              border: `1px solid rgba(241,90,41,0.35)`,
              fontSize: 13, fontWeight: 600, color: C.primary,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: C.primary }} />
              Done. Close laptop. Go to sleep.
            </div>
            <div style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
              fontSize: 44, letterSpacing: '-0.02em', color: C.primary,
              lineHeight: 1, fontVariantNumeric: 'tabular-nums',
            }}>
              16s<span style={{ fontSize: 22, color: 'rgba(249,249,248,0.5)', fontFamily: 'var(--font-sans)', fontStyle: 'normal', marginLeft: 8 }}>/ résumé</span>
            </div>
          </div>
        </div>
      </div>
    </SlideFrame>
  );
};

const StepRow = ({ n, time, label, detail, final: isFinal }) => (
  <div style={{
    display: 'grid', gridTemplateColumns: '44px 1fr', gap: 20, alignItems: 'flex-start',
    position: 'relative',
  }}>
    <div style={{
      width: 44, height: 44, borderRadius: '50%',
      background: isFinal ? C.primary : 'transparent',
      border: isFinal ? 'none' : `1.5px solid rgba(241,90,41,0.5)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: isFinal ? '#fff' : C.primary,
      fontSize: 18, fontWeight: 700, fontFamily: 'var(--font-serif)', fontStyle: 'italic',
      boxShadow: isFinal ? `0 0 0 6px rgba(241,90,41,0.18)` : 'none',
    }}>{n}</div>
    <div>
      <div style={{
        fontSize: 11, color: 'rgba(249,249,248,0.45)', marginBottom: 4,
        letterSpacing: '0.02em', fontVariantNumeric: 'tabular-nums',
      }}>{time}</div>
      <div style={{
        fontSize: 30, fontWeight: 600, color: '#F9F9F8',
        letterSpacing: '-0.015em', lineHeight: 1.15, marginBottom: 4,
      }}>{label}</div>
      <div style={{ fontSize: 16, color: 'rgba(249,249,248,0.6)', lineHeight: 1.45 }}>{detail}</div>
    </div>
  </div>
);

/* =========================================================================
   SLIDE 4 — PRODUCT
   ========================================================================= */
const FeatureCard = ({ icon: Ic, title, desc, live, soon }) => (
  <div style={{
    background: soon ? 'transparent' : C.card,
    border: soon ? `1.5px dashed ${C.borderStr}` : `1px solid ${C.border}`,
    borderRadius: 14, padding: 22,
    display: 'flex', flexDirection: 'column', gap: 14,
  }}>
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
      <div style={{
        width: 44, height: 44, borderRadius: 10,
        background: C.tint, border: `1px solid ${C.tintStr}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Ic size={22} stroke={C.primary} />
      </div>
      {live && <LivePill />}
      {soon && <SoonPill />}
    </div>
    <div>
      <div style={{ fontSize: 22, fontWeight: 600, color: C.fg, letterSpacing: '-0.01em' }}>{title}</div>
      <div style={{ fontSize: 16, fontWeight: 400, color: C.fg2, lineHeight: 1.45, marginTop: 4 }}>{desc}</div>
    </div>
  </div>
);

const Slide4 = () => (
  <SlideFrame idx={4} total={10}>
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: S.titleGap, gap: 40 }}>
      <div>
        <Eyebrow style={{ marginBottom: 20 }}>Product</Eyebrow>
        <Title style={{ maxWidth: 1200 }}>
          What Finch does today, and where we're <Accent>headed</Accent>.
        </Title>
      </div>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 10, padding: '10px 16px',
        background: C.tint, border: `1px solid ${C.tintStr}`, borderRadius: 999,
        color: C.primary, fontSize: 14, fontWeight: 600, letterSpacing: '0.1em',
        textTransform: 'uppercase', whiteSpace: 'nowrap', marginTop: 8,
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: '50%', background: C.primary,
          boxShadow: `0 0 0 5px rgba(241,90,41,0.2)`,
          animation: 'pulse 1.6s ease-in-out infinite',
        }} />
        Live demo follows
      </div>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56, flex: 1, minHeight: 0 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        <div>
          <SectionLabel n={4} total={4}>Shipping now</SectionLabel>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <FeatureCard live icon={IconUser} title="Profile Compilation" desc="Résumé, LinkedIn, GitHub parsed automatically." />
            <FeatureCard live icon={IconFile} title="Resume Generation" desc="ATS-optimized and tailored to every role." />
            <FeatureCard live icon={IconMail} title="Cover Letter Generation" desc="Unique to each job description." />
            <FeatureCard live icon={IconEdit} title="Edit Before Download" desc="Review and adjust before submitting." />
          </div>
        </div>
        <div>
          <SectionLabel n={2} total={2}>On the roadmap</SectionLabel>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <FeatureCard soon icon={IconChrome} title="Chrome Extension" desc="Autofill applications from any portal." />
            <FeatureCard soon icon={IconNetwork} title="Network Lever" desc="Follow-ups routed to industry contacts." />
          </div>
        </div>
      </div>

      <div style={{
        position: 'relative', background: C.dark, borderRadius: 24, padding: 22,
        boxShadow: '0 24px 70px rgba(7,11,22,0.35)',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        <div style={{ flex: 1, borderRadius: 14, overflow: 'hidden', border: `1px solid ${C.darkBord}`, background: '#FAFAF7', position: 'relative' }}>
          <iframe
            src="design-preview/Dashboard.html"
            title="Finch Dashboard"
            style={{
              position: 'absolute',
              top: 0, left: 0,
              width: '1320px', height: '1040px',
              transform: 'scale(0.553)', transformOrigin: 'top left',
              border: 'none', background: '#FAFAF7',
              pointerEvents: 'none',
            }}
          />
        </div>
        <div style={{ marginTop: 16, fontSize: 15, fontWeight: 500, color: 'rgba(249,249,248,0.7)', display: 'flex', flexWrap: 'wrap', gap: '4px 10px' }}>
          <span>One pipeline run</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span>15 jobs searched</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span>15 tailored résumés</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span>ATS scored</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span style={{ color: C.primary }}>ready to apply</span>
        </div>
      </div>
    </div>
  </SlideFrame>
);

/* =========================================================================
   SLIDE 5 — TRACTION
   ========================================================================= */
const TracStat = ({ value, label, sub, inverted }) => (
  <div style={{
    background: inverted ? C.dark : C.card,
    color: inverted ? '#F9F9F8' : C.fg,
    border: inverted ? 'none' : `1px solid ${C.border}`,
    borderRadius: 14, padding: '36px 36px 32px',
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    minHeight: 280,
  }}>
    <div style={{
      fontSize: 128, fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 0.95,
      color: inverted ? C.primary : C.fg, fontVariantNumeric: 'tabular-nums',
    }}>{value}</div>
    <div style={{ marginTop: 20 }}>
      <div style={{ fontSize: 22, fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 16, fontWeight: 400, marginTop: 4, color: inverted ? 'rgba(249,249,248,0.6)' : C.fg3 }}>{sub}</div>
    </div>
  </div>
);

const Slide5 = () => (
  <SlideFrame idx={5} total={10}>
    <Eyebrow style={{ marginBottom: 24 }}>Traction</Eyebrow>
    <Title style={{ maxWidth: 1500, marginBottom: S.titleGap }}>
      We shipped it to 100 students. Here's what they <Accent>said</Accent>.
    </Title>

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 22, marginBottom: 36 }}>
      <TracStat value="100" label="Confirmed Beta Users" sub="Guided demos completed" />
      <TracStat value="60" label="Active Waitlist" sub="Added since first demo day" />
      <TracStat value="90%" label="Will Pay $10–15/mo" sub="From post-demo intent survey" inverted />
    </div>

    <div style={{
      background: C.card, border: `1px solid ${C.border}`, borderRadius: 14,
      padding: '30px 36px',
      display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 26, alignItems: 'start',
    }}>
      <div style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 500,
        fontSize: 140, lineHeight: 0.8, color: C.primary,
      }}>“</div>
      <div>
        <div style={{ fontSize: 30, fontWeight: 400, color: C.fg, lineHeight: 1.35, letterSpacing: '-0.01em', marginBottom: 20 }}>
          I applied to fifteen roles in the time I used to spend rewriting one résumé. Three of them came back for interviews the next week.
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 42, height: 42, borderRadius: '50%',
            background: C.chip, border: `1px solid ${C.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 14, fontWeight: 600, color: C.fg2,
          }}>MR</div>
          <div style={{ fontSize: 16, color: C.fg2 }}>
            <span style={{ fontWeight: 600, color: C.fg }}>Maria R.</span>
            <span style={{ color: C.fg3, margin: '0 6px' }}>·</span>
            Senior CS, Texas A&amp;M · Beta user since Feb
          </div>
        </div>
      </div>
    </div>
  </SlideFrame>
);

/* =========================================================================
   SLIDE 6 — MARKET (nested stacked cards)
   ========================================================================= */
const Slide6 = () => (
  <SlideFrame idx={6} total={10}>
    <Eyebrow style={{ marginBottom: 24 }}>Market Opportunity</Eyebrow>
    <Title style={{ marginBottom: S.titleGap, maxWidth: 1500 }}>
      Start at A&amp;M. <Accent>Scale to schools like us.</Accent>
    </Title>

    <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, flex: 1, minHeight: 0, alignItems: 'center' }}>
      {/* Nested stacked cards — TAM > SAM > SOM */}
      <div style={{
        background: C.chip, borderRadius: 20,
        padding: 36, display: 'flex', flexDirection: 'column', gap: 28,
      }}>
        <div>
          <Eyebrow color={C.fg3} style={{ fontSize: 14, marginBottom: 8 }}>TAM</Eyebrow>
          <div style={{ fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', color: C.fg, lineHeight: 1, marginBottom: 8, fontVariantNumeric: 'tabular-nums' }}>$290M</div>
          <div style={{ fontSize: 18, color: C.fg2, fontWeight: 400 }}>9.7M career-track students × $10/mo × 3-mo season</div>
        </div>

        <div style={{
          background: C.accent, borderRadius: 16, padding: 30,
          display: 'flex', flexDirection: 'column', gap: 22, marginLeft: 20,
        }}>
          <div>
            <Eyebrow color={C.fg3} style={{ fontSize: 14, marginBottom: 8 }}>SAM</Eyebrow>
            <div style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em', color: C.fg, lineHeight: 1.05, marginBottom: 8 }}>Large Public</div>
            <div style={{ fontSize: 17, color: C.fg2, fontWeight: 400 }}>TAMU, UT Austin, Georgia Tech, Purdue, Michigan</div>
          </div>

          <div style={{
            background: C.primary, borderRadius: 14, padding: 28,
            marginLeft: 20, color: '#fff', position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: '-40%', right: '-20%', width: 300, height: 300, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(255,255,255,0.15), rgba(255,255,255,0) 65%)',
            }} />
            <div style={{ position: 'relative' }}>
              <Eyebrow color="rgba(255,255,255,0.85)" style={{ fontSize: 13, marginBottom: 14 }}>SOM</Eyebrow>
              <div style={{ fontSize: 72, fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 0.95, fontVariantNumeric: 'tabular-nums', marginBottom: 8 }}>18,900</div>
              <div style={{ fontSize: 18, fontWeight: 500, color: 'rgba(255,255,255,0.95)' }}>Eng, CS &amp; Business at TAMU</div>
            </div>
          </div>
        </div>
      </div>

      {/* Right: beachhead */}
      <div>
        <Pill style={{ marginBottom: 28 }}>Beachhead</Pill>
        <div style={{ fontSize: 52, fontWeight: 600, letterSpacing: '-0.022em', lineHeight: 1.05, color: C.fg, marginBottom: 44, textWrap: 'balance' }}>
          Texas A&amp;M Engineering &amp; Business.
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <CheckRow label="Our team is here." sub="6 co-founders, all current A&M students." />
          <CheckRow label="Our research is from here." sub="Validated with MITE, SWE, SHPE and career services." />
          <CheckRow label="Our first 30 users are here." sub="Guided demos on-campus, every week." />
        </div>
      </div>
    </div>
  </SlideFrame>
);

const CheckRow = ({ label, sub }) => (
  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 18 }}>
    <div style={{
      width: 36, height: 36, borderRadius: '50%',
      background: C.tint, border: `1px solid ${C.tintStr}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      marginTop: 2,
    }}>
      <IconCheck size={18} stroke={C.primary} />
    </div>
    <div>
      <div style={{ fontSize: 26, fontWeight: 600, color: C.fg, letterSpacing: '-0.01em' }}>{label}</div>
      <div style={{ fontSize: 17, color: C.fg2, marginTop: 2 }}>{sub}</div>
    </div>
  </div>
);

/* =========================================================================
   SLIDE 7 — COMPETITION (REVAMPED — 2D positioning chart)
   The chart shows price on X axis, tailoring quality on Y axis.
   Finch sits in the top-left "quality + accessible" quadrant alone.
   ========================================================================= */
const Slide7 = () => {
  // x = price (0 free → 100 premium), y = tailoring quality (0 none → 100 manual-grade)
  const pts = [
    { name: 'LazyApply',   price: '$99/yr',  x: 12, y: 10, side: 'right' },
    { name: 'ChatGPT loop',price: 'free',    x: 6,  y: 32, side: 'right' },
    { name: 'Simplify',    price: 'free/$40',x: 18, y: 28, side: 'right' },
    { name: 'Teal',        price: '$29/mo',  x: 62, y: 52, side: 'left' },
    { name: 'Kickresume',  price: '$40/mo',  x: 82, y: 60, side: 'left' },
  ];
  const finch = { x: 22, y: 90 };
  const QUAD_X = 50; // divider at mid-price
  const QUAD_Y = 50; // divider at mid-quality
  return (
    <SlideFrame idx={7} total={10}>
      <Eyebrow style={{ marginBottom: 24 }}>Our Edge</Eyebrow>
      <Title style={{ marginBottom: 18, maxWidth: 1500 }}>
        Finch is alone in the <Accent>top-left</Accent>.
      </Title>
      <Subtitle style={{ marginBottom: 40, maxWidth: 1300 }}>
        Manual-quality tailoring at a price students can actually pay. Everyone else picks one.
      </Subtitle>

      <div style={{ display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 56, flex: 1, minHeight: 0 }}>
        {/* Chart */}
        <div style={{
          position: 'relative', background: C.card, border: `1px solid ${C.border}`, borderRadius: 16,
          padding: '40px 48px 68px 96px',
          display: 'flex', flexDirection: 'column',
        }}>
          {/* Y axis label (rotated, with up arrow) */}
          <div style={{
            position: 'absolute', left: 24, top: '50%',
            transform: 'translate(-50%, -50%) rotate(-90deg)',
            transformOrigin: 'center', fontSize: 13, fontWeight: 700, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: C.fg2, whiteSpace: 'nowrap',
          }}>Tailoring Quality ↑</div>

          {/* Y tick labels */}
          <div style={{
            position: 'absolute', left: 44, top: 36, bottom: 64,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            fontSize: 11, fontWeight: 600, color: C.fg3, letterSpacing: '0.08em', textTransform: 'uppercase',
            textAlign: 'right', width: 48,
          }}>
            <span>Manual</span>
            <span>Mixed</span>
            <span>None</span>
          </div>

          {/* Plot area */}
          <div style={{
            position: 'relative', flex: 1, minHeight: 480,
            background: `linear-gradient(to top, ${C.chip} 0%, ${C.bg} 100%)`,
            borderRadius: 12, border: `1px solid ${C.border}`,
          }}>
            {/* Soft grid */}
            {[25, 50, 75].map(p => (
              <React.Fragment key={`grid-${p}`}>
                <div style={{ position: 'absolute', left: `${p}%`, top: 0, bottom: 0, width: 1, background: 'rgba(0,0,0,0.04)' }} />
                <div style={{ position: 'absolute', top: `${p}%`, left: 0, right: 0, height: 1, background: 'rgba(0,0,0,0.04)' }} />
              </React.Fragment>
            ))}

            {/* Quadrant dividers (heavier) */}
            <div style={{ position: 'absolute', left: `${QUAD_X}%`, top: 0, bottom: 0, width: 1, background: C.border }} />
            <div style={{ position: 'absolute', top: `${QUAD_Y}%`, left: 0, right: 0, height: 1, background: C.border }} />

            {/* Quadrant whisper labels */}
            <QuadLabel pos={{ top: 14, right: 16 }}  tone="muted">Quality + Expensive</QuadLabel>
            <QuadLabel pos={{ bottom: 14, left: 16 }} tone="muted">Cheap + Low Quality</QuadLabel>
            <QuadLabel pos={{ bottom: 14, right: 16 }} tone="muted">Expensive + Low Quality</QuadLabel>

            {/* THE WEDGE label — top-left quadrant highlight */}
            <div style={{
              position: 'absolute', left: 0, top: 0, width: `${QUAD_X}%`, height: `${QUAD_Y}%`,
              background: 'linear-gradient(135deg, rgba(241,90,41,0.10), rgba(241,90,41,0) 70%)',
              borderTopLeftRadius: 12, pointerEvents: 'none',
            }} />
            <div style={{
              position: 'absolute', left: 18, top: 16,
              fontSize: 10, fontWeight: 700, letterSpacing: '0.2em',
              textTransform: 'uppercase', color: C.primary,
            }}>The Wedge · Quality + Affordable</div>

            {/* "Where Finch lives" halo */}
            <div style={{
              position: 'absolute', left: `${finch.x}%`, top: `${100 - finch.y}%`,
              transform: 'translate(-50%, -50%)',
              width: 260, height: 260, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(241,90,41,0.22), rgba(241,90,41,0) 65%)',
              pointerEvents: 'none',
            }} />

            {/* Competitor dots */}
            {pts.map(p => (
              <div key={p.name} style={{
                position: 'absolute', left: `${p.x}%`, top: `${100 - p.y}%`,
                transform: 'translate(-50%, -50%)',
                display: 'flex', alignItems: 'center',
                flexDirection: p.side === 'left' ? 'row-reverse' : 'row',
                gap: 10,
              }}>
                <span style={{
                  width: 12, height: 12, borderRadius: '50%',
                  background: C.fg3, opacity: 0.8,
                  border: `2px solid ${C.bg}`, flexShrink: 0,
                }} />
                <div style={{ lineHeight: 1.1, textAlign: p.side === 'left' ? 'right' : 'left' }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: C.fg, whiteSpace: 'nowrap' }}>{p.name}</div>
                  <div style={{ fontSize: 12, fontWeight: 500, color: C.fg3, whiteSpace: 'nowrap', marginTop: 2 }}>{p.price}</div>
                </div>
              </div>
            ))}

            {/* Finch star */}
            <div style={{
              position: 'absolute', left: `${finch.x}%`, top: `${100 - finch.y}%`,
              transform: 'translate(-50%, -50%)',
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <span style={{
                width: 28, height: 28, borderRadius: '50%',
                background: C.primary, border: `3px solid ${C.bg}`,
                boxShadow: `0 0 0 6px rgba(241,90,41,0.2), 0 8px 24px rgba(241,90,41,0.35)`,
                flexShrink: 0,
              }} />
              <div style={{
                background: C.dark, color: '#F9F9F8', padding: '10px 16px', borderRadius: 10,
                fontSize: 18, fontWeight: 600, letterSpacing: '-0.005em', whiteSpace: 'nowrap',
                boxShadow: '0 8px 20px rgba(0,0,0,0.15)',
              }}>
                Finch · <span style={{ color: C.primary }}>$12/mo</span>
              </div>
            </div>
          </div>

          {/* X tick labels */}
          <div style={{
            position: 'absolute', left: 96, right: 48, bottom: 44,
            display: 'flex', justifyContent: 'space-between',
            fontSize: 11, fontWeight: 600, color: C.fg3, letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>
            <span>Free</span>
            <span>$10</span>
            <span>$25</span>
            <span>$40+</span>
          </div>

          {/* X axis label */}
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 18,
            textAlign: 'center', fontSize: 13, fontWeight: 700, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: C.fg2,
          }}>
            Price →
          </div>
        </div>

        {/* Right: three moats rail */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{
            background: C.dark, color: '#F9F9F8', borderRadius: 14, padding: '24px 28px',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'relative' }}>
              <Eyebrow color="rgba(241,90,41,0.9)" style={{ fontSize: 13, marginBottom: 10 }}>The Wedge</Eyebrow>
              <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em', lineHeight: 1.2, color: '#F9F9F8' }}>
                Manual tailoring quality, at a price a student can swipe for.
              </div>
            </div>
          </div>

          <EdgeRow n="01" title="Campus Distribution" desc="80K TAMU students. MITE · SWE · SHPE. A path no outside team can buy." />
          <EdgeRow n="02" title="Customer Empathy" desc="Every team member is the target user." />
          <EdgeRow n="03" title="Output Quality" desc="ATS-safe, one-page, enforced at the model level." />
          <EdgeRow n="04" title="Price Accessibility" desc="$12/mo. Competitors start at $29." />
        </div>
      </div>
    </SlideFrame>
  );
};

const QuadLabel = ({ pos, tone, children }) => (
  <div style={{
    position: 'absolute', ...pos,
    fontSize: 10, fontWeight: 700, letterSpacing: '0.18em',
    textTransform: 'uppercase',
    color: tone === 'muted' ? 'rgba(0,0,0,0.28)' : C.fg3,
    pointerEvents: 'none',
  }}>{children}</div>
);

const EdgeRow = ({ n, title, desc }) => (
  <div style={{
    background: C.card, border: `1px solid ${C.border}`, borderRadius: 12,
    padding: '16px 20px',
    display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, alignItems: 'flex-start',
  }}>
    <div style={{
      fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 500,
      fontSize: 34, lineHeight: 0.95, color: C.primary,
      fontVariantNumeric: 'tabular-nums',
    }}>{n}</div>
    <div>
      <div style={{ fontSize: 19, fontWeight: 600, color: C.fg, letterSpacing: '-0.005em', marginBottom: 2 }}>{title}</div>
      <div style={{ fontSize: 15, color: C.fg2, lineHeight: 1.4 }}>{desc}</div>
    </div>
  </div>
);

/* =========================================================================
   SLIDE 8 — UNIT ECONOMICS
   ========================================================================= */
const MicroStat = ({ label, value }) => (
  <div style={{
    background: C.card, border: `1px solid ${C.border}`, borderRadius: 12,
    padding: '16px 20px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  }}>
    <div style={{ fontSize: 15, fontWeight: 500, color: C.fg3, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{label}</div>
    <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', color: C.fg, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
  </div>
);

const Slide8 = () => (
  <SlideFrame idx={8} total={10}>
    <Eyebrow style={{ marginBottom: 24 }}>Unit Economics</Eyebrow>
    <Title style={{ marginBottom: S.titleGap, maxWidth: 1500 }}>
      The math works at <Accent>17 users</Accent>.
    </Title>

    <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 28, flex: 1, minHeight: 0 }}>
      <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 16, padding: 40, display: 'flex', flexDirection: 'column', gap: 32 }}>
        <Eyebrow color={C.fg3} style={{ fontSize: 14 }}>Revenue vs. Cost per User · Monthly</Eyebrow>

        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
            <div style={{ fontSize: 22, fontWeight: 600, color: C.fg }}>Revenue</div>
            <div style={{ fontSize: 48, fontWeight: 700, letterSpacing: '-0.025em', color: C.fg, fontVariantNumeric: 'tabular-nums' }}>$12.00</div>
          </div>
          <div style={{
            height: 42, background: C.dark, borderRadius: 8,
            display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
            padding: '0 16px', color: '#F9F9F8', fontSize: 16, fontWeight: 600,
            fontVariantNumeric: 'tabular-nums',
          }}>100%</div>
        </div>

        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
            <div style={{ fontSize: 20, fontWeight: 600, color: C.fg2 }}>
              Cost
              <span style={{ fontWeight: 400, color: C.fg3, marginLeft: 8, fontSize: 17 }}>· 8 runs × $0.19</span>
            </div>
            <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', color: C.fg2, fontVariantNumeric: 'tabular-nums' }}>$1.52</div>
          </div>
          <div style={{ height: 42, background: C.chip, borderRadius: 8, position: 'relative' }}>
            <div style={{
              position: 'absolute', left: 0, top: 0, bottom: 0, width: '12.67%',
              background: C.fg2, borderRadius: 8,
              display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
              padding: '0 12px', color: '#F9F9F8', fontSize: 14, fontWeight: 600,
              fontVariantNumeric: 'tabular-nums', minWidth: 68,
            }}>13%</div>
          </div>
        </div>

        <div style={{
          marginTop: 'auto', background: C.tint, border: `1px solid ${C.tintStr}`, borderRadius: 12,
          padding: '22px 28px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
        }}>
          <div>
            <Eyebrow style={{ fontSize: 13, marginBottom: 6 }}>Contribution Margin</Eyebrow>
            <div style={{ fontSize: 20, fontWeight: 500, color: C.fg }}>
              $10.48 kept for every $12 collected.
            </div>
          </div>
          <div style={{
            fontSize: 88, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1,
            color: C.primary, fontVariantNumeric: 'tabular-nums',
          }}>87%</div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div style={{
          background: C.dark, color: '#F9F9F8', borderRadius: 16, padding: 40,
          flex: 1, position: 'relative', overflow: 'hidden',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
        }}>
          <div style={{ position: 'relative' }}>
            <Eyebrow color="rgba(241,90,41,0.9)" style={{ fontSize: 14, marginBottom: 10 }}>Breakeven</Eyebrow>
            <div style={{ fontSize: 18, fontWeight: 500, color: 'rgba(249,249,248,0.7)', marginBottom: 8 }}>
              Infra + model spend covered at
            </div>
            <div style={{
              fontSize: 240, fontWeight: 700, letterSpacing: '-0.05em', lineHeight: 0.85,
              color: C.primary, fontVariantNumeric: 'tabular-nums',
            }}>17</div>
            <div style={{ fontSize: 28, fontWeight: 600, marginTop: 14, color: '#F9F9F8' }}>
              paying users per month
            </div>
            <div style={{ fontSize: 15, color: 'rgba(249,249,248,0.55)', marginTop: 12, lineHeight: 1.45 }}>
              Costs validated through actual pipeline runs, not projections.
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <MicroStat label="Cost / pipeline run" value="$0.19" />
          <MicroStat label="Runs / user / month" value="8" />
        </div>
      </div>
    </div>
  </SlideFrame>
);

/* =========================================================================
   SLIDE 9 — VISION (REVAMPED — cinematic typography)
   ========================================================================= */
const Slide9 = () => (
  <SlideFrame idx={9} total={10} dark pad={`${S.py}px ${S.px}px`}>
    {/* giant glow */}
    <div style={{
      position: 'absolute', top: '-15%', right: '-10%', width: 1100, height: 1100, borderRadius: '50%',
      background: 'radial-gradient(circle, rgba(241,90,41,0.22), rgba(241,90,41,0) 55%)',
      pointerEvents: 'none',
    }} />
    <div style={{
      position: 'absolute', bottom: '-20%', left: '-10%', width: 800, height: 800, borderRadius: '50%',
      background: 'radial-gradient(circle, rgba(241,90,41,0.1), rgba(241,90,41,0) 60%)',
      pointerEvents: 'none',
    }} />

    <Eyebrow style={{ marginBottom: 32, position: 'relative' }}>Vision</Eyebrow>

    {/* Huge headline */}
    <div style={{ position: 'relative', maxWidth: 1700, marginBottom: 80 }}>
      <div style={{
        fontSize: 118, fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1.0,
        color: '#F9F9F8',
      }}>
        Hiring used to be a
      </div>
      <div style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
        fontSize: 180, letterSpacing: '-0.03em', lineHeight: 0.95,
        color: C.primary, marginTop: 10,
      }}>
        handshake<span style={{ color: '#F9F9F8', fontFamily: 'var(--font-sans)', fontWeight: 700, fontStyle: 'normal' }}>.</span>
      </div>
    </div>

    {/* Milestone tick marks */}
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0,
      borderTop: `1px solid ${C.darkBord}`, paddingTop: 36, position: 'relative',
    }}>
      <VMile stage="Now" active label="ChatGPT loop, solved." sub="Real tailoring every time." />
      <VMile stage="Next" label="Portal grind, ended." sub="Workday collapses into one click." />
      <VMile stage="Later" label="Coinflip, ended." sub="Skills route to roles. Students get read." />
    </div>

    <div style={{
      marginTop: 'auto', paddingTop: 32,
      fontSize: 24, fontWeight: 400, lineHeight: 1.45, textWrap: 'pretty',
      color: 'rgba(249,249,248,0.6)', maxWidth: 1600, position: 'relative',
    }}>
      <span style={{ color: C.primary, fontWeight: 600 }}>Finch</span> is the way back.
    </div>
  </SlideFrame>
);

const VMile = ({ stage, label, sub, active }) => (
  <div style={{ paddingRight: 30, position: 'relative' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
      <span style={{
        width: 14, height: 14, borderRadius: '50%',
        background: active ? C.primary : 'transparent',
        border: active ? 'none' : `1.5px solid rgba(249,249,248,0.35)`,
        boxShadow: active ? `0 0 0 6px rgba(241,90,41,0.2)` : 'none',
      }} />
      <span style={{
        fontSize: 14, fontWeight: 700, letterSpacing: '0.18em',
        textTransform: 'uppercase',
        color: active ? C.primary : 'rgba(249,249,248,0.55)',
      }}>{stage}</span>
    </div>
    <div style={{ fontSize: 32, fontWeight: 600, color: '#F9F9F8', letterSpacing: '-0.015em', lineHeight: 1.15, marginBottom: 10 }}>{label}</div>
    <div style={{ fontSize: 17, color: 'rgba(249,249,248,0.6)', lineHeight: 1.45, textWrap: 'pretty' }}>{sub}</div>
  </div>
);

/* =========================================================================
   SLIDE 10 — TEAM (6 people)
   ========================================================================= */
const FounderCard = ({ initials, name, major, role }) => (
  <div style={{
    background: C.card, border: `1px solid ${C.border}`, borderRadius: 14,
    padding: '32px 30px',
    display: 'flex', flexDirection: 'column', gap: 20,
  }}>
    <div style={{
      width: 72, height: 72, borderRadius: '50%',
      background: C.tint, border: `1px solid ${C.tintStr}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 22, fontWeight: 600, color: C.primary,
    }}>{initials}</div>
    <div>
      <div style={{ fontSize: 24, fontWeight: 600, color: C.fg, letterSpacing: '-0.015em', marginBottom: 4 }}>{name}</div>
      <div style={{ fontSize: 15, color: C.primary, fontWeight: 500, marginBottom: 12 }}>{major}</div>
      <div style={{ fontSize: 16, color: C.fg2, lineHeight: 1.45 }}>{role}</div>
    </div>
  </div>
);

const EngRow = ({ initials, name }) => (
  <div style={{
    background: C.card, border: `1px solid ${C.border}`, borderRadius: 12,
    padding: '16px 22px',
    display: 'flex', alignItems: 'center', gap: 16,
  }}>
    <div style={{
      width: 44, height: 44, borderRadius: '50%',
      background: C.chip, color: C.fg2,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 14, fontWeight: 600,
    }}>{initials}</div>
    <div>
      <div style={{ fontSize: 18, fontWeight: 600, color: C.fg, letterSpacing: '-0.005em' }}>{name}</div>
      <div style={{ fontSize: 14, color: C.fg3 }}>Software Engineer</div>
    </div>
  </div>
);

const Slide10 = () => (
  <SlideFrame idx={10} total={10}>
    <Eyebrow style={{ marginBottom: 24 }}>The Team</Eyebrow>
    <Title style={{ marginBottom: S.titleGap, maxWidth: 1500 }}>
      Aggies building for <Accent>Aggies</Accent>.
    </Title>

    <div style={{ marginBottom: 24 }}>
      <SectionLabel n="01">Co-founders</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
        <FounderCard initials="CL" name="Carlos Luna-Peña" major="Computer Science"
          role="Engineering · Backend · Prompt Engineering" />
        <FounderCard initials="JT" name="Jose Tirado Resendez" major="Industrial Engineering"
          role="Product Vision · Operations · Team Strategy" />
        <FounderCard initials="NG" name="Nicanor Garza-Zazueta" major="Industrial Distribution"
          role="Growth · User Acquisition · Partnerships" />
      </div>
    </div>

    <div>
      <SectionLabel n="02">Engineering</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
        <EngRow initials="PK" name="Prince Kumar" />
        <EngRow initials="PS" name="Patrick Semler" />
        <EngRow initials="PB" name="Pri Biswal" />
      </div>
    </div>

    <div style={{
      marginTop: 'auto', paddingTop: 36,
      display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 18,
      fontSize: 18, color: C.fg2,
    }}>
      <Pill>6-person team</Pill>
      <span>Zero outside funding.</span>
      <span style={{ color: C.fg3 }}>·</span>
      <span>All Texas A&amp;M students.</span>
      <span style={{ color: C.fg3 }}>·</span>
      <span>Building from our dorms, for our classmates.</span>
    </div>
  </SlideFrame>
);

Object.assign(window, {
  Slide1, Slide2, Slide3, Slide4, Slide5, Slide6, Slide7, Slide8, Slide9, Slide10,
});