/* slides.jsx — Throughline deck · the 14 slide bodies.
   Reads BrowserFrame / RecordRow / CoverRecord (mocks.jsx) and the DS namespace.
   Each slide is a component; SLIDES[] carries nav + header metadata. */
const NSS = () => window.ThroughlineDesignSystem_3325f5 || {};

/* ── shared bits ───────────────────────────────────────────────────── */
function Kicker({ children, tone }) {
  return <p className={'s-kicker' + (tone ? ' ' + tone : '')}>{children}</p>;
}
function Head({ children, size = 46 }) {
  return <h1 className="s-display" style={{ fontSize: `clamp(30px, ${size / 13.6}vw, ${size}px)` }}>{children}</h1>;
}
function Lede({ children, style }) { return <p className="s-lede" style={style}>{children}</p>; }

/* a small status-dot chip (slide 1) */
function Chip({ dot, children }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 9, padding: '8px 15px',
      borderRadius: 999, border: '1px solid var(--tl-line)', background: 'var(--tl-paper-white)',
      fontFamily: 'var(--tl-sans)', fontSize: 13, fontWeight: 500, color: 'var(--tl-ink-soft)', whiteSpace: 'nowrap',
    }}>
      <span style={{ width: 8, height: 8, borderRadius: 8, background: dot }} />{children}
    </span>
  );
}

/* compact info card (questions / how-it-works / what-it-isn't) */
function MiniCard({ kicker, kTone, title, body, accent }) {
  return (
    <div className="s-card" style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 10, height: '100%', borderTop: accent ? `3px solid ${accent}` : undefined }}>
      <Kicker tone={kTone}>{kicker}</Kicker>
      <p className="s-cardtitle">{title}</p>
      <p className="s-cardbody" style={{ marginTop: 'auto' }}>{body}</p>
    </div>
  );
}

/* the 3-step flow band (slide 2) */
function StepCard({ step, title, sub }) {
  return (
    <div className="s-card" style={{ flex: 1, padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 9 }}>
      <span className="s-mono" style={{ color: 'var(--tl-brass)' }}>{step}</span>
      <p className="s-cardtitle" style={{ fontSize: 17 }}>{title}</p>
      <p className="s-cardbody">{sub}</p>
    </div>
  );
}
function Arrow() {
  return (
    <span style={{ flex: '0 0 auto', alignSelf: 'center', color: 'var(--tl-stone-deep)' }}>
      <svg width="26" height="16" viewBox="0 0 26 16" fill="none"><path d="M1 8h22m0 0l-6-6m6 6l-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
    </span>
  );
}

/* dark side callout (slides 12 & 14) */
function DarkCallout({ kicker, title, body, serifTitle = true }) {
  return (
    <div style={{
      background: 'var(--tl-graphite)', borderRadius: 14, padding: '32px 34px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.18), 0 26px 56px rgba(0,0,0,0.22)',
    }}>
      <p style={{ fontFamily: 'var(--tl-mono)', fontSize: 10, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--tl-brass-light)', margin: 0 }}>{kicker}</p>
      <p style={{ fontFamily: serifTitle ? 'var(--tl-serif)' : 'var(--tl-sans)', fontWeight: 500, fontSize: 26, lineHeight: 1.2, letterSpacing: '-0.01em', color: '#F4F1E9', margin: '16px 0 0', textWrap: 'pretty' }}>{title}</p>
      <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 14.5, lineHeight: 1.6, color: 'rgba(244,241,233,0.72)', margin: '16px 0 0', textWrap: 'pretty' }}>{body}</p>
    </div>
  );
}

/* labelled point list (slide 12) */
function PointRow({ title, body }) {
  return (
    <div style={{ paddingLeft: 16, borderLeft: '2px solid var(--tl-stone)' }}>
      <p style={{ fontFamily: 'var(--tl-sans)', fontWeight: 700, fontSize: 15, color: 'var(--tl-ink)', margin: 0 }}>{title}</p>
      <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--tl-soft)', margin: '5px 0 0', textWrap: 'pretty' }}>{body}</p>
    </div>
  );
}

/* bullet for slide 4 */
function Bullet({ c, children }) {
  return (
    <li style={{ display: 'flex', gap: 13, alignItems: 'flex-start' }}>
      <span style={{ width: 7, height: 7, borderRadius: 2, background: c, marginTop: 7, flex: '0 0 auto' }} />
      <span style={{ fontFamily: 'var(--tl-sans)', fontSize: 14.5, lineHeight: 1.5, color: 'var(--tl-ink-soft)' }}>{children}</span>
    </li>
  );
}

/* layout: statement left, mock right */
function Split({ children }) {
  return <div className="s-split">{children}</div>;
}
function ScopeGlyphS({ size = 22, c }) {
  const col = c || 'var(--tl-evergreen)';
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="9" r="3.4" stroke={col} strokeWidth="1.6"/><path d="M5.5 19c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6" stroke={col} strokeWidth="1.6" strokeLinecap="round"/></svg>;
}
function LensGlyph({ size = 22, c }) {
  const col = c || 'var(--tl-brass)';
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><circle cx="10.5" cy="10.5" r="6.2" stroke={col} strokeWidth="1.6"/><path d="M15.2 15.2L20 20" stroke={col} strokeWidth="1.6" strokeLinecap="round"/></svg>;
}

