/* global React, Chrome, BulletDot */

// ==== SLIDE — SECTION BREAK: MINE ERFARINGER ====
const SlideSectionMe = ({ total }) => (
  <>
    <div style={{ position: 'absolute', inset: 0, background: 'var(--paper)' }} />
    <div style={{ position: 'absolute', top: 40, left: 72, right: 72, display: 'flex', justifyContent: 'space-between' }}>
      <div className="mono" style={{ fontSize: 14, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--mute)' }}>
        <span style={{ color: 'var(--fremra-red)', fontWeight: 700, marginRight: 16 }}>04</span>
        Kapittel
      </div>
      <div className="mono tnum" style={{ fontSize: 14, color: 'var(--mute)' }}>15 / {String(total).padStart(2, '0')}</div>
    </div>
    <div style={{ position: 'absolute', left: 96, bottom: 140 }}>
      <div className="eyebrow" style={{ marginBottom: 36 }}>Kapittel 04</div>
      <h2 className="display" style={{ fontSize: 220, margin: 0, lineHeight: 0.9 }}>
        Mine<br/><span className="accent">erfaringer.</span>
      </h2>
      <p className="lead" style={{ marginTop: 40, fontSize: 28 }}>
        Hvordan jeg faktisk jobber nå — og hva jeg har lært å unngå.
      </p>
    </div>
  </>
);

// ==== SLIDE — HAVEN'T WRITTEN A LINE ====
const SlideNotALine = ({ total }) => (
  <>
    <div style={{ position: 'absolute', inset: 0, background: 'var(--night)' }} />
    <Chrome num={16} total={total} tag="04 / 01" middle="Sannheten" dark />
    <div className="slide-pad">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div className="eyebrow" style={{ marginBottom: 32, color: 'var(--fremra-red)' }}>En ærlig bekjennelse</div>
        <h2 className="display" style={{ fontSize: 160, margin: 0, lineHeight: 0.92, color: 'var(--paper)', maxWidth: '18ch' }}>
          Jeg har ikke skrevet en <span className="accent">linje</span> kode på flere måneder.
        </h2>
      </div>
    </div>
  </>
);

// ==== SLIDE — 3 NIVÅER AV AI ====
const SlideFromAutoToAgent = ({ total }) => {
  const levels = [
    {
      num: '01',
      label: 'Assistent',
      hint: 'Q&A · autocomplete',
      desc: 'Du spør, den svarer. Den fullfører linjen du holdt på å skrive. Du styrer alt.',
      active: false,
    },
    {
      num: '02',
      label: 'Utfører',
      hint: 'Tester · avgrensede oppgaver',
      desc: 'Du definerer oppgaven presist. Den gjør akkurat det. Du leser og reviewer output.',
      active: false,
    },
    {
      num: '03',
      label: 'Kollega',
      hint: 'Agent · delegering · inspektør',
      desc: 'Du parplanlegger. Den utfører. Spesialagenter reviewer. Du går god for resultatet.',
      active: true,
    },
  ];
  return (
    <>
      <Chrome num={18} total={total} tag="04 / 03" middle="Tre nivåer av AI i utviklerhverdagen" />
      <div className="slide-pad">
        <div className="eyebrow" style={{ marginBottom: 20 }}>Skiftet</div>
        <h2 className="display" style={{ fontSize: 88, margin: 0, marginBottom: 40 }}>
          Tre nivåer av AI i <span className="accent">utviklerhverdagen.</span>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginBottom: 36 }}>
          {levels.map(s => (
            <div key={s.num} className="card" style={{
              padding: 32,
              background: s.active ? 'var(--fremra-red)' : 'var(--paper-2)',
              color: s.active ? 'white' : 'var(--ink)',
              border: s.active ? 'none' : '1px solid var(--line)',
              minHeight: 320,
              display: 'flex', flexDirection: 'column',
            }}>
              <div className="mono" style={{
                fontSize: 14, letterSpacing: '0.12em',
                color: s.active ? 'rgba(255,255,255,0.75)' : 'var(--mute)',
                marginBottom: 14, fontWeight: 700,
              }}>{s.num}</div>
              <div className="display" style={{ fontSize: 40, lineHeight: 1.05, marginBottom: 10 }}>
                {s.label}
              </div>
              <div className="mono" style={{
                fontSize: 13, color: s.active ? 'rgba(255,255,255,0.85)' : 'var(--mute)',
                marginBottom: 22, letterSpacing: '0.04em',
              }}>
                {s.hint}
              </div>
              <div style={{
                fontSize: 18, lineHeight: 1.5,
                color: s.active ? 'rgba(255,255,255,0.95)' : 'var(--ink-2)',
                marginTop: 'auto',
              }}>
                {s.desc}
              </div>
            </div>
          ))}
        </div>
        <p className="lead" style={{ fontSize: 26, color: 'var(--ink-2)', maxWidth: '58ch', margin: 0 }}>
          Du jobber <em>med</em> AI-en. AI-en jobber ikke <em>for</em> deg.
        </p>
      </div>
    </>
  );
};

