/* global React */
const { useState, useEffect } = React;

// ==== SLIDE CHROME ====
const Chrome = ({ num, total, tag, middle, dark }) => (
  <>
    <div className={'slide-chrome-top' + (dark ? ' is-dark' : '')}>
      <div className="chrome-left">
        <span>{tag}</span>
      </div>
      <div className="chrome-center">{middle}</div>
      <div className="chrome-right tnum">{String(num).padStart(2, '0')} / {String(total).padStart(2, '0')}</div>
    </div>
  </>
);

const FremraMark = ({ size = 40 }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
    <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="72" textAnchor="middle" fill="white"
      style={{ fontFamily: 'var(--ff-display)', fontWeight: 900, fontSize: '64px', letterSpacing: '-0.02em' }}>
      F
    </text>
  </svg>
);

const FremraWordmark = ({ size = 40 }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <FremraMark size={size} />
    <span className="display" style={{ fontSize: size * 0.9, lineHeight: 1 }}>Fremra</span>
  </div>
);

// ==== SLIDE 1 — TITLE ====
const SlideTitle = () => (
  <>
    {/* Big accent F in background */}
    <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', left: 96, bottom: 140, maxWidth: 1100 }}>
      <div className="eyebrow" style={{ marginBottom: 36 }}>En presentasjon av Audun Sørheim</div>
      <h1 className="display" style={{ fontSize: 220, margin: 0 }}>
        Copilot<br />
        <span className="accent">i Nav.</span>
      </h1>
      <p className="lead" style={{ marginTop: 48, fontSize: 32, maxWidth: '48ch' }}>
        Mine erfaringer med å jobbe agentisk i et ekte kundeprosjekt —
        kodenærhet, ansvar og mønstre som er overførbare.
      </p>
    </div>
  </>
);

// ==== SLIDE 2 — AGENDA ====
const SlideAgenda = ({ total }) => {
  const items = [
    { n: '01', t: 'Team eSyfo', s: 'Hvor jeg jobber og hva vi lager' },
    { n: '02', t: 'Copilot-landskapet i Nav', s: 'Én tillatt, fri bruk, 300 kvote' },
    { n: '03', t: 'Utviklerundersøkelsen 2026', s: '93 % bruker aktivt — og er bekymret' },
    { n: '04', t: 'Mine erfaringer', s: 'Ikke skrevet en linje på måneder' },
    { n: '05', t: 'Hovmester', s: 'Ett eksempel på hvordan vi bygde vår egen agent-stack' },
    { n: '06', t: 'Fire takeaways', s: 'Mønstre som er overførbare til ditt kundeprosjekt' },
  ];
  return (
    <>
      <Chrome num={2} total={total} tag="Agenda" middle="Hva vi skal gjennom i dag" />
      <div className="slide-pad">
        <h2 className="display" style={{ fontSize: 120, margin: 0, marginBottom: 64 }}>
          Seks <span className="accent">kapitler</span>.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px 40px' }}>
          {items.map(({ n, t, s }) => (
            <div key={n} style={{
              display: 'grid', gridTemplateColumns: '100px 1fr',
              borderTop: '1px solid var(--line-strong)',
              paddingTop: 24, paddingBottom: 4,
              minHeight: 120,
            }}>
              <div className="mono" style={{ fontSize: 18, color: 'var(--fremra-red)', fontWeight: 700 }}>{n}</div>
              <div>
                <div className="display" style={{ fontSize: 40, fontWeight: 800, lineHeight: 1.05 }}>{t}</div>
                <div style={{ fontSize: 20, color: 'var(--mute)', marginTop: 8 }}>{s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

// ==== SLIDE 3 — WHO I AM / eSyfo intro ====
const SlideWhoAmI = ({ total }) => (
  <>
    <Chrome num={3} total={total} tag="01 / 01" middle="Fremra → Nav → Team eSyfo" />
    <div className="slide-pad">
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 80, height: '100%' }}>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Kapittel 01</div>
          <h2 className="display" style={{ fontSize: 140, margin: 0, lineHeight: 0.92 }}>
            Jeg leies<br/>ut til <span className="accent">Nav.</span>
          </h2>
          <p className="lead" style={{ marginTop: 40, fontSize: 30 }}>
            Fullstack-utvikler i Fremra.
            Sitter i team <strong>eSyfo</strong> — ekstern
            sykefraværsoppfølging — og jobber med Navs
            sykefraværsprodukter for sykmeldt og arbeidsgiver.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'center' }}>
          <OrgRow label="Arbeidsgiver" value="Fremra" accent />
          <OrgArrow />
          <OrgRow label="Utleid til" value="Nav" />
          <OrgArrow />
          <OrgRow label="Team" value="eSyfo" highlight />
          <OrgArrow />
          <OrgRow label="Domene" value="Ekstern sykefraværsoppfølging" small />
        </div>
      </div>
    </div>
  </>
);

const OrgRow = ({ label, value, accent, highlight, small }) => (
  <div style={{
    background: highlight ? 'var(--fremra-red)' : 'var(--paper-2)',
    color: highlight ? 'white' : 'var(--ink)',
    border: highlight ? 'none' : '1px solid var(--line)',
    padding: '24px 32px',
  }}>
    <div className="mono" style={{
      fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
      color: highlight ? 'rgba(255,255,255,0.75)' : 'var(--mute)',
      marginBottom: 6,
    }}>{label}</div>
    <div className="display" style={{
      fontSize: small ? 28 : 44, lineHeight: 1.1,
      color: accent && !highlight ? 'var(--fremra-red)' : 'inherit',
    }}>{value}</div>
  </div>
);

const OrgArrow = () => (
  <div style={{ textAlign: 'center', color: 'var(--mute)', fontSize: 24, lineHeight: 0.5 }}>↓</div>
);

// ==== SLIDE 4 — eSyfo: hva gjør vi ====
const SlideEsyfo = ({ total }) => (
  <>
    <Chrome num={4} total={total} tag="01 / 02" middle="Sykefraværsoppfølging på nav.no" />
    <div className="slide-pad">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, height: '100%' }}>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <h2 className="display" style={{ fontSize: 96, margin: 0 }}>
            Sykefraværs-<br/>oppfølging på <span className="accent">nav.no.</span>
          </h2>
          <p className="lead" style={{ marginTop: 36, fontSize: 26 }}>
            Fellesnevner for teamet: produkter og tjenester innenfor
            sykefraværsoppfølging som sykmeldte og arbeidsgivere
            møter på nav.no.
          </p>
          <div style={{ marginTop: 32, display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {[
              'Oppfølgingsplan',
              'Aktivitetsplikt',
              'Dialogmøte',
              'Dine sykmeldte',
              'Behovsrettet oppfølging',
              'Registrering av nærmeste leder',
              'Oppfølging i sen fase',
              '+ mye annet',
            ].map(p => (
              <span key={p} className="pill">{p}</span>
            ))}
          </div>
          <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'baseline', gap: 14 }}>
            <span className="display" style={{ fontSize: 56, color: 'var(--fremra-red)', lineHeight: 1 }}>30+</span>
            <span style={{ fontSize: 18, color: 'var(--mute)', fontFamily: 'var(--ff-mono)', letterSpacing: '0.04em' }}>
              aktive repoer på tvers av teamet
            </span>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, justifyContent: 'center' }}>
          <div className="card-label">Hvem møter produktene?</div>
          <ActorRow role="Sykmeldt" note="primær bruker" primary />
          <ActorRow role="Arbeidsgiver" note="primær bruker" primary />
          <div className="hr" style={{ margin: '8px 0' }} />
          <ActorRow role="Fastlege" note="mottar f.eks. oppfølgingsplan" />
          <ActorRow role="Nav-veileder" note="leser, følger opp" />
        </div>
      </div>
    </div>
  </>
);

