/** Comparison table — traditional vs agentic */
function ComparisonSlide() {
  const rows = [
    { dim: 'Pricing',        old: 'Day rates, hours, retainers',          craid: 'Outcome-based, milestone-bound' },
    { dim: 'Team',           old: '4–8 Menschen',                          craid: '2 Menschen + 4 Agenten als Ko-Team' },
    { dim: 'Cycle',          old: '6–12 Wochen pro Iteration',            craid: '5–10 Tage, voll auditierbar' },
    { dim: 'Knowledge',      old: 'Slides im Team-Drive verwaist',         craid: 'Projekt-Memory, shared mit Doro' },
    { dim: 'Handover',       old: 'PDF + „Viel Erfolg"',                   craid: 'Live-Pilot, Playbook, Enablement' },
    { dim: 'Risk',           old: 'Hohes Up-Front-Commit',                  craid: 'Pay-per-outcome, raus jederzeit' },
  ];
  return (
    <SlideBase label="11 Compare">
      <SlideChrome page="11" total="14" section="Vergleich" />
      <div style={cp.body}>
        <div style={cp.header}>
          <span style={cp.eye}>08 — Warum CRAiD</span>
          <h2 style={cp.h2}>Das klassische Beratungsmodell ist gebrochen.<br /><span style={{ color: 'var(--fg-muted)' }}>Unseres nicht.</span></h2>
        </div>

        <div style={cp.table}>
          <div style={cp.headRow}>
            <div />
            <div style={cp.colHeadOld}>
              <div style={cp.colHeadLabel}>Klassisch</div>
              <div style={cp.colHeadSub}>Agenturen & Beratungen heute</div>
            </div>
            <div style={cp.colHeadCraid}>
              <div style={cp.colHeadLabelPink}>CRAiD</div>
              <div style={cp.colHeadSubPink}>Delivery Factory</div>
            </div>
          </div>

          {rows.map((r) => (
            <div key={r.dim} style={cp.row}>
              <div style={cp.dim}>{r.dim}</div>
              <div style={cp.cellOld}>
                <span style={{ fontSize: 16, color: 'var(--fg-subtle)' }}>✕</span>
                <span>{r.old}</span>
              </div>
              <div style={cp.cellCraid}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                <span>{r.craid}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </SlideBase>
  );
}

const cp = {
  body: { position: 'absolute', inset: 0, padding: '104px 64px 64px', display: 'flex', flexDirection: 'column' },
  header: { marginBottom: 32 },
  eye: { display: 'block', fontSize: 12, fontWeight: 400, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--primary)', marginBottom: 14 },
  h2: { fontSize: 36, fontWeight: 700, lineHeight: 1.14, margin: 0, letterSpacing: '-0.01em' },

  table: { border: '1px solid var(--border)', borderRadius: 16, overflow: 'hidden', background: '#fff' },
  headRow: { display: 'grid', gridTemplateColumns: '220px 1fr 1fr', background: 'var(--craid-lavender-soft)' },
  colHeadOld: { padding: '20px 24px', borderLeft: '1px solid var(--border)' },
  colHeadCraid: { padding: '20px 24px', borderLeft: '1px solid var(--border)', background: 'rgba(236,22,245,0.06)' },
  colHeadLabel: { fontSize: 16, fontWeight: 600, color: 'var(--fg-muted)', marginBottom: 4 },
  colHeadLabelPink: { fontSize: 16, fontWeight: 600, color: 'var(--primary)', marginBottom: 4 },
  colHeadSub: { fontSize: 11, color: 'var(--fg-muted)', letterSpacing: '0.05em' },
  colHeadSubPink: { fontSize: 11, color: 'var(--primary)', opacity: 0.75, letterSpacing: '0.05em' },

  row: { display: 'grid', gridTemplateColumns: '220px 1fr 1fr', borderTop: '1px solid var(--border)' },
  dim: { padding: '18px 24px', fontSize: 13, fontWeight: 500, color: 'var(--fg-muted)', letterSpacing: '0.02em', textTransform: 'uppercase', display: 'flex', alignItems: 'center' },
  cellOld: { padding: '18px 24px', borderLeft: '1px solid var(--border)', fontSize: 14, color: 'var(--fg-muted)', display: 'flex', gap: 12, alignItems: 'center', lineHeight: 1.5 },
  cellCraid: { padding: '18px 24px', borderLeft: '1px solid var(--border)', fontSize: 14, color: 'var(--fg)', fontWeight: 500, display: 'flex', gap: 12, alignItems: 'center', lineHeight: 1.5, background: 'rgba(236,22,245,0.03)' },
};

window.ComparisonSlide = ComparisonSlide;