/* global React, Chrome */

// ==== SECTION BREAK: TAKEAWAYS ====
const SlideSectionTakeaways = ({ 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 }}>06</span>
        Kapittel
      </div>
      <div className="mono tnum" style={{ fontSize: 14, color: 'var(--mute)' }}>31 / {String(total).padStart(2, '0')}</div>
    </div>
    <div style={{ position: 'absolute', left: 96, bottom: 140 }}>
      <div className="eyebrow" style={{ marginBottom: 36 }}>Kapittel 06</div>
      <h2 className="display" style={{ fontSize: 220, margin: 0, lineHeight: 0.9 }}>
        Take-<br/><span className="accent">aways.</span>
      </h2>
      <p className="lead" style={{ marginTop: 40, fontSize: 28 }}>
        Fire ting å ta med hjem — uansett hvilket verktøy du bruker.
      </p>
    </div>
  </>
);

// ==== TAKEAWAY 1 ====
const SlideTakeaway1 = ({ total }) => (
  <>
    <Chrome num={32} total={total} tag="06 / 01" middle="Takeaway 1 av 4 · Agentisk, ikke autocomplete" />
    <div className="slide-pad">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div className="mono" style={{ fontSize: 80, color: 'var(--fremra-red)', fontWeight: 900, fontFamily: 'var(--ff-display)', lineHeight: 1 }}>01</div>
        <h2 className="display" style={{ fontSize: 128, margin: '20px 0 0', lineHeight: 0.95, maxWidth: '22ch' }}>
          Copilot er ikke<br /><span className="accent">autocomplete</span> lenger.
        </h2>
        <p className="lead" style={{ fontSize: 28, marginTop: 40, maxWidth: '58ch' }}>
          Tenk på det som en kollega du jobber sammen med — ikke en skrivemaskin du dikterer til.
          I min erfaring blir resultatet best når dere samarbeider på ekte: du bidrar, den bidrar, dere lander det sammen.
        </p>
      </div>
    </div>
  </>
);

// ==== TAKEAWAY 2 ====
const SlideTakeaway2 = ({ total }) => (
  <>
    <Chrome num={33} total={total} tag="06 / 02" middle="Takeaway 2 av 4 · Parplanlegg, så delegér" />
    <div className="slide-pad">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div className="mono" style={{ fontSize: 80, color: 'var(--fremra-red)', fontWeight: 900, fontFamily: 'var(--ff-display)', lineHeight: 1 }}>02</div>
        <h2 className="display" style={{ fontSize: 128, margin: '20px 0 0', lineHeight: 0.95, maxWidth: '18ch' }}>
          Par<span className="accent">planlegg,</span><br />så delegér.
        </h2>
        <p className="lead" style={{ fontSize: 28, marginTop: 40, maxWidth: '58ch' }}>
          Mennesker blir enige om hva og hvordan. Agenten utfører.
          Kodenærhet er et reelt tap hvis du ikke jobber aktivt for å beholde den.
        </p>
      </div>
    </div>
  </>
);

// ==== TAKEAWAY 3 ====
const SlideTakeaway3 = ({ total }) => (
  <>
    <Chrome num={34} total={total} tag="06 / 03" middle="Takeaway 3 av 4 · Guardrails over magi" />
    <div className="slide-pad">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div className="mono" style={{ fontSize: 80, color: 'var(--fremra-red)', fontWeight: 900, fontFamily: 'var(--ff-display)', lineHeight: 1 }}>03</div>
        <h2 className="display" style={{ fontSize: 140, margin: '20px 0 0', lineHeight: 0.92, maxWidth: '18ch' }}>
          Guardrails <span className="accent">over</span> magi.
        </h2>
        <p className="lead" style={{ fontSize: 28, marginTop: 40, maxWidth: '58ch' }}>
          Lint, test, types, cross-model review. Automatisk først, menneskelig sist.
          Når sikkerhetsnettet er tett nok, tør du å gi agenten mer tau.
        </p>
      </div>
    </div>
  </>
);

