/* global React, Chrome */

// ==== SECTION BREAK: HOVMESTER ====
const SlideSectionHovmester = ({ total }) => (
  <>
    <div style={{ position: 'absolute', inset: 0, background: 'var(--night)' }} />
    <div style={{ position: 'absolute', right: -150, bottom: -150, width: 900, height: 900, opacity: 0.10 }}>
      <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 }}>05</span>
        Kapittel
      </div>
      <div className="mono tnum" style={{ fontSize: 14, color: 'var(--night-mute)' }}>26 / {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 05</div>
      <h2 className="display" style={{ fontSize: 260, margin: 0, lineHeight: 0.9, color: 'var(--paper)' }}>
        Hov<span className="accent">mester.</span>
      </h2>
      <p className="lead" style={{ color: 'var(--paper)', opacity: 0.75, marginTop: 40, fontSize: 28 }}>
        Vår egen agent-stack: orkestrering, skills og instructions for vår Nav-kontekst.
      </p>
      <p className="mono" style={{ marginTop: 24, fontSize: 14, color: 'var(--night-mute)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        github.com/navikt/hovmester
      </p>
    </div>
  </>
);

// ==== HOVMESTER — WHY ====
const SlideHovmesterWhy = ({ total }) => (
  <>
    <Chrome num={27} total={total} tag="05 / 01" middle="Hvorfor bygge dette selv" />
    <div className="slide-pad">
      <div className="eyebrow" style={{ marginBottom: 20 }}>Premiss</div>
      <h2 className="display" style={{ fontSize: 88, margin: 0, marginBottom: 48, maxWidth: '22ch' }}>
        Jeg ville gjøre agentisk arbeid enkelt for <span className="accent">teamet vårt.</span>
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        <PremissCard num="01" title="Én agent fylles fort" body="Utforskning, regler og historikk spiser kontekstvinduet før jobben er gjort." />
        <PremissCard num="02" title="Ulike roller trenger ulike hoder" body="Plan, backend, frontend og review er forskjellige jobber — sjelden samme chat-session." />
        <PremissCard num="03" title="Én modells blindsoner er en annens styrke" body="Claude og GPT gjør feil på ulike steder. Cross-model review fanger det." />
      </div>
    </div>
  </>
);

const PremissCard = ({ num, title, body }) => (
  <div className="card" style={{ padding: 32, minHeight: 280, display: 'flex', flexDirection: 'column' }}>
    <div className="mono" style={{ fontSize: 13, color: 'var(--fremra-red)', letterSpacing: '0.14em', fontWeight: 700, marginBottom: 20 }}>{num}</div>
    <div className="display" style={{ fontSize: 30, lineHeight: 1.1, marginBottom: 20 }}>{title}</div>
    <div style={{ fontSize: 18, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 'auto' }}>{body}</div>
  </div>
);

// ==== HOVMESTER — AGENT FAMILY ====
const SlideHovmesterFamily = ({ total }) => (
  <>
    <div style={{ position: 'absolute', inset: 0, background: 'var(--night)' }} />
    <Chrome num={28} total={total} tag="05 / 02" middle="Agent-orkestrering" dark />
    <div className="slide-pad">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, height: '100%', alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ color: 'var(--fremra-red)', marginBottom: 20 }}>Familien</div>
          <h2 className="display" style={{ fontSize: 88, margin: 0, lineHeight: 0.95, color: 'var(--paper)' }}>
            Hovmester <span className="accent">leder</span>, utvikler ikke.
          </h2>
          <p className="lead" style={{ fontSize: 24, marginTop: 32, color: 'var(--paper)', opacity: 0.8 }}>
            Planlegger, delegerer, holder status, konsoliderer review.
            Kokken, souschefen og konditoren gjør selve arbeidet.
          </p>
        </div>
        <AgentTree />
      </div>
    </div>
  </>
);

