/* global React, Chrome, BulletDot */

// ==== SLIDE — SECTION BREAK: COPILOT I NAV ====
const SlideSectionCopilot = ({ total }) => (
  <>
    <div style={{ position: 'absolute', inset: 0, background: 'var(--night)' }} />
    <div style={{
      position: 'absolute', right: -200, top: -200,
      width: 1200, height: 1200,
      opacity: 0.08,
    }}>
      <svg viewBox="0 0 100 100">
        <path d="M 0 0 L 100 0 L 100 65 L 78 100 L 0 100 Z" fill="var(--fremra-red)" />
      </svg>
    </div>
    <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(--night-mute)' }}>
        <span style={{ color: 'var(--fremra-red)', fontWeight: 700, marginRight: 16 }}>02</span>
        Kapittel
      </div>
      <div className="mono tnum" style={{ fontSize: 14, color: 'var(--night-mute)' }}>
        06 / {String(total).padStart(2, '0')}
      </div>
    </div>
    <div style={{ position: 'absolute', left: 96, bottom: 140 }}>
      <div className="eyebrow" style={{ marginBottom: 36, color: 'var(--fremra-red)' }}>Kapittel 02</div>
      <h2 className="display" style={{ fontSize: 240, color: 'var(--paper)', margin: 0, lineHeight: 0.9 }}>
        Copilot<br/><span className="accent">i Nav.</span>
      </h2>
      <p className="lead" style={{ color: 'var(--paper)', opacity: 0.7, marginTop: 40, fontSize: 30 }}>
        Landskapet, reglene, og hvem som bruker hva.
      </p>
    </div>
  </>
);

// ==== SLIDE — ONLY GITHUB COPILOT ====
const SlideOnlyGithubCopilot = ({ total }) => (
  <>
    <Chrome num={7} total={total} tag="02 / 01" middle="Ett verktøy tillatt" />
    <div className="slide-pad">
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, height: '100%', alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Tillatt verktøy</div>
          <h2 className="display" style={{ fontSize: 140, margin: 0, lineHeight: 0.92 }}>
            Kun <span className="accent">GitHub Copilot.</span>
          </h2>
          <p className="lead" style={{ marginTop: 40, fontSize: 28 }}>
            Nav har avtale gjennom GitHub Enterprise.
            Det er det eneste som er godkjent.
          </p>
          <p style={{ marginTop: 24, fontSize: 18, color: 'var(--mute)' }}>
            Men: innenfor Copilot kan du velge modell (GPT, Claude, Gemini osv.)
            — så «ett verktøy» betyr ikke én modell.
          </p>
        </div>
        <div className="card" style={{ padding: 40 }}>
          <div className="card-label">Hvordan du får tilgang</div>
          <ol style={{ padding: 0, listStyle: 'none', margin: 0, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <Step n="1" t="Gå til min-copilot.ansatt.nav.no" />
            <Step n="2" t="Gi deg selv tilgang (self-service)" />
            <Step n="3" t="Velg modell i editoren" />
          </ol>
        </div>
      </div>
    </div>
  </>
);

const Step = ({ n, t }) => (
  <li style={{ display: 'grid', gridTemplateColumns: '48px 1fr', gap: 16, alignItems: 'center' }}>
    <div style={{
      width: 40, height: 40,
      background: 'var(--fremra-red)', color: 'white',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--ff-display)', fontSize: 22, fontWeight: 900,
    }}>{n}</div>
    <div style={{ fontSize: 22, color: 'var(--ink)' }}>{t}</div>
  </li>
);

// ==== SLIDE — MIN-COPILOT ====
const SlideMinCopilot = ({ total }) => (
  <>
    <Chrome num={8} total={total} tag="02 / 02" middle="min-copilot.ansatt.nav.no" />
    <div className="slide-pad">
      <div className="eyebrow" style={{ marginBottom: 20 }}>Den interne portalen</div>
      <h2 className="display" style={{ fontSize: 96, margin: 0, marginBottom: 48 }}>
        Én portal for <span className="accent">Copilot i Nav.</span>
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginBottom: 32 }}>
        <Feature icon="🔓" title="Self-service tilgang" body="Skaff deg selv Copilot-tilgang uten å vente" />
        <Feature icon="📘" title="God praksis" body="Nyheter, guides, læringsstoff" />
        <Feature icon="🧩" title="Ferdige skills & agenter" body="Nav-tilpassede skills og agenter å dra rett inn" />
        <Feature icon="📊" title="Statistikk & adopsjon" body="Hvem bruker hva, hvor mye, hvordan" />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
        <span className="live-dot">Live demo</span>
        <a
          href="https://min-copilot.ansatt.nav.no"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 16,
            padding: '20px 32px',
            background: 'var(--fremra-red)',
            color: 'white',
            textDecoration: 'none',
            fontSize: 24,
            fontWeight: 600,
            fontFamily: 'var(--ff-mono)',
            letterSpacing: '0.02em',
            boxShadow: '0 4px 0 rgba(0,0,0,0.15)',
            transition: 'transform 0.1s, box-shadow 0.1s',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'translateY(-2px)';
            e.currentTarget.style.boxShadow = '0 6px 0 rgba(0,0,0,0.2)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.boxShadow = '0 4px 0 rgba(0,0,0,0.15)';
          }}
        >
          <span style={{ textDecoration: 'underline', textUnderlineOffset: 4 }}>min-copilot.ansatt.nav.no</span>
          <span style={{ fontSize: 22, opacity: 0.9 }}>↗</span>
        </a>
        <span style={{ fontSize: 16, color: 'var(--mute)', fontFamily: 'var(--ff-mono)' }}>
          Klikk for å åpne i ny fane
        </span>
      </div>
    </div>
  </>
);

