/** CRAiD slide — Stats / proof */
function StatsSlide() {
  const stats = [
    { k: '3 yrs',  v: 'Agenten im produktiven Einsatz bei Enterprise-Kunden' },
    { k: '12 min', v: 'Median Response-Zeit von Doro, rund um die Uhr' },
    { k: '4.6×',   v: 'Schnellere Lieferung vs. klassische Agenturen' },
    { k: '100%',   v: 'Human-reviewed Outputs, bevor irgendetwas live geht' },
  ];
  return (
    <SlideBase label="13 Stats">
      <SlideChrome page="13" total="14" section="Evidenz" />
      <div style={sts.body}>
        <span style={sts.eye}>02 — Proof</span>
        <h2 style={sts.h2}>Die Zahlen,<br /><span style={{ color: 'var(--fg-muted)' }}>die zählen.</span></h2>
        <div style={sts.grid}>
          {stats.map((s, i) => (
            <div key={s.k} style={{
              ...sts.cell,
              borderRight: i < stats.length - 1 ? '1px solid var(--border)' : 'none',
            }}>
              <div style={sts.k}>{s.k}</div>
              <div style={sts.v}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>
    </SlideBase>
  );
}

const sts = {
  body: { position: 'absolute', inset: 0, padding: '104px 64px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' },
  eye: { fontSize: 12, fontWeight: 400, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--primary)', marginBottom: 18 },
  h2: { fontSize: 56, fontWeight: 700, lineHeight: 1.05, margin: '0 0 64px', letterSpacing: '-0.015em' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' },
  cell: { padding: '44px 36px' },
  k: { fontSize: 72, fontWeight: 300, color: 'var(--primary)', lineHeight: 1, letterSpacing: '-0.03em', marginBottom: 18, fontVariantNumeric: 'tabular-nums' },
  v: { fontSize: 13.5, fontWeight: 400, lineHeight: 1.55, color: 'var(--fg-muted)', maxWidth: 220 },
};

window.StatsSlide = StatsSlide;