/* ════════════════════════════════════════════════════════════════════ */
/* SLIDES                                                                 */
/* ════════════════════════════════════════════════════════════════════ */

function S01() {
  return (
    <div className="tl-anim s-cover" data-active="true">
      <div className="s-cover-copy">
        <Head size={58}>Make the expertise in your business a saleable asset.</Head>
        <Lede style={{ marginTop: 26, fontSize: 17 }}>Throughline turns the operating knowledge that runs a business into a reviewed, source-backed asset that survives a sale, a succession, or a handover.</Lede>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 30 }}>
          <Chip dot="var(--tl-evergreen)">Sale readiness</Chip>
          <Chip dot="var(--tl-brass)">Buyer confidence</Chip>
        </div>
      </div>
      <div className="s-cover-visual"><CoverRecord /></div>
    </div>
  );
}

function S02() {
  return (
    <div className="tl-anim" data-active="true" style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 38 }}>
      <div className="s-row2">
        <Head size={40}>Financials show how the business runs with you. Throughline shows how it can run without you.</Head>
        <div style={{ borderLeft: '3px solid var(--tl-brass)', paddingLeft: 20, alignSelf: 'center' }}>
          <p style={{ fontFamily: 'var(--tl-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: 'var(--tl-ink-soft)', margin: 0, textWrap: 'pretty' }}>
            The problem is not that the value is missing. It is that a buyer can't see it, and can't trust what they can't see.
          </p>
          <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--tl-soft)', margin: '16px 0 0', textWrap: 'pretty' }}>
            Buyers price what they can't verify as risk — discounted offers, longer earn-outs, and deals that stall in diligence.
          </p>
        </div>
      </div>
      <div className="s-flow">
        <StepCard step="Where value sits" title="Judgement, relationships, exceptions, memory." sub="Held by the owner and a few key people." />
        <Arrow />
        <StepCard step="What Throughline does" title="Captures, reviews, and source-backs the knowledge." sub="Raw recollection becomes a governed record." />
        <Arrow />
        <StepCard step="What becomes transferable" title="Answers, gaps, evidence, and handover continuity." sub="A buyer can see how the business keeps running." />
      </div>
    </div>
  );
}

function S03() {
  const cards = [
    ['Pricing', 'Why is this job priced that way?', 'The answer depends on customer history, risk, capacity, and judgement that lives in a few heads.'],
    ['Customers', 'What makes this relationship safe or fragile?', 'CRM notes rarely capture the context a new owner needs to keep the account.'],
    ['Suppliers', "Who do we call when the usual supplier can't deliver?", 'The workarounds and informal preferences sit outside any formal process.'],
    ['Handover', 'What do we still not know?', 'Unanswered questions need a review loop, not an improvised answer.'],
  ];
  return (
    <div className="tl-anim" data-active="true" style={{ width: '100%' }}>
      <Head size={42}>Documents answer what exists.<br/>The buyer needs to know how it works.</Head>
      <div className="s-grid4" style={{ marginTop: 40 }}>
        {cards.map(([k, q, b]) => <MiniCard key={k} kicker={k} title={q} body={b} />)}
      </div>
      <p style={{ fontFamily: 'var(--tl-serif)', fontStyle: 'italic', fontSize: 17, color: 'var(--tl-ink-soft)', marginTop: 28 }}>
        Throughline turns these into source-backed answers, or honest, visible gaps.
      </p>
    </div>
  );
}