const Feature = ({ icon, title, body }) => (
  <div style={{
    background: 'var(--paper-2)',
    border: '1px solid var(--line)',
    padding: 24,
    minHeight: 180,
  }}>
    <div style={{ fontSize: 32, marginBottom: 12, filter: 'grayscale(0.5)' }}>{icon}</div>
    <div className="display" style={{ fontSize: 22, marginBottom: 8 }}>{title}</div>
    <div style={{ fontSize: 15, color: 'var(--mute)', lineHeight: 1.4 }}>{body}</div>
  </div>
);

// ==== SLIDE — 300 PREMIUM REQUESTS ====
const SlideKvote = ({ total }) => (
  <>
    <Chrome num={9} total={total} tag="02 / 03" middle="Premium requests og felles pott" />
    <div className="slide-pad">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Økonomi</div>
          <h2 className="display" style={{ fontSize: 220, margin: '12px 0 0', lineHeight: 0.9 }}>
            <span className="accent">300</span>
          </h2>
          <p className="lead" style={{ fontSize: 26, marginTop: 32, maxWidth: '26ch' }}>
            Personlige premium requests per måned. Når du går tom,
            deler du en <strong>felles pott</strong> med alle andre i Nav.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div className="card" style={{ padding: 32, borderLeft: '4px solid var(--fremra-red)' }}>
            <div className="card-label" style={{ color: 'var(--fremra-red)' }}>Premium · koster kvote</div>
            <div style={{ fontSize: 20, color: 'var(--ink-2)', lineHeight: 1.5 }}>
              Forespørsler til kraftige modeller — Claude, GPT-5 osv. — i agent-modus og chat.
            </div>
          </div>
          <div className="card" style={{ padding: 32 }}>
            <div className="card-label">Gratis · går ikke på kvoten</div>
            <div style={{ fontSize: 20, color: 'var(--ink-2)', lineHeight: 1.5 }}>
              Autocomplete og basismodeller som GPT-4.1 og GPT-5 mini — ubegrenset bruk.
            </div>
          </div>
        </div>
      </div>
    </div>
  </>
);

