/** Bar chart — growth / velocity data */
function ChartSlide() {
  const bars = [
    { label: 'Jan', a: 42, b: 48 },
    { label: 'Feb', a: 48, b: 62 },
    { label: 'Mrz', a: 55, b: 78 },
    { label: 'Apr', a: 61, b: 92 },
    { label: 'Mai', a: 66, b: 108 },
    { label: 'Jun', a: 70, b: 125 },
    { label: 'Jul', a: 74, b: 148 },
    { label: 'Aug', a: 78, b: 172 },
  ];
  const max = 200;
  return (
    <SlideBase label="08 Chart">
      <SlideChrome page="08" total="14" section="Evidenz" />
      <div style={ch.body}>
        <div style={ch.header}>
          <span style={ch.eye}>05 — Evidenz</span>
          <h2 style={ch.h2}>Agenten-Teams liefern exponentiell,<br /><span style={{ color: 'var(--fg-muted)' }}>nicht linear.</span></h2>
        </div>

        <div style={ch.chartArea}>
          <div style={ch.yAxis}>
            {[200, 150, 100, 50, 0].map((v) => (
              <div key={v} style={ch.yTick}>
                <span style={ch.yLabel}>{v}</span>
                <div style={ch.yLine} />
              </div>
            ))}
          </div>
          <div style={ch.barsWrap}>
            {bars.map((b) => (
              <div key={b.label} style={ch.col}>
                <div style={ch.barStack}>
                  <div style={{ ...ch.bar, height: `${(b.b / max) * 100}%`, background: 'var(--primary)' }}>
                    <span style={ch.barNum}>{b.b}</span>
                  </div>
                  <div style={{ ...ch.bar, height: `${(b.a / max) * 100}%`, background: 'var(--craid-ink)', opacity: 0.85, marginLeft: 4 }} />
                </div>
                <div style={ch.xLabel}>{b.label}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={ch.footer}>
          <div style={ch.legend}>
            <span style={ch.lgItem}><span style={{ ...ch.lgDot, background: 'var(--primary)' }} />Agenten-Team (Design-Artefakte / Monat)</span>
            <span style={ch.lgItem}><span style={{ ...ch.lgDot, background: 'var(--craid-ink)' }} />Klassisches Team</span>
          </div>
          <div style={ch.delta}>
            <span style={ch.deltaNum}>+121%</span>
            <span style={ch.deltaLabel}>Output nach 8 Monaten<br />im Delivery-Factory-Modell</span>
          </div>
        </div>
      </div>
    </SlideBase>
  );
}

const ch = {
  body: { position: 'absolute', inset: 0, padding: '104px 64px 56px', 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: 40, fontWeight: 700, lineHeight: 1.12, margin: 0, letterSpacing: '-0.01em' },

  chartArea: { flex: 1, display: 'grid', gridTemplateColumns: '48px 1fr', gap: 16, minHeight: 0 },
  yAxis: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' },
  yTick: { display: 'flex', alignItems: 'center', gap: 8, flex: 1 },
  yLabel: { fontSize: 10, color: 'var(--fg-subtle)', fontVariantNumeric: 'tabular-nums', width: 28, textAlign: 'right' },
  yLine: { flex: 1, height: 1, background: 'var(--border)', opacity: 0.5 },

  barsWrap: { display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', alignItems: 'end', gap: 0, borderBottom: '1px solid var(--border)', borderLeft: '1px solid var(--border)', padding: '0 12px' },
  col: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, height: '100%', justifyContent: 'flex-end' },
  barStack: { display: 'flex', alignItems: 'end', height: '100%', width: '100%', justifyContent: 'center', paddingBottom: 4 },
  bar: { width: 18, borderRadius: '3px 3px 0 0', position: 'relative', display: 'flex', justifyContent: 'center' },
  barNum: { position: 'absolute', top: -18, fontSize: 10, fontWeight: 600, color: 'var(--primary)', fontVariantNumeric: 'tabular-nums' },
  xLabel: { fontSize: 11, color: 'var(--fg-muted)', fontWeight: 500 },

  footer: { marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  legend: { display: 'flex', gap: 28 },
  lgItem: { display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--fg-muted)' },
  lgDot: { width: 10, height: 10, borderRadius: 3 },
  delta: { display: 'flex', alignItems: 'center', gap: 14 },
  deltaNum: { fontSize: 42, fontWeight: 300, letterSpacing: '-0.03em', color: 'var(--primary)', fontVariantNumeric: 'tabular-nums', lineHeight: 1 },
  deltaLabel: { fontSize: 11, fontWeight: 400, lineHeight: 1.4, color: 'var(--fg-muted)', letterSpacing: '0.02em' },
};

window.ChartSlide = ChartSlide;