const AgentBox = ({ label, role, outlined, tone = 'green', size }) => {
  const color = tone === 'green' ? 'var(--fremra-red)' : '#4EC3E0';
  const labelSize = size === 'small' ? 18 : 22;
  return (
    <div style={{
      border: `2px solid ${color}`,
      background: outlined ? 'transparent' : 'var(--night-2)',
      padding: '14px 18px',
      color: 'var(--paper)',
      fontFamily: 'var(--ff-display)',
      textAlign: 'center',
      minWidth: 150,
    }}>
      <div className="mono" style={{ fontSize: 11, color, letterSpacing: '0.14em', marginBottom: 4 }}>{role}</div>
      <div style={{ fontSize: labelSize, fontWeight: 800, letterSpacing: '-0.01em' }}>{label}</div>
    </div>
  );
};

const AgentTree = () => (
  <svg viewBox="0 0 700 500" style={{ width: '100%', maxHeight: 560 }}>
    {/* Top box */}
    <foreignObject x="230" y="10" width="240" height="80">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <AgentBox label="HOVMESTER" role="ORCHESTRATOR / OPUS" />
      </div>
    </foreignObject>
    {/* Lines down */}
    <line x1="350" y1="90" x2="120" y2="170" stroke="var(--fremra-red)" strokeWidth="2" />
    <line x1="350" y1="90" x2="350" y2="170" stroke="var(--fremra-red)" strokeWidth="2" />
    <line x1="350" y1="90" x2="580" y2="170" stroke="var(--fremra-red)" strokeWidth="2" />
    {/* Middle row */}
    <foreignObject x="20" y="170" width="200" height="80">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <AgentBox label="SOUSCHEF" role="PLAN / OPUS" />
      </div>
    </foreignObject>
    <foreignObject x="250" y="170" width="200" height="80">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <AgentBox label="KOKK" role="BACKEND / GPT" />
      </div>
    </foreignObject>
    <foreignObject x="480" y="170" width="200" height="80">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <AgentBox label="KONDITOR" role="FRONTEND / OPUS" />
      </div>
    </foreignObject>
    {/* Review labels */}
    <text x="350" y="320" textAnchor="middle" fill="#4EC3E0" fontFamily="var(--ff-mono)" fontSize="13" letterSpacing="0.1em">
      CROSS-MODEL REVIEW
    </text>
    {/* Dashed arrows */}
    <line x1="350" y1="250" x2="200" y2="370" stroke="#4EC3E0" strokeWidth="2" strokeDasharray="6 4" />
    <line x1="580" y1="250" x2="520" y2="370" stroke="#4EC3E0" strokeWidth="2" strokeDasharray="6 4" />
    {/* Bottom row */}
    <foreignObject x="60" y="370" width="280" height="110">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <AgentBox label="INSPEKTØR-CLAUDE" role="REVIEW / OPUS" outlined tone="blue" size="small" />
      </div>
    </foreignObject>
    <foreignObject x="380" y="370" width="280" height="110">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <AgentBox label="INSPEKTØR-GPT" role="REVIEW / GPT" outlined tone="blue" size="small" />
      </div>
    </foreignObject>
  </svg>
);