// ==== TAKEAWAY 4 ====
const SlideTakeaway4 = ({ total }) => (
  <>
    <Chrome num={35} total={total} tag="06 / 04" middle="Takeaway 4 av 4 · Ditt navn, ditt ansvar" />
    <div className="slide-pad">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div className="mono" style={{ fontSize: 80, color: 'var(--fremra-red)', fontWeight: 900, fontFamily: 'var(--ff-display)', lineHeight: 1 }}>04</div>
        <h2 className="display" style={{ fontSize: 140, margin: '20px 0 0', lineHeight: 0.92, maxWidth: '18ch' }}>
          Aldri fortere enn du kan <span className="accent">stå inne for.</span>
        </h2>
        <p className="lead" style={{ fontSize: 28, marginTop: 40, maxWidth: '58ch' }}>
          AI gjør det fristende å gå fort. Men det er ditt navn på committen, og kunden betaler for kvalitet.
          Ikke push mer enn du faktisk kan gå god for.
        </p>
      </div>
    </div>
  </>
);

// ==== QUESTIONS / END ====
const SlideEnd = ({ total }) => (
  <>
    {/* Big accent F in background — speiler tittelsliden */}
    <div style={{
      position: 'absolute',
      right: -60, bottom: -40,
      opacity: 0.95,
      pointerEvents: 'none',
      width: 800, height: 800,
    }}>
      <svg width="800" height="800" 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)" />
        <text x="50" y="78" textAnchor="middle" fill="white"
          style={{ fontFamily: 'var(--ff-display)', fontWeight: 900, fontSize: '80px' }}>F</text>
      </svg>
    </div>

    <div style={{ position: 'absolute', top: 72, left: 96, width: 240, display: 'flex', alignItems: 'center' }}>
      <img src="brand/fremra_logo_transparent.png" alt="Fremra" style={{ width: '100%', display: 'block' }} />
    </div>
    <div style={{ position: 'absolute', top: 96, right: 96, display: 'flex', alignItems: 'center', height: 52 }} className="mono">
      <span style={{ fontSize: 14, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', fontWeight: 600 }}>
        Fagdag · 2026
      </span>
    </div>
    <div style={{ position: 'absolute', top: 40, right: 72 }}>
      <div className="mono tnum" style={{ fontSize: 14, color: 'var(--mute)' }}>{String(total).padStart(2, '0')} / {String(total).padStart(2, '0')}</div>
    </div>

    <div style={{ position: 'absolute', left: 96, bottom: 140, maxWidth: 960 }}>
      <div className="eyebrow" style={{ marginBottom: 36 }}>Takk for oppmerksomheten</div>
      <h2 className="display" style={{ fontSize: 180, margin: 0, lineHeight: 0.9 }}>
        Spørs<span className="accent">mål?</span>
      </h2>
      <p className="lead" style={{ marginTop: 40, fontSize: 28, maxWidth: '54ch' }}>
        Uansett hvilket kundeprosjekt du sitter på — parplanlegg, bygg guardrails,
        og gå god for det agenten leverer.
      </p>
      <div style={{ marginTop: 48, display: 'flex', gap: 56, flexWrap: 'wrap' }}>
        <EndContact label="meg" value="Audun Sørheim · Fremra" />
        <EndContact label="hovmester (for inspirasjon)" value="github.com/navikt/hovmester" />
      </div>
    </div>
  </>
);

const EndContact = ({ label, value }) => (
  <div>
    <div className="mono" style={{ fontSize: 12, color: 'var(--fremra-red)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8, fontWeight: 700 }}>{label}</div>
    <div className="mono" style={{ fontSize: 20, color: 'var(--ink)' }}>{value}</div>
  </div>
);

Object.assign(window, {
  SlideSectionTakeaways, SlideTakeaway1, SlideTakeaway2, SlideTakeaway3, SlideTakeaway4, SlideEnd,
});