// ==== SLIDE — SECTION BREAK: UTVIKLERUNDERSØKELSEN ====
const SlideSectionSurvey = ({ 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 }}>03</span>
        Kapittel
      </div>
      <div className="mono tnum" style={{ fontSize: 14, color: 'var(--mute)' }}>11 / {String(total).padStart(2, '0')}</div>
    </div>
    <div style={{ position: 'absolute', left: 96, bottom: 140 }}>
      <div className="eyebrow" style={{ marginBottom: 36 }}>Kapittel 03</div>
      <h2 className="display" style={{ fontSize: 120, margin: 0, lineHeight: 0.95 }}>
        Utviklerundersøkelsen<br/><span className="accent">2026.</span>
      </h2>
      <p className="lead" style={{ marginTop: 40, fontSize: 28 }}>
        163 svar. Stor entusiasme — og reell uro.
      </p>
      <p style={{ marginTop: 20, fontSize: 14, color: 'var(--mute)', fontFamily: 'var(--ff-mono)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        Kilde: min-copilot.ansatt.nav.no/nyheter/utviklerundersokelsen-2026
      </p>
    </div>
  </>
);

// ==== SLIDE — 93% STAT ====
const Slide93pct = ({ total }) => (
  <>
    <Chrome num={12} total={total} tag="03 / 01" middle="Adopsjon i Nav" />
    <div className="slide-pad">
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, height: '100%', alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Utviklerundersøkelsen 2026</div>
          <h2 className="display" style={{ fontSize: 320, margin: '12px 0 0', lineHeight: 0.9, letterSpacing: '-0.03em' }}>
            <span className="accent">93%</span>
          </h2>
          <p className="lead" style={{ fontSize: 32, marginTop: 40, maxWidth: '20ch' }}>
            av respondentene bruker AI-kodeverktøy aktivt.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <Stat big="163" label="svar over 21 dager (mars–april 2026)" />
          <Stat big="~32%" label="svarprosent av 500+ Copilot-brukere" />
          <Stat big="2,6" label="AI-verktøy i snitt per utvikler · 74 % bruker to eller flere" />
        </div>
      </div>
    </div>
  </>
);

const Stat = ({ big, label }) => (
  <div className="card" style={{ padding: 28, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 32, alignItems: 'center' }}>
    <div className="display" style={{ fontSize: 72, color: 'var(--fremra-red)', lineHeight: 1 }}>{big}</div>
    <div style={{ fontSize: 22, color: 'var(--ink-2)', lineHeight: 1.3 }}>{label}</div>
  </div>
);

// ==== SLIDE — TEAM eSYFO TOPPER ====
const SlideEsyfoTops = ({ total }) => {
  const rows = [
    { team: 'team-esyfo',      count: 28, rate: 60, highlight: true },
    { team: 'teamdagpenger',   count: 19, rate: 22 },
    { team: 'eessibasis',      count: 12, rate: 21 },
    { team: 'k9saksbehandling', count: 10, rate: 15 },
    { team: 'teamsykefravr',    count: 8,  rate: 19 },
  ];
  return (
    <>
      <Chrome num={10} total={total} tag="02 / 04" middle="276 team, ulik adopsjon" />
      <div className="slide-pad">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64, height: '100%' }}>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>På tvers av Nav</div>
            <h2 className="display" style={{ fontSize: 96, margin: 0, lineHeight: 0.95 }}>
              Adopsjonen er <span className="accent">ujevn.</span>
            </h2>
            <p className="lead" style={{ fontSize: 24, marginTop: 32 }}>
              Av <strong>276 team</strong> i Nav varierer adopsjonen enormt —
              fra 60 % ned til null. Det er forskjellen mellom systematisk
              agentisk arbeid og sporadisk autocomplete-bruk.
            </p>
            <p style={{ marginTop: 24, fontSize: 16, color: 'var(--mute)', fontFamily: 'var(--ff-mono)' }}>
              Kilde: min-copilot · aktive repoer
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, justifyContent: 'center' }}>
            <div className="mono" style={{ fontSize: 12, color: 'var(--mute)', letterSpacing: '0.12em', textTransform: 'uppercase', display: 'grid', gridTemplateColumns: '1.4fr 3fr 0.5fr 0.8fr', gap: 12 }}>
              <span>Team</span>
              <span>Antall repoer med tilpasninger</span>
              <span style={{ textAlign: 'right' }}>Repoer</span>
              <span style={{ textAlign: 'right' }}>Rate</span>
            </div>
            {rows.map(r => <TeamRow key={r.team} {...r} />)}
            <div style={{
              display: 'grid', gridTemplateColumns: '1.4fr 3fr 0.5fr 0.8fr', gap: 12,
              alignItems: 'center', padding: '12px 16px',
              border: '1px dashed var(--line)',
              color: 'var(--mute)',
              fontFamily: 'var(--ff-mono)', fontSize: 16, fontStyle: 'italic',
            }}>
              <div>+ 271 andre team</div>
              <div></div>
              <div style={{ textAlign: 'right' }}>—</div>
              <div style={{ textAlign: 'right' }}>—</div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const TeamRow = ({ team, count, rate, highlight }) => {
  const maxCount = 28;
  const barPct = (count / maxCount) * 100;
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1.4fr 3fr 0.5fr 0.8fr', gap: 12,
      alignItems: 'center', padding: '12px 16px',
      background: highlight ? 'var(--fremra-red)' : 'transparent',
      color: highlight ? 'white' : 'var(--ink)',
      border: '1px solid ' + (highlight ? 'var(--fremra-red)' : 'var(--line)'),
    }}>
      <div className="mono" style={{ fontSize: 18, fontWeight: highlight ? 800 : 500 }}>{team}</div>
      <div style={{ background: highlight ? 'rgba(255,255,255,0.25)' : 'var(--paper-2)', height: 14 }}>
        <div style={{
          width: barPct + '%', height: '100%',
          background: highlight ? 'white' : 'var(--fremra-red)',
        }} />
      </div>
      <div className="tnum mono" style={{ textAlign: 'right', fontSize: 18, fontWeight: 700 }}>{count}</div>
      <div className="tnum mono" style={{ textAlign: 'right', fontSize: 18, color: highlight ? 'rgba(255,255,255,0.85)' : 'var(--mute)' }}>{rate}%</div>
    </div>
  );
};