function S04() {
  return (
    <div className="tl-anim" data-active="true" style={{ width: '100%' }}>
      <Head size={46}>One asset, working for both sides of the table.</Head>
      <div className="s-two" style={{ marginTop: 40 }}>
        <div className="s-card" style={{ padding: '26px 28px', borderTop: '3px solid var(--tl-evergreen)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 18 }}>
            <ScopeGlyphS c="var(--tl-evergreen)" />
            <span className="s-mono" style={{ color: 'var(--tl-evergreen)' }}>For the business owner</span>
          </div>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Bullet c="var(--tl-evergreen)">Your expertise becomes an asset on the table, not a risk to explain away.</Bullet>
            <Bullet c="var(--tl-evergreen)">You answer the hard questions once, on the record, instead of on every call during diligence.</Bullet>
            <Bullet c="var(--tl-evergreen)">You can step back without the business stalling or your phone becoming the help desk.</Bullet>
            <Bullet c="var(--tl-evergreen)">You go to market more transferable, which is what buyers pay for.</Bullet>
          </ul>
        </div>
        <div className="s-card" style={{ padding: '26px 28px', borderTop: '3px solid var(--tl-brass)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 18 }}>
            <LensGlyph c="var(--tl-brass)" />
            <span className="s-mono" style={{ color: 'var(--tl-brass)' }}>For the potential buyer</span>
          </div>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Bullet c="var(--tl-brass)">You buy with the operating knowledge in hand, not just the financials.</Bullet>
            <Bullet c="var(--tl-brass)">Every answer is reviewed and traceable to its source, so you can trust what you are told.</Bullet>
            <Bullet c="var(--tl-brass)">When something is not known, you see the gap honestly instead of a confident guess.</Bullet>
            <Bullet c="var(--tl-brass)">Day one is a running start, not a scramble to work out how things are done.</Bullet>
          </ul>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 18, padding: '15px 22px', borderRadius: 'var(--tl-radius-md)', background: 'var(--tl-stone-soft)', border: '1px solid var(--tl-line)' }}>
        <span className="s-mono" style={{ color: 'var(--tl-brass)', whiteSpace: 'nowrap' }}>For the advisor between them</span>
        <span style={{ fontFamily: 'var(--tl-sans)', fontSize: 14, lineHeight: 1.5, color: 'var(--tl-ink-soft)' }}>Owner dependency stops being talk. The readiness conversation becomes something you can show — the full picture is on slide 13.</span>
      </div>
    </div>
  );
}

/* ── Slide 5 deal-timeline variant ─────────────────────────────────── */
function PhaseCol({ phase, when, items }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
      <div style={{ textAlign: 'center', marginBottom: 16 }}>
        <div style={{ fontFamily: 'var(--tl-serif)', fontSize: 21, fontWeight: 500, color: 'var(--tl-ink)' }}>{phase}</div>
        <div style={{ fontFamily: 'var(--tl-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--tl-soft)', marginTop: 4 }}>{when}</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map(([t2, b2]) => (
          <div key={t2} className="s-card" style={{ padding: '16px 18px' }}>
            <p className="s-cardtitle" style={{ fontSize: 15 }}>{t2}</p>
            <p className="s-cardbody" style={{ marginTop: 6 }}>{b2}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
function DealTimeline() {
  const dot = { width: 13, height: 13, borderRadius: 13, background: 'var(--tl-evergreen)', border: '3px solid var(--stage)', boxSizing: 'content-box' };
  return (
    <div style={{ marginTop: 32 }}>
      <div style={{ position: 'relative', marginBottom: 16 }}>
        <div style={{ position: 'absolute', left: '16.6%', right: '16.6%', top: '50%', height: 2, marginTop: -1, background: 'var(--tl-stone)' }} />
        <div style={{ display: 'flex', gap: 22, position: 'relative' }}>
          {[0, 1, 2].map((i) => <div key={i} style={{ flex: 1, display: 'flex', justifyContent: 'center' }}><span style={dot} /></div>)}
        </div>
      </div>
      <div style={{ display: 'flex', gap: 22, alignItems: 'flex-start' }}>
        <PhaseCol phase="Prepare" when="Before market" items={[['Capture', 'The right people talk; interviews, transcripts and documents go in.'], ['Review', 'A human checks each record before anything is approved.']]} />
        <PhaseCol phase="Prove" when="In diligence" items={[['Answer', 'Scoped answers from approved records, with the source — or an honest gap.'], ['Evidence Pack', 'A reviewed, read-only view, scoped to each reader.']]} />
        <PhaseCol phase="Hand over" when="After settlement" items={[['90-Day Handover', 'New questions route back into review as the new owner takes the controls.']]} />
      </div>
    </div>
  );
}
function S05({ t }) {
  const cards = [
    ['Capture', 'The right people talk.', 'Interviews, transcripts, notes, and existing material go in. No one has to stop and write the manual.'],
    ['Review', 'A human checks the record.', 'Nothing is trusted just because it was captured. Review is the gate before anything is approved.'],
    ['Access', 'Each role sees the right layer.', 'Owner, advisor, buyer, successor, and legal reviewer access is scoped separately.'],
    ['Transfer', 'The asset keeps working.', 'Answers, gaps, Evidence Packs, and a 90-day handover turn the record into a working transfer tool.'],
  ];
  return (
    <div className="tl-anim" data-active="true" style={{ width: '100%' }}>
      <Head size={48}>From first interview to ninety days after settlement.</Head>
      {t && t.s5Layout === 'cards'
        ? <div className="s-grid4" style={{ marginTop: 40 }}>{cards.map(([k, t2, b], i) => <MiniCard key={k} kicker={`Step ${i + 1} · ${k}`} title={t2} body={b} />)}</div>
        : <DealTimeline />}
    </div>
  );
}

function S06() {
  const stats = [['24', 'Interviews recorded'], ['61', 'Records in Knowledge Vault'], ['7', 'Open gaps', true], ['3', 'Active buyer links']];
  return (
    <div className="tl-anim" data-active="true"><Split>
      <div>
        <Head size={46}>Readiness you can point to, not a feeling.</Head>
        <Lede style={{ marginTop: 24 }}>The workspace shows what has been captured, what is reviewed and in the Knowledge Vault, what is still an open question, and who has access.</Lede>
      </div>
      <BrowserFrame url="throughline.app/transfer-readiness" tag="Placeholder · in design">
        <p style={{ fontFamily: 'var(--tl-serif)', fontWeight: 500, fontSize: 19, color: 'var(--tl-ink)', margin: '2px 0 16px' }}>Transfer readiness</p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {stats.map(([n, l, gap]) => (
            <div key={l} style={{ border: '1px solid var(--tl-hair)', borderRadius: 9, padding: '15px 17px', background: 'var(--tl-paper-white)' }}>
              <div style={{ fontFamily: 'var(--tl-serif)', fontSize: 30, fontWeight: 500, color: gap ? 'var(--tl-terracotta)' : 'var(--tl-ink)' }}>{n}</div>
              <div style={{ fontFamily: 'var(--tl-sans)', fontSize: 12.5, color: 'var(--tl-soft)', marginTop: 3 }}>{l}</div>
            </div>
          ))}
        </div>
        <button className="tl-btn-primary" style={{ marginTop: 16 }}>Record an interview</button>
      </BrowserFrame>
    </Split></div>
  );
}

function S07() {
  return (
    <div className="tl-anim" data-active="true" style={{ width: '100%' }}>
      <Head size={44}>The right people talk.<br/>Every answer keeps its source.</Head>
      <div className="s-two" style={{ marginTop: 36 }}>
        <div>
          <Kicker tone="brass">Step 1 · Capture</Kicker>
          <BrowserFrame url="throughline.app/capture" tag="Placeholder" style={{ marginTop: 12 }}>
            <p style={{ fontFamily: 'var(--tl-serif)', fontWeight: 500, fontSize: 17, color: 'var(--tl-ink)', margin: '0 0 14px' }}>Add to the capture path</p>
            <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
              {['Interview', 'Transcript', 'Document', 'Note'].map((t, i) => (
                <span key={t} style={{ fontFamily: 'var(--tl-sans)', fontSize: 12, fontWeight: 500, padding: '6px 12px', borderRadius: 6, border: '1px solid var(--tl-line)', background: i === 0 ? 'var(--tl-evergreen-tint)' : 'transparent', color: i === 0 ? 'var(--tl-evergreen)' : 'var(--tl-soft)' }}>{t}</span>
              ))}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <RecordRow title="Pricing: how jobs get quoted, and the exceptions" sub="REC-0188 · 24:10" typeTag="Interview" tone="evergreen" />
              <RecordRow title="Supplier escalation, who we call" sub="REC-0191" typeTag="Document" />
            </div>
            <button className="tl-btn-primary" style={{ marginTop: 16 }}>Record an interview</button>
          </BrowserFrame>
          <p className="s-cardbody" style={{ marginTop: 12 }}>Interviews, transcripts, notes, and documents go in, without anyone stopping to write a manual.</p>
        </div>
        <div>
          <Kicker tone="brass">Step 2 · Source records</Kicker>
          <BrowserFrame url="throughline.app/sources" tag="Placeholder" style={{ marginTop: 12 }}>
            <p style={{ fontFamily: 'var(--tl-serif)', fontWeight: 500, fontSize: 17, color: 'var(--tl-ink)', margin: '0 0 14px' }}>Source records</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <RecordRow title="Why the Hendersons get net 60" sub="FI-2026-0188" typeTag="Interview" />
              <RecordRow title="Fabricator overflow — the workaround" sub="FI-2026-0203" typeTag="Transcript" />
              <RecordRow title="Quoting template, current version" sub="DOC-114" typeTag="Document" />
            </div>
            <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 12, color: 'var(--tl-faint)', marginTop: 14 }}>Each record links back to the source it came from.</p>
          </BrowserFrame>
          <p className="s-cardbody" style={{ marginTop: 12 }}>Every approved claim traces back to the interview or document it came from.</p>
        </div>
      </div>
    </div>
  );
}

function S08() {
  return (
    <div className="tl-anim" data-active="true"><Split>
      <div>
        <Head size={46}>Nothing reaches a buyer just because it was said.</Head>
        <Lede style={{ marginTop: 24 }}>Review is the gate. Captured knowledge enters as a proposal; only approved, source-cited records land in the Knowledge Vault. The Vault is the governed source everything else is built from.</Lede>
      </div>
      <BrowserFrame url="throughline.app · Knowledge Vault" tag="Placeholder · in design">
        <p style={{ fontFamily: 'var(--tl-serif)', fontWeight: 500, fontSize: 19, color: 'var(--tl-ink)', margin: '2px 0 16px' }}>Knowledge Vault</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <RecordRow title="Pricing judgement for priority clients" sub="KV-014" status="reviewed" />
          <RecordRow title="Key account: the Henderson relationship" sub="KV-021" status="reviewed" />
          <RecordRow title="Supplier escalation path" sub="KV-033" status="reviewed" />
          <RecordRow title="Fabricator overflow — who we use" sub="KV-041" status="in-review" />
        </div>
        <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 12, color: 'var(--tl-faint)', marginTop: 14 }}>Approved records carry their source citation.</p>
      </BrowserFrame>
    </Split></div>
  );
}

function OpCard({ kicker, kTone, question, answerLabel, answerLabelTone, answer, footer, gap }) {
  return (
    <div style={{ background: 'var(--tl-graphite)', borderRadius: 14, padding: '24px 26px', boxShadow: '0 2px 8px rgba(0,0,0,0.16), 0 22px 48px rgba(0,0,0,0.20)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(244,241,233,0.5)' }}>Throughline operating layer</span>
        <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 8.5, fontWeight: 600, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'var(--tl-brass-light)', border: '1px solid rgba(194,161,78,0.4)', borderRadius: 5, padding: '3px 8px', whiteSpace: 'nowrap' }}>Representation</span>
      </div>
      <p style={{ fontFamily: 'var(--tl-serif)', fontWeight: 500, fontSize: 22, color: '#F4F1E9', margin: '14px 0 18px' }}>Check the Knowledge Vault</p>
      <p style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'rgba(244,241,233,0.42)', margin: '0 0 8px' }}>Buyer question</p>
      <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(244,241,233,0.10)', borderRadius: 8, padding: '12px 14px', fontFamily: 'var(--tl-sans)', fontSize: 13.5, color: 'rgba(244,241,233,0.9)' }}>{question}</div>
      <p style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, letterSpacing: '0.13em', textTransform: 'uppercase', color: answerLabelTone, margin: '18px 0 8px' }}>{answerLabel}</p>
      <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 13.5, lineHeight: 1.6, color: 'rgba(244,241,233,0.78)', margin: 0 }}>{answer}</p>
      <div style={{ height: 1, background: 'rgba(244,241,233,0.10)', margin: '16px 0' }} />
      {footer}
    </div>
  );
}