// ==== SLIDE — WORKFLOW BEFORE / AFTER ====
const SlideWorkflowBeforeAfter = ({ total }) => {
  const rows = [
    { theme: 'Plan',   before: 'Alene eller kort med kollega', after: 'Sparring med agent og team' },
    { theme: 'Spec',   before: 'Noe nedskrevet, mest i hodet', after: 'Grundig issue — agent skriver' },
    { theme: 'Kode',   before: 'Jeg skriver kode og tester',   after: 'Agenten skriver kode og tester' },
    { theme: 'Review', before: 'Jeg → menneske',               after: 'Inspektør-agenter → Copilot → jeg → menneske' },
    { theme: 'Ansvar', before: 'Jeg står inne for koden',      after: 'Jeg står inne for koden', same: true },
  ];
  return (
    <>
      <Chrome num={19} total={total} tag="04 / 04" middle="Arbeidsflyten har forflyttet seg" />
      <div className="slide-pad">
        <div className="eyebrow" style={{ marginBottom: 16 }}>Effekt</div>
        <h2 className="display" style={{ fontSize: 80, margin: 0, marginBottom: 32 }}>
          Jobben min ser <span className="accent">ikke ut som før.</span>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr 56px 1fr', gap: 12, alignItems: 'center' }}>
          <div></div>
          <div className="mono" style={{ fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', fontWeight: 700, paddingLeft: 4 }}>Før</div>
          <div></div>
          <div className="mono" style={{ fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fremra-red)', fontWeight: 700, paddingLeft: 4 }}>Nå</div>
          {rows.map(r => (
            <React.Fragment key={r.theme}>
              <div className="mono" style={{
                fontSize: 15, color: 'var(--fremra-red)',
                fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
              }}>{r.theme}</div>
              <div style={{
                padding: '16px 22px',
                background: 'var(--paper-2)',
                border: '1px solid var(--line)',
                fontSize: 19, color: 'var(--ink-2)', lineHeight: 1.35,
              }}>{r.before}</div>
              <div style={{
                textAlign: 'center',
                fontSize: r.same ? 32 : 28,
                color: r.same ? 'var(--mute)' : 'var(--fremra-red)',
                fontFamily: 'var(--ff-display)', fontWeight: 700,
              }}>{r.same ? '=' : '→'}</div>
              <div style={{
                padding: '16px 22px',
                background: r.same ? 'var(--paper-2)' : 'var(--ink)',
                color: r.same ? 'var(--ink)' : 'var(--paper)',
                border: r.same ? '1px solid var(--line)' : 'none',
                fontSize: 19, lineHeight: 1.35,
                fontWeight: r.same ? 600 : 400,
              }}>{r.after}</div>
            </React.Fragment>
          ))}
        </div>
        <p style={{
          marginTop: 28, fontSize: 18, color: 'var(--mute)',
          fontFamily: 'var(--ff-mono)', letterSpacing: '0.04em',
          maxWidth: '80ch',
        }}>
          Vi utviklere er sjelden gira på grundige spec og commit-meldinger. Agenter gjør det med glede.
        </p>
      </div>
    </>
  );
};

// ==== SLIDE — PITFALL 1: KODENÆRHET ====
const SlidePitfallCloseness = ({ total }) => (
  <>
    <Chrome num={20} total={total} tag="04 / 05" middle="Fallgruve 1 av 3 · Kodenærhet" />
    <div className="slide-pad">
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'start', marginBottom: 28 }}>
        <div>
          <div className="mono" style={{ fontSize: 16, color: 'var(--fremra-red)', letterSpacing: '0.12em', marginBottom: 16, textTransform: 'uppercase', fontWeight: 700 }}>
            Fallgruve 01
          </div>
          <h2 className="display" style={{ fontSize: 104, margin: 0, lineHeight: 0.9 }}>
            Kode<span className="accent">nærhet</span> synker.
          </h2>
          <p style={{ marginTop: 24, fontSize: 18, color: 'var(--mute)', fontFamily: 'var(--ff-mono)' }}>
            Dette var også hovedbekymringen i Utviklerundersøkelsen.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <Symptom text="Kan ikke forklare hvorfor en linje er som den er" />
          <Symptom text="Glipper åpenbare domenefeil fordi du ikke leste nøye nok" />
          <Symptom text='Føler deg som "reviewer" i eget repo' />
          <Symptom text="Vanskeligere å debugge når noe går galt" />
        </div>
      </div>
      <div className="card" style={{
        padding: '24px 36px', background: 'var(--ink)', color: 'var(--paper)', border: 'none',
        display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 40, alignItems: 'center',
        marginTop: 'auto',
      }}>
        <div>
          <div className="card-label" style={{ color: 'var(--fremra-red)', marginBottom: 8 }}>Det som hjalp</div>
          <div className="display" style={{ fontSize: 40, lineHeight: 1, color: 'var(--paper)' }}>
            Par<span className="accent">planlegg.</span>
          </div>
        </div>
        <p style={{ fontSize: 18, lineHeight: 1.5, opacity: 0.9, margin: 0, maxWidth: '66ch' }}>
          Kodenærhet holdes når du <em>eier planen</em> — ikke når du leser ferdig kode.
          Minst to mennesker enes om hva og hvordan, før agenten skriver en linje.
        </p>
      </div>
    </div>
  </>
);

const Symptom = ({ text }) => (
  <div style={{
    padding: '18px 24px',
    background: 'var(--paper-2)',
    border: '1px solid var(--line)',
    borderLeft: '4px solid var(--bad)',
    fontSize: 19,
    color: 'var(--ink-2)',
    lineHeight: 1.4,
  }}>
    {text}
  </div>
);

// ==== SLIDE — PITFALL 2: REVIEW EXPLOSION ====
const SlidePitfallReview = ({ total }) => (
  <>
    <Chrome num={21} total={total} tag="04 / 06" middle="Fallgruve 2 av 3 · Review-mengden" />
    <div className="slide-pad">
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, height: '100%', alignItems: 'center' }}>
        <div>
          <div className="mono" style={{ fontSize: 16, color: 'var(--fremra-red)', letterSpacing: '0.12em', marginBottom: 16, textTransform: 'uppercase', fontWeight: 700 }}>
            Fallgruve 02
          </div>
          <h2 className="display" style={{ fontSize: 88, margin: 0, lineHeight: 0.95 }}>
            Review-mengden<br /><span className="accent">eksploderer.</span>
          </h2>
          <p className="lead" style={{ fontSize: 26, marginTop: 36 }}>
            Flere PR-er, oftere, større. Flaskehalsen flytter seg fra å skrive kode til å lese den —
            og det forandrer hvor tiden din går i løpet av en dag.
          </p>
        </div>
        <div className="card" style={{ padding: 36, background: 'var(--ink)', color: 'var(--paper)', border: 'none' }}>
          <div className="card-label" style={{ color: 'var(--fremra-red)' }}>Samme svar</div>
          <div className="display" style={{ fontSize: 48, lineHeight: 1.05, marginBottom: 24, color: 'var(--paper)' }}>
            Parplanlegg — <span className="accent">også her.</span>
          </div>
          <p style={{ fontSize: 20, lineHeight: 1.5, opacity: 0.85 }}>
            Gode planer gjør review enklere: du ser etter <strong>avvik fra planen</strong>,
            ikke nyoppfinninger. Mindre kognitiv last per PR — selv om det er flere.
          </p>
        </div>
      </div>
    </div>
  </>
);