const ActorRow = ({ role, note, primary }) => (
  <div style={{
    display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center',
    padding: '20px 28px',
    background: primary ? 'var(--paper-2)' : 'transparent',
    border: '1px solid ' + (primary ? 'var(--line-strong)' : 'var(--line)'),
    borderLeft: primary ? '4px solid var(--fremra-red)' : '1px solid var(--line)',
  }}>
    <div className="display" style={{ fontSize: 32 }}>{role}</div>
    <div className="mono" style={{ fontSize: 13, color: 'var(--mute)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
      {note}
    </div>
  </div>
);

// ==== SLIDE 5 — TO EKSEMPLER ====
const SlideToEksempler = ({ total }) => (
  <>
    <Chrome num={5} total={total} tag="01 / 03" middle="To eksempler på produktene våre" />
    <div className="slide-pad">
      <div className="eyebrow" style={{ marginBottom: 20 }}>Eksempler</div>
      <h2 className="display" style={{ fontSize: 88, margin: 0, marginBottom: 8 }}>
        To av mange <span className="accent">produkter.</span>
      </h2>
      <p style={{ fontSize: 20, color: 'var(--mute)', fontFamily: 'var(--ff-mono)', marginBottom: 36, letterSpacing: '0.04em' }}>
        Kjerneprodukter som sykmeldte og arbeidsgivere møter på nav.no.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        <ExampleCard
          title="Oppfølgingsplan"
          desc="Arbeidsgiver og sykmeldt samarbeider om en plan for tilbake i arbeid. Kan deles med fastlegen og sendes til Nav."
          img="assets/oppfolgingsplan.png"
          alt="Oppfølgingsplan skjermbilde"
        />
        <ExampleCard
          title="Aktivitetsplikt"
          desc="Informerer den sykmeldte om lovpålagte krav etter 8 uker — og hva det betyr konkret for dem."
          img="assets/aktivitetsplikt.png"
          alt="Aktivitetsplikt skjermbilde"
        />
      </div>
    </div>
  </>
);

const ExampleCard = ({ title, desc, img, alt }) => (
  <div>
    <div className="framed" style={{ padding: 10, marginBottom: 20 }}>
      <img src={img} alt={alt} style={{ width: '100%', display: 'block' }} />
    </div>
    <div className="display" style={{ fontSize: 36, lineHeight: 1.05, marginBottom: 10 }}>{title}</div>
    <p style={{ fontSize: 18, color: 'var(--ink-2)', lineHeight: 1.45, margin: 0 }}>{desc}</p>
  </div>
);

Object.assign(window, {
  Chrome, FremraMark, FremraWordmark,
  SlideTitle, SlideAgenda, SlideWhoAmI, SlideEsyfo,
  SlideToEksempler,
});