function S09() {
  return (
    <div className="tl-anim" data-active="true" style={{ width: '100%' }}>
      <Head size={46}>A source-backed answer, or an honest gap. Never a guess.</Head>
      <Lede style={{ marginTop: 20, maxWidth: '62ch' }}>A buyer asks through a scoped link. Throughline answers from reviewed records, with the source attached. When the Vault has no approved answer, it logs a gap for review instead of guessing.</Lede>
      <div className="s-two" style={{ marginTop: 30 }}>
        <div>
          <Kicker brass="true" tone="brass">A source-backed answer</Kicker>
          <div style={{ marginTop: 12 }}>
            <OpCard
              question="How does the team price enterprise contracts?"
              answerLabel="Answer · 1 source" answerLabelTone="var(--tl-brass-light)"
              answer="Lead with value before price. When a buyer asks about price, explain the value proof before the number. Limited to approved Vault material and the cited source below."
              footer={<div style={{ display: 'flex', alignItems: 'center', gap: 9 }}><span style={{ width: 6, height: 6, borderRadius: 6, background: 'var(--tl-brass-light)' }} /><span style={{ fontFamily: 'var(--tl-sans)', fontSize: 12, color: 'rgba(244,241,233,0.7)', flex: 1 }}>Interview · pricing and commercials</span><span style={{ fontFamily: 'var(--tl-mono)', fontSize: 10, color: 'var(--tl-brass-light)' }}>FI-2026-0312</span></div>}
            />
          </div>
          <p className="s-cardbody" style={{ marginTop: 12 }}>An answer grounded in approved records, with its provenance.</p>
        </div>
        <div>
          <Kicker tone="gap">An honest gap</Kicker>
          <div style={{ marginTop: 12 }}>
            <OpCard
              question="Which supplier do we use when the main fabricator is over capacity?"
              answerLabel="No approved answer yet" answerLabelTone="var(--tl-terra-soft)"
              answer="The Knowledge Vault does not hold an approved answer for this question. The gap has been logged for review, so the record can be resolved without inventing an unsupported answer."
              footer={<span style={{ fontFamily: 'var(--tl-mono)', fontSize: 11, color: 'rgba(244,241,233,0.6)' }}>Reference: gap_3f9c2a</span>}
            />
          </div>
          <p className="s-cardbody" style={{ marginTop: 12 }}>No approved answer becomes a logged gap, not a guess.</p>
        </div>
      </div>
    </div>
  );
}