// ==== HOVMESTER — ISSUES AS WORK ORDERS ====
const SlideHovmesterIssues = ({ total }) => {
  const steps = [
    { n: '01', t: 'KI foreslår issue fra en idé' },
    { n: '02', t: 'Team parplanlegger, diskuterer, justerer' },
    { n: '03', t: 'Ferdig issue = spec for agenten' },
    { n: '04', t: 'Agent implementerer og leverer PR' },
  ];
  return (
    <>
      <Chrome num={29} total={total} tag="05 / 03" middle="Issues er felles språk" />
      <div className="slide-pad">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, height: '100%', alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Arbeidsobjekt</div>
            <h2 className="display" style={{ fontSize: 64, margin: 0, lineHeight: 1 }}>
              Issues er felles språk — <br /><span className="accent">for oss og agentene.</span>
            </h2>
            <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {steps.map(s => (
                <div key={s.n} style={{
                  display: 'grid', gridTemplateColumns: '56px 1fr', gap: 18,
                  alignItems: 'baseline', borderTop: '1px solid var(--line)', paddingTop: 14,
                }}>
                  <div className="mono" style={{ fontSize: 14, color: 'var(--fremra-red)', fontWeight: 700, letterSpacing: '0.12em' }}>{s.n}</div>
                  <div style={{ fontSize: 21, color: 'var(--ink)', lineHeight: 1.3 }}>{s.t}</div>
                </div>
              ))}
            </div>
            <p style={{ marginTop: 28, fontSize: 16, color: 'var(--mute)', fontFamily: 'var(--ff-mono)', letterSpacing: '0.04em' }}>
              Swappet fra Trello → GitHub Projects. Hvert brett = agent-kø.
            </p>
          </div>
          <div className="card" style={{ padding: 36, fontFamily: 'var(--ff-mono)', fontSize: 18, lineHeight: 2, background: 'var(--ink)', color: 'var(--paper)', border: 'none' }}>
            <div style={{ color: 'var(--fremra-red)' }}>EPIC  implementer ny visning</div>
            <div style={{ color: 'var(--paper)', opacity: 0.85 }}>├─ TASK backend-kontrakt</div>
            <div style={{ color: 'var(--paper)', opacity: 0.85 }}>├─ TASK frontend fra Figma</div>
            <div style={{ color: 'var(--paper)', opacity: 0.85 }}>└─ TASK test + review</div>
            <div style={{ height: 24 }}></div>
            <div style={{ color: 'var(--fremra-red)', opacity: 0.85 }}>hver task = fersk kontekst</div>
            <div style={{ color: 'var(--fremra-red)', opacity: 0.85 }}>hver PR   = tydelig historie</div>
          </div>
        </div>
      </div>
    </>
  );
};

// ==== HOVMESTER — REFERANSE TIL GITHUB ====
const SlideHovmesterRepo = ({ total }) => (
  <>
    <div style={{ position: 'absolute', inset: 0, background: 'var(--night)' }} />
    <Chrome num={30} total={total} tag="05 / 04" middle="Åpen kildekode i navikt" dark />
    <div className="slide-pad">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 20, color: 'var(--fremra-red)' }}>Inspirasjon</div>
          <h2 className="display" style={{ fontSize: 80, margin: 0, lineHeight: 0.95, color: 'var(--paper)' }}>
            Alt ligger åpent i <span className="accent">navikt/hovmester.</span>
          </h2>
          <p className="lead" style={{ fontSize: 22, marginTop: 28, color: 'var(--paper)', opacity: 0.75 }}>
            README viser hvordan du synker agents, instructions, skills og
            templates inn i repoet ditt. Kjør én workflow, så er det der.
          </p>
          <div className="mono" style={{
            marginTop: 40, padding: '20px 28px',
            background: 'var(--night-2)', border: '1px solid var(--fremra-red)',
            color: 'var(--fremra-red)', fontSize: 20, fontWeight: 600,
          }}>
            github.com/navikt/hovmester
          </div>
        </div>
        <div className="card" style={{
          padding: 40, background: 'var(--night-2)', border: '1px solid var(--line)', color: 'var(--paper)',
        }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 20 }}>
            <span style={{ width: 12, height: 12, background: '#FF5F57', borderRadius: '50%' }} />
            <span style={{ width: 12, height: 12, background: '#FFBD2E', borderRadius: '50%' }} />
            <span style={{ width: 12, height: 12, background: '#28CA41', borderRadius: '50%' }} />
          </div>
          <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 18, lineHeight: 2 }}>
            <div><span style={{ color: 'var(--fremra-red)' }}>$</span> gh repo view navikt/hovmester --web</div>
            <div style={{ color: 'var(--night-mute)' }}># sync → collections → agents → templates</div>
            <div style={{ height: 12 }}></div>
            <div><span style={{ color: 'var(--fremra-red)' }}>$</span> copilot --agent hovmester \</div>
            <div style={{ paddingLeft: 20 }}>   --prompt "Løs issue #123"</div>
            <div style={{ color: 'var(--night-mute)' }}># issue → plan → subagenter → review → PR</div>
          </div>
        </div>
      </div>
    </div>
  </>
);

Object.assign(window, {
  SlideSectionHovmester, SlideHovmesterWhy, SlideHovmesterFamily,
  SlideHovmesterIssues, SlideHovmesterRepo,
});