// ==== SLIDE — SAMMENSATT BILDE (fornøyd + bekymret) ====
const SlideMixedFeelings = ({ total }) => (
  <>
    <Chrome num={13} total={total} tag="03 / 02" middle="Fornøyd — og bekymret" />
    <div className="slide-pad">
      <div className="eyebrow" style={{ marginBottom: 20 }}>Sammensatt bilde</div>
      <h2 className="display" style={{ fontSize: 96, margin: 0, marginBottom: 64 }}>
        Både–og, ikke <span className="accent">enten–eller.</span>
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
        <BigStat value="73%" label="er fornøyde med sin bruk av AI-verktøy" tone="ok" />
        <BigStat value="59%" label="er bekymret for tap av kompetanse" tone="warn" />
        <BigStat value="41%" label="er begge deler samtidig" tone="red" />
      </div>
      <p style={{ marginTop: 48, fontSize: 22, color: 'var(--ink-2)', maxWidth: '52ch' }}>
        Undersøkelsen selv sier det rett ut: <strong>«det er ikke et enten/eller».</strong>{' '}
        Samme person kan både oppleve produktivitetsgevinst og være bekymret
        for kompetansetap.
      </p>
    </div>
  </>
);

const BigStat = ({ value, label, tone }) => {
  const toneMap = {
    ok: 'var(--ok)',
    warn: 'var(--warn)',
    red: 'var(--fremra-red)',
  };
  return (
    <div className="card" style={{ padding: 40, borderTop: `6px solid ${toneMap[tone]}` }}>
      <div className="display" style={{ fontSize: 128, color: toneMap[tone], lineHeight: 0.95 }}>
        {value}
      </div>
      <div style={{ fontSize: 22, color: 'var(--ink-2)', marginTop: 16, lineHeight: 1.3 }}>
        {label}
      </div>
    </div>
  );
};

// ==== SLIDE — BIG QUOTE FROM SURVEY ====
const SlideSurveyQuote = ({ total }) => (
  <>
    <div style={{ position: 'absolute', inset: 0, background: 'var(--night)' }} />
    <Chrome num={14} total={total} tag="03 / 03" middle="Fra undersøkelsen" dark />
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '140px 200px',
    }}>
      <div style={{ textAlign: 'center', maxWidth: 1200 }}>
        <div className="mono" style={{
          fontSize: 15, color: 'var(--fremra-red)',
          letterSpacing: '0.16em', textTransform: 'uppercase',
          marginBottom: 44, fontWeight: 700,
        }}>
          Denne bekymringen gikk igjen
        </div>
        <div style={{
          fontSize: 160, lineHeight: 0.5,
          color: 'var(--fremra-red)',
          fontFamily: 'var(--ff-display)',
          fontWeight: 900,
          marginBottom: 56,
        }}>
          "
        </div>
        <blockquote style={{ margin: 0 }}>
          <p className="quote" style={{
            color: 'var(--paper)',
            fontSize: 54,
            lineHeight: 1.2,
            margin: 0,
            fontWeight: 500,
            textWrap: 'balance',
          }}>
            AI er god til å skrive kode som <span style={{ color: 'var(--fremra-red)' }}>ser riktig ut</span> — men da <span style={{ color: 'var(--fremra-red)' }}>mister jeg eierskap.</span>
          </p>
          <div style={{
            color: 'var(--night-mute)',
            marginTop: 56,
            fontFamily: 'var(--ff-mono)',
            fontSize: 18,
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
          }}>
            Nav-utvikler · Utviklerundersøkelsen 2026
          </div>
        </blockquote>
      </div>
    </div>
  </>
);

Object.assign(window, {
  SlideSectionCopilot, SlideOnlyGithubCopilot, SlideMinCopilot, SlideKvote,
  SlideSectionSurvey, Slide93pct, SlideEsyfoTops, SlideMixedFeelings, SlideSurveyQuote,
});