function S10() {
  return (
    <div className="tl-anim" data-active="true"><Split>
      <div>
        <Head size={46}>The buyer sees a pack, not your whole business.</Head>
        <Lede style={{ marginTop: 24 }}>When it is time to share, Throughline produces an Evidence Pack: a reviewed, read-only view derived from the Vault. Buyer preview, advisor, legal reviewer, and post-sale owner each see only what their scope allows. The Vault stays the source.</Lede>
      </div>
      <BrowserFrame url="throughline.app/transfer-pack" tag="Placeholder · in design">
        <p style={{ fontFamily: 'var(--tl-serif)', fontWeight: 500, fontSize: 19, color: 'var(--tl-ink)', margin: '2px 0 14px' }}>Evidence Pack</p>
        <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
          {['Buyer preview', 'Advisor', 'Legal reviewer', 'Post-sale owner'].map((t, i) => (
            <span key={t} style={{ fontFamily: 'var(--tl-sans)', fontSize: 12, fontWeight: 500, padding: '6px 12px', borderRadius: 6, background: i === 0 ? 'var(--tl-graphite)' : 'transparent', color: i === 0 ? '#F4F1E9' : 'var(--tl-soft)', border: i === 0 ? 'none' : '1px solid var(--tl-line)' }}>{t}</span>
          ))}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <RecordRow title="Pricing approach — buyer summary" sub="4 sources" status="reviewed" />
          <RecordRow title="Account continuity overview" sub="3 sources" status="reviewed" />
        </div>
        <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 12, color: 'var(--tl-faint)', marginTop: 14 }}>Read-only, derived from the Knowledge Vault.</p>
      </BrowserFrame>
    </Split></div>
  );
}