// ==== SLIDE — PITFALL 3: GUARDRAILS ====
const SlidePitfallGuardrails = ({ total }) => {
  const layers = [
    {
      n: '01',
      lbl: 'Lokalt',
      t: 'Før push',
      items: [
        'Cross-model review — Claude leser GPT, GPT leser Claude',
        'Kompilering',
        'Andre lokale sjekker ved behov',
      ],
    },
    {
      n: '02',
      lbl: 'Merge gate',
      t: 'CI · Github Actions',
      items: [
        'Biome — lint og format',
        'TypeScript — tsc',
        'Enhets-, kontrakt- og E2E-tester',
        'Secrets-scanning',
      ],
      accent: true,
      footer: 'Rødt? Merge blokkeres.',
    },
    {
      n: '03',
      lbl: 'PR review',
      t: 'Menneskelig gate',
      items: [
        'Copilot leser PR-en først',
        'Minst én menneskelig reviewer',
      ],
    },
  ];
  return (
    <>
      <Chrome num={22} total={total} tag="04 / 07" middle="Fallgruve 3 av 3 · Når agenten bommer" />
      <div className="slide-pad">
        <div className="mono" style={{ fontSize: 16, color: 'var(--fremra-red)', letterSpacing: '0.12em', marginBottom: 16, textTransform: 'uppercase', fontWeight: 700 }}>
          Fallgruve 03
        </div>
        <h2 className="display" style={{ fontSize: 96, margin: 0, marginBottom: 24 }}>
          Guardrails <span className="accent">eller bedrag.</span>
        </h2>
        <p className="lead" style={{ fontSize: 22, marginBottom: 36, maxWidth: '62ch' }}>
          Tre lag holder agenten i tømmene — lokalt før push, automatisk i merge gate, og menneskelig på PR.
          Når sikkerhetsnettet er tett nok, tør du å gi agenten mer tau.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 20px 1fr 20px 1fr', gap: 0, alignItems: 'stretch' }}>
          {layers.map((l, idx) => (
            <React.Fragment key={l.n}>
              <div
                className="card"
                style={{
                  padding: 22,
                  borderTop: l.accent ? '4px solid var(--fremra-red)' : undefined,
                  display: 'flex',
                  flexDirection: 'column',
                }}
              >
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
                  <div className="mono" style={{ fontSize: 22, color: 'var(--fremra-red)', fontWeight: 900, fontFamily: 'var(--ff-display)', lineHeight: 1 }}>{l.n}</div>
                  <div className="card-label">{l.lbl}</div>
                </div>
                <div className="display" style={{ fontSize: 22, marginBottom: 14 }}>{l.t}</div>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                  {l.items.map(item => (
                    <li key={item} style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.4, paddingLeft: 14, position: 'relative' }}>
                      <span style={{ position: 'absolute', left: 0, top: 0, color: 'var(--fremra-red)', fontWeight: 700 }}>·</span>
                      {item}
                    </li>
                  ))}
                </ul>
                {l.footer && (
                  <div className="mono" style={{ marginTop: 14, fontSize: 12, color: 'var(--fremra-red)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700 }}>
                    {l.footer}
                  </div>
                )}
              </div>
              {idx < layers.length - 1 && (
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--mute)', fontSize: 20 }}>→</div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </>
  );
};

// ==== SLIDE — WORKFLOW ====
const SlideWorkflow = ({ total }) => {
  const steps = [
    { n: '1', title: 'Parplanlegg', desc: 'Sparring med team og agent — hva og hvordan', tone: 'human', icon: 'chat' },
    { n: '2', title: 'Issue',       desc: 'Agent skriver issuet, vi finpusser sammen',   tone: 'ai',    icon: 'ticket' },
    { n: '3', title: 'Implementering', desc: 'Hovmester delegerer til subagenter',        tone: 'ai',    icon: 'code' },
    { n: '4', title: 'Cross-model', desc: 'Inspektør-agenter lokalt, før push',           tone: 'ai',    icon: 'eye' },
    { n: '5', title: 'Merge gate',  desc: 'Biome, tsc, tester, secrets — CI',             tone: 'tool',  icon: 'shield' },
    { n: '6', title: 'PR review',   desc: 'Copilot, så menneske — siste ord',             tone: 'human', icon: 'check' },
  ];
  return (
    <>
      <Chrome num={23} total={total} tag="04 / 08" middle="Slik jobber jeg nå" />
      <div className="slide-pad">
        <div className="eyebrow" style={{ marginBottom: 20 }}>Arbeidsflyten</div>
        <h2 className="display" style={{ fontSize: 88, margin: 0, marginBottom: 48 }}>
          Slik jobber <span className="accent">jeg nå.</span>
        </h2>
        <div style={{ display: 'flex', alignItems: 'stretch', gap: 10, marginBottom: 36 }}>
          {steps.map((s, idx) => (
            <React.Fragment key={s.n}>
              <FlowStep {...s} />
              {idx < steps.length - 1 && <FlowArrow />}
            </React.Fragment>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 28, justifyContent: 'center', fontFamily: 'var(--ff-mono)', fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--mute)' }}>
          <LegendDot color="var(--ink)" label="Menneske driver" />
          <LegendDot color="var(--fremra-red)" label="Agent driver" />
          <LegendDot color="var(--warn)" label="Verktøy / CI" />
        </div>
      </div>
    </>
  );
};

const FlowStep = ({ n, title, desc, tone, icon }) => {
  const color = tone === 'ai' ? 'var(--fremra-red)' : tone === 'tool' ? 'var(--warn)' : 'var(--ink)';
  const tint  = tone === 'ai' ? 'rgba(200, 32, 32, 0.06)' : tone === 'tool' ? 'rgba(200, 130, 20, 0.08)' : 'rgba(20, 20, 20, 0.04)';
  return (
    <div className="card" style={{
      flex: 1, padding: 18,
      borderTop: `4px solid ${color}`,
      background: 'var(--paper)',
      display: 'flex', flexDirection: 'column', minHeight: 210,
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 999,
        background: tint, color,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 14,
      }}>
        <FlowIcon name={icon} />
      </div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', letterSpacing: '0.16em', marginBottom: 6 }}>STEG {n}</div>
      <div className="display" style={{ fontSize: 22, lineHeight: 1.1, marginBottom: 10, color: 'var(--ink)' }}>{title}</div>
      <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.45, marginTop: 'auto' }}>{desc}</div>
    </div>
  );
};

const FlowArrow = () => (
  <div style={{ display: 'flex', alignItems: 'center', fontSize: 22, color: 'var(--mute)' }}>→</div>
);

const FlowIcon = ({ name }) => {
  const p = { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'chat':
      return (<svg {...p}><path d="M21 12a2 2 0 0 1-2 2H8l-5 4V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6z"/><path d="M7 9h10M7 12h6"/></svg>);
    case 'ticket':
      return (<svg {...p}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M8 13h8M8 17h5"/></svg>);
    case 'code':
      return (<svg {...p}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>);
    case 'eye':
      return (<svg {...p}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>);
    case 'shield':
      return (<svg {...p}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg>);
    case 'check':
      return (<svg {...p}><path d="M9 12l2 2 5-5"/><rect x="3" y="4" width="18" height="16" rx="2"/></svg>);
    default:
      return null;
  }
};

const LegendDot = ({ color, label }) => (
  <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <span style={{ width: 10, height: 10, background: color, display: 'inline-block', borderRadius: 999 }} />
    {label}
  </span>
);

// ==== SLIDE — TEAM QUOTES / RETRO ====
const SlideRetroQuotes = ({ total }) => (
  <>
    <div style={{ position: 'absolute', inset: 0, background: 'var(--night)' }} />
    <Chrome num={24} total={total} tag="04 / 09" middle="Fra siste retro" dark />
    <div className="slide-pad">
      <div className="eyebrow" style={{ marginBottom: 20, color: 'var(--fremra-red)' }}>Fra siste retro</div>
      <h2 className="display" style={{ fontSize: 88, margin: 0, marginBottom: 56, color: 'var(--paper)' }}>
        Hva <span className="accent">teamet</span> sier.
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        <QuoteCard
          text="AI-oppsettet i vårt team er kult og hjelper meg med planlegging og fikse kjedelige oppgaver."
          tone="pos"
        />
        <QuoteCard
          text="AI hjelper med kode, men synker forståelsen av koden."
          tone="neg"
        />
      </div>
      <p style={{ marginTop: 48, fontSize: 22, color: 'var(--paper)', opacity: 0.7, maxWidth: '54ch' }}>
        Bekymringen kjenner vi igjen fra undersøkelsen. Vi har prøvd noen teknikker —
        parplanlegging, grundige issues, guardrails — som har hjulpet oss et stykke på vei.
      </p>
    </div>
  </>
);

const QuoteCard = ({ text, tone }) => (
  <div style={{
    padding: 40,
    background: 'var(--night-2)',
    border: '1px solid var(--line)',
    borderTop: `6px solid ${tone === 'pos' ? 'var(--ok)' : 'var(--fremra-red)'}`,
  }}>
    <div style={{ fontSize: 80, lineHeight: 0.5, color: tone === 'pos' ? 'var(--ok)' : 'var(--fremra-red)', marginBottom: 12, fontFamily: 'var(--ff-display)' }}>
      "
    </div>
    <p className="display" style={{ fontSize: 34, lineHeight: 1.1, color: 'var(--paper)', margin: 0 }}>
      {text}
    </p>
    <div className="mono" style={{ fontSize: 13, color: 'var(--night-mute)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 24 }}>
      Anonym retro-lapp · team-esyfo
    </div>
  </div>
);

// ==== SLIDE — VIBE VS AGENTIC ====
const SlideVibeVsAgentic = ({ total }) => {
  const rows = [
    { vibe: 'Kjører agenten på autopilot',       agentic: 'Parplanlegger før agenten slippes løs' },
    { vibe: 'Merger PR-er uten å lese dem',       agentic: 'Leser hver linje — ditt navn står der' },
    { vibe: 'Stoler på at tester fanger alt',     agentic: 'Guardrails er sikkerhetsnettet, ikke fasiten' },
    { vibe: 'Ship det som kompilerer',            agentic: 'Står inne for arkitektur og lesbarhet' },
  ];
  return (
    <>
      <Chrome num={17} total={total} tag="04 / 02" middle="Samme verktøy. Helt ulik praksis." />
      <div className="slide-pad">
        <div className="eyebrow" style={{ marginBottom: 20 }}>En viktig distinksjon</div>
        <h2 className="display" style={{ fontSize: 88, margin: 0, marginBottom: 40 }}>
          Samme verktøy. <span className="accent">Helt ulik praksis.</span>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
          <div className="mono" style={{ fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', fontWeight: 700 }}>
            Vibe coding
          </div>
          <div className="mono" style={{ fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fremra-red)', fontWeight: 700 }}>
            Agentic engineering
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {rows.map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div style={{
                padding: '20px 24px', background: 'var(--paper-2)',
                border: '1px solid var(--line)',
                borderTop: i === 0 ? '3px solid var(--mute)' : '1px solid var(--line)',
                fontSize: 20, lineHeight: 1.4, color: 'var(--ink-2)',
              }}>
                {r.vibe}
              </div>
              <div style={{
                padding: '20px 24px', background: 'var(--ink)', color: 'var(--paper)',
                borderTop: i === 0 ? '3px solid var(--fremra-red)' : 'none',
                fontSize: 20, lineHeight: 1.4,
              }}>
                {r.agentic}
              </div>
            </div>
          ))}
        </div>
        <p style={{ marginTop: 28, fontSize: 18, color: 'var(--mute)', fontFamily: 'var(--ff-mono)' }}>
          Begge finnes i miljøet. Forskjellen er hvilket ansvar du tar.
        </p>
      </div>
    </>
  );
};

// ==== SLIDE — DITT NAVN STÅR PÅ COMMITTEN ====
const SlideOwnershipStance = ({ total }) => (
  <>
    <div style={{ position: 'absolute', inset: 0, background: 'var(--night)' }} />
    <Chrome num={25} total={total} tag="04 / 10" middle="Ditt navn står på committen" dark />
    <div className="slide-pad">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div className="eyebrow" style={{ marginBottom: 32, color: 'var(--fremra-red)' }}>Ståsted</div>
        <h2 className="display" style={{ fontSize: 120, margin: 0, lineHeight: 0.95, color: 'var(--paper)', maxWidth: '18ch' }}>
          AI hever abstraksjons&shy;nivået. <span className="accent">Ansvaret gjør det ikke.</span>
        </h2>
        <p className="lead" style={{ fontSize: 28, marginTop: 48, color: 'var(--paper)', opacity: 0.78, maxWidth: '54ch' }}>
          Nav håndterer penger og helsedata, Riksrevisjonen følger med, og systemene
          treffer folk som trenger hjelp — det er ditt navn som står på committen.
          Arkitektur, lesbarhet, sikkerhet, riktig oppførsel: det er fortsatt ditt ansvar.
        </p>
      </div>
    </div>
  </>
);

Object.assign(window, {
  SlideSectionMe, SlideNotALine, SlideFromAutoToAgent,
  SlideWorkflowBeforeAfter,
  SlidePitfallCloseness, SlidePitfallReview, SlidePitfallGuardrails,
  SlideVibeVsAgentic,
  SlideWorkflow, SlideRetroQuotes,
  SlideOwnershipStance,
});