function S11() {
  const steps = [['01', 'First weeks', 'New owner asks, the Vault answers.'], ['30', 'Day 30 check-in', 'New questions routed into review.'], ['90', 'Day 90 review', 'Gap log closed out, record signed off.']];
  return (
    <div className="tl-anim" data-active="true"><Split>
      <div>
        <Head size={46}>The handover doesn't end the day the deal closes.</Head>
        <Lede style={{ marginTop: 24 }}>The 90-Day Handover gives the new owner a structured path through the first months. New questions and unresolved gaps route back into review, so the record keeps improving when it matters most.</Lede>
      </div>
      <BrowserFrame url="throughline.app/handover" tag="Placeholder · in design">
        <p style={{ fontFamily: 'var(--tl-serif)', fontWeight: 500, fontSize: 19, color: 'var(--tl-ink)', margin: '2px 0 18px' }}>90-Day Handover</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {steps.map(([n, t, d]) => (
            <div key={t} style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
              <span style={{ width: 32, height: 32, borderRadius: 32, border: '1.5px solid var(--tl-evergreen)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--tl-mono)', fontSize: 11, fontWeight: 600, color: 'var(--tl-evergreen)', flex: '0 0 auto' }}>{n}</span>
              <span style={{ flex: 1 }}>
                <span style={{ display: 'block', fontFamily: 'var(--tl-sans)', fontSize: 14, fontWeight: 600, color: 'var(--tl-ink)', marginBottom: 3 }}>{t}</span>
                <span style={{ display: 'block', fontFamily: 'var(--tl-sans)', fontSize: 12.5, color: 'var(--tl-soft)' }}>{d}</span>
              </span>
            </div>
          ))}
        </div>
        <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 12, color: 'var(--tl-faint)', marginTop: 18 }}>New questions route back into review.</p>
      </BrowserFrame>
    </Split></div>
  );
}

/* ── Slide 12 three-party diagram variant ──────────────────────────── */
function PartyNode({ label, role, glyph, emphasis }) {
  const col = emphasis ? 'var(--tl-brass-light)' : 'rgba(244,241,233,0.88)';
  const border = emphasis ? 'var(--tl-brass-light)' : 'rgba(244,241,233,0.32)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9, width: 104, flex: '0 0 auto' }}>
      <span style={{ width: 50, height: 50, borderRadius: 50, border: `1.5px solid ${border}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>{glyph}</span>
      <span style={{ fontFamily: 'var(--tl-sans)', fontSize: 13, fontWeight: 700, color: col, textAlign: 'center' }}>{label}</span>
      <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(244,241,233,0.5)', textAlign: 'center', lineHeight: 1.4 }}>{role}</span>
    </div>
  );
}
function AdvisorDiagram() {
  const hline = { flex: 1, height: 2, background: 'rgba(244,241,233,0.22)', marginTop: 25 };
  return (
    <div style={{ background: 'var(--tl-graphite)', borderRadius: 14, padding: '30px 30px 26px', boxShadow: '0 2px 8px rgba(0,0,0,0.18), 0 26px 56px rgba(0,0,0,0.22)' }}>
      <p style={{ fontFamily: 'var(--tl-mono)', fontSize: 10, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--tl-brass-light)', margin: '0 0 26px' }}>The advisor between them</p>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center' }}>
        <PartyNode label="Owner" role="Sells · hands over" glyph={<ScopeGlyphS c="rgba(244,241,233,0.88)" />} />
        <div style={hline} />
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 152, flex: '0 0 auto' }}>
          <div style={{ padding: '10px 16px', borderRadius: 10, border: '1px solid var(--tl-brass)', background: 'rgba(194,161,78,0.12)', display: 'inline-flex', alignItems: 'center', gap: 9 }}>
            <svg width="20" height="20" viewBox="0 0 44 44" fill="none"><rect x="7" y="11" width="24" height="3.4" rx="1.7" fill="#F4F1E9"/><circle cx="36" cy="12.7" r="3.2" fill="#C2A14E"/><rect x="7" y="20.3" width="30" height="3.4" rx="1.7" fill="rgba(244,241,233,0.6)"/><rect x="7" y="29.6" width="19" height="3.4" rx="1.7" fill="rgba(244,241,233,0.6)"/></svg>
            <span style={{ fontFamily: 'var(--tl-serif)', fontSize: 15, color: '#F4F1E9' }}>Throughline</span>
          </div>
          <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(244,241,233,0.5)', marginTop: 8 }}>The shared record</span>
          <div style={{ width: 2, height: 24, background: 'rgba(244,241,233,0.22)', marginTop: 6 }} />
          <PartyNode label="You, the advisor" role="Runs the readiness conversation" glyph={<ScopeGlyphS c="var(--tl-brass-light)" />} emphasis />
        </div>
        <div style={hline} />
        <PartyNode label="Buyer" role="Buys · takes over" glyph={<LensGlyph c="rgba(244,241,233,0.88)" />} />
      </div>
      <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 13, lineHeight: 1.55, color: 'rgba(244,241,233,0.72)', margin: '24px 0 0', textAlign: 'center', textWrap: 'pretty' }}>
        Throughline is the reviewed record the three of you share. You keep the judgement and the read on the deal; it makes the operating knowledge visible to the people who need it.
      </p>
    </div>
  );
}
function S12({ t }) {
  return (
    <div className="tl-anim s-split-l" data-active="true">
      <div>
        <Head size={44}>The readiness conversation becomes show, not tell.</Head>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22, marginTop: 34 }}>
          <PointRow title="Owner dependency stops being talk." body="Transferable value becomes something you can show, not just raise." />
          <PointRow title="It strengthens your judgement, it does not replace it." body="Throughline surfaces and structures the knowledge. The strategy and the read on the deal stay yours." />
          <PointRow title="Your client sounds like themselves." body="Reviewed, source-backed records, not generic AI output a buyer won't trust." />
        </div>
      </div>
      {t && t.advisorDiagram
        ? <AdvisorDiagram />
        : <DarkCallout kicker="Channel proposition" title="Help your clients become more transferable before they go to market." body="Then help buyers trust what they are buying once diligence begins. Throughline sits alongside your advisory work, a controlled record that makes the operating knowledge visible to the people who need it." />}
    </div>
  );
}

function S13() {
  return (
    <div className="tl-anim" data-active="true" style={{ width: '100%' }}>
      <Head size={44}>A governed transfer layer.<br/>Not a data room, a wiki, or a chatbot.</Head>
      <div className="s-grid3" style={{ marginTop: 40 }}>
        <MiniCard kicker="Not a document vault" title="It captures how the business runs." body="A data room stores files. Throughline reviews knowledge for provenance and makes it answerable." />
        <MiniCard kicker="Not an AI advisor" title="It answers only from approved records." body="When it cannot, it logs a gap. No invented advice, no confident guesswork." />
        <MiniCard kicker="Not a one-off project" title="The record keeps working." body="Through scoped access, Evidence Packs, and the 90-day handover, well past signing." />
      </div>
      <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 14.5, lineHeight: 1.6, color: 'var(--tl-soft)', marginTop: 30, maxWidth: '88ch' }}>
        It does not guarantee a price, eliminate key person risk on its own, or do your due diligence for you. It makes the operating knowledge visible, reviewable, and transferable, so the deal conversation runs on evidence instead of assurances.
      </p>
    </div>
  );
}

function S14() {
  const asks = [
    'Does this solve a real problem in owner-dependent exits, successions, or handovers?',
    'Would you put it in front of a client preparing for market, and at what stage?',
    "What would the Evidence Pack need to show before you'd trust it in diligence?",
  ];
  return (
    <div className="tl-anim s-split-l" data-active="true">
      <div>
        <Kicker tone="brass">The ask</Kicker>
        <div style={{ marginTop: 14 }}><Head size={40}>What do you wish your clients had documented before they came to market?</Head></div>
        <Lede style={{ marginTop: 22 }}>That is the question Throughline is built to answer. It moves key person dependency from a vague risk to visible work — with a product, not just a workshop.</Lede>
      </div>
      <div style={{ background: 'var(--tl-graphite)', borderRadius: 14, padding: '30px 32px', boxShadow: '0 2px 8px rgba(0,0,0,0.18), 0 26px 56px rgba(0,0,0,0.22)' }}>
        <p style={{ fontFamily: 'var(--tl-mono)', fontSize: 10, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--tl-brass-light)', margin: 0 }}>The ask · 20 minutes</p>
        <p style={{ fontFamily: 'var(--tl-serif)', fontWeight: 500, fontSize: 22, color: '#F4F1E9', margin: '14px 0 20px' }}>Three things we want your read on.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {asks.map((a, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <span style={{ width: 26, height: 26, borderRadius: 26, border: '1.5px solid var(--tl-brass-light)', color: 'var(--tl-brass-light)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--tl-mono)', fontSize: 11, fontWeight: 600, flex: '0 0 auto' }}>{i + 1}</span>
              <span style={{ fontFamily: 'var(--tl-sans)', fontSize: 14, lineHeight: 1.5, color: 'rgba(244,241,233,0.82)' }}>{a}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* worked example (new slide 12) — a labelled hypothetical */
function SWorked() {
  const deps = [
    ['Pricing', 'How jobs get quoted, and when to bend the rules.', 'the owner'],
    ['The two biggest accounts', 'What keeps the Henderson and Maaka contracts.', 'one project manager'],
    ['Fabricator overflow', 'Who we call when the main fabricator is full.', 'the workshop manager'],
  ];
  return (
    <div className="tl-anim" data-active="true" style={{ width: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
        <Kicker tone="brass">A worked example</Kicker>
        <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 9.5, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--tl-faint)', border: '1px solid var(--tl-line)', borderRadius: 5, padding: '3px 9px' }}>Illustrative — not a real client</span>
      </div>
      <div style={{ marginTop: 12 }}><Head size={38}>Harbour Workshop Services, the day it goes to market.</Head></div>
      <Lede style={{ marginTop: 16, maxWidth: '74ch' }}>A 12-person engineering services firm. The owner plans to exit in 18 months. Three things that keep the business running live only in people's heads.</Lede>
      <div className="s-two" style={{ marginTop: 28, alignItems: 'start' }}>
        <div>
          <p className="s-mono" style={{ marginBottom: 12 }}>Where the business lives in people</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {deps.map(([t, d, who]) => (
              <div key={t} className="s-card" style={{ padding: '15px 18px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                  <span style={{ fontFamily: 'var(--tl-sans)', fontWeight: 700, fontSize: 14, color: 'var(--tl-ink)' }}>{t}</span>
                  <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 10, color: 'var(--tl-terracotta)', whiteSpace: 'nowrap' }}>held by {who}</span>
                </div>
                <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 13, color: 'var(--tl-soft)', margin: '5px 0 0' }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
        <div>
          <p className="s-mono" style={{ marginBottom: 12 }}>In the Vault, at market</p>
          <div style={{ background: 'var(--tl-graphite)', borderRadius: 14, padding: '22px 24px', boxShadow: '0 2px 8px rgba(0,0,0,0.16), 0 22px 48px rgba(0,0,0,0.20)' }}>
            <div style={{ display: 'flex', gap: 26, paddingBottom: 16, borderBottom: '1px solid rgba(244,241,233,0.12)' }}>
              {[['61', 'records'], ['54', 'reviewed'], ['7', 'open gaps']].map(([n, l], i) => (
                <div key={l}>
                  <div style={{ fontFamily: 'var(--tl-serif)', fontSize: 26, fontWeight: 500, color: i === 2 ? 'var(--tl-terra-soft)' : '#F4F1E9' }}>{n}</div>
                  <div style={{ fontFamily: 'var(--tl-sans)', fontSize: 11.5, color: 'rgba(244,241,233,0.6)', marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>
            <p style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'var(--tl-brass-light)', margin: '16px 0 8px' }}>Buyer asked — answered</p>
            <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 13.5, color: 'rgba(244,241,233,0.9)', margin: 0 }}>“How are priority jobs priced?”</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: 6, background: 'var(--tl-brass-light)' }} />
              <span style={{ fontFamily: 'var(--tl-sans)', fontSize: 12, color: 'rgba(244,241,233,0.7)', flex: 1 }}>Reviewed answer · pricing judgement</span>
              <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 10, color: 'var(--tl-brass-light)' }}>KV-014</span>
            </div>
            <p style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'var(--tl-terra-soft)', margin: '16px 0 8px' }}>Buyer asked — logged as a gap</p>
            <p style={{ fontFamily: 'var(--tl-sans)', fontSize: 13.5, color: 'rgba(244,241,233,0.9)', margin: 0 }}>“Who supplies overflow when the fabricator is full?”</p>
            <span style={{ display: 'inline-block', fontFamily: 'var(--tl-mono)', fontSize: 10, color: 'rgba(244,241,233,0.6)', marginTop: 8 }}>Logged for review · gap_3f9c2a</span>
          </div>
        </div>
      </div>
    </div>
  );
}

const SLIDES = [
  { n: '01', group: 'The case',    nav: 'Cover',              label: 'Throughline',                  tag: 'Sale-ready transferable value', Comp: S01 },
  { n: '02', group: 'The case',    nav: 'The problem',         label: 'The problem',                  tag: 'Value locked in people',        Comp: S02 },
  { n: '03', group: 'The case',    nav: 'The questions',       label: 'The questions behind the deal',tag: 'Where confidence breaks',       Comp: S03 },
  { n: '04', group: 'The case',    nav: 'What each side gets',  label: 'What each side gets',         tag: 'The payoff, both ways',         Comp: S04 },
  { n: '05', group: 'The product', nav: 'How it works',        label: 'How it works',                 tag: 'Capture, review, transfer',     Comp: S05 },
  { n: '06', group: 'The product', nav: 'Readiness',           label: 'Readiness at a glance',        tag: 'Transfer readiness',            Comp: S06 },
  { n: '07', group: 'The product', nav: 'Capture & source',    label: 'Capture and source',           tag: 'Knowledge in, source kept',     Comp: S07 },
  { n: '08', group: 'The product', nav: 'The Vault',           label: 'Review and the Vault',         tag: 'Reviewed, never raw',           Comp: S08 },
  { n: '09', group: 'The product', nav: 'Operating Layer',     label: 'The operating layer',          tag: 'The proof',                     Comp: S09 },
  { n: '10', group: 'The product', nav: 'Evidence Pack',       label: 'The evidence pack',            tag: "Scoped to who's looking",       Comp: S10 },
  { n: '11', group: 'The product', nav: '90-Day Handover',     label: 'The 90-day handover',          tag: 'Past day one',                  Comp: S11 },
  { n: '12', group: 'The product', nav: 'Worked example',      label: 'A worked example',             tag: 'One business, at market',       Comp: SWorked },
  { n: '13', group: 'Fit & next',  nav: 'Where advisors fit',  label: 'Where advisors fit',           tag: 'The advisor wedge',             Comp: S12 },
  { n: '14', group: 'Fit & next',  nav: "What it is, and isn't",label: "What it is, and isn't",       tag: 'Clear edges',                   Comp: S13 },
  { n: '15', group: 'Fit & next',  nav: 'The ask',             label: 'The conversation we want',     tag: 'Next step',                     Comp: S14 },
];

Object.assign(window, { SLIDES });
