/** Case-study split — hero image left, outcomes right */
function CaseStudySlide() {
  return (
    <SlideBase label="10 Case">
      <SlideChrome page="10" total="14" section="Case Study" />
      <div style={cst.body}>
        <div style={cst.cover}>
          <div style={cst.coverImg} />
          <div style={cst.coverScrim} />
          <div style={cst.coverMeta}>
            <div style={cst.industry}>Industrie · DAX-40</div>
            <div style={cst.client}>Versicherung 2026</div>
          </div>
          <div style={cst.coverTag}>
            <span style={cst.dot} />
            <span>Live seit 11 Monaten</span>
          </div>
        </div>

        <div style={cst.content}>
          <span style={cst.eye}>07 — Case Study</span>
          <h2 style={cst.h2}>Von 48h Response auf<br /><span style={{ color: 'var(--primary)' }}>12 Minuten.</span></h2>
          <p style={cst.lead}>
            Ein Delivery-Factory-Setup mit drei Agenten und vier Designer:innen hat den
            Schadenfall-Intake eines DAX-Versicherers neu gebaut — ohne das Core-System
            anzufassen.
          </p>

          <div style={cst.kpis}>
            <div style={cst.kpi}>
              <div style={cst.kpiNum}>−96%</div>
              <div style={cst.kpiLabel}>Response-Zeit</div>
            </div>
            <div style={cst.kpi}>
              <div style={cst.kpiNum}>+38</div>
              <div style={cst.kpiLabel}>NPS-Punkte in Q1</div>
            </div>
            <div style={cst.kpi}>
              <div style={cst.kpiNum}>€4.2M</div>
              <div style={cst.kpiLabel}>Jährl. Kostenersparnis</div>
            </div>
          </div>

          <div style={cst.outcome}>
            <span style={cst.outcomeLabel}>Outcomes:</span>
            <span style={cst.outcomeText}>
              Agent-gestützter Intake · neues Claims-Portal · Agent-Ops-Team aufgebaut · Playbook für 6 weitere Länder
            </span>
          </div>
        </div>
      </div>
    </SlideBase>
  );
}

const cst = {
  body: { position: 'absolute', inset: 0, padding: '104px 64px 64px', display: 'grid', gridTemplateColumns: '460px 1fr', gap: 56 },
  cover: { position: 'relative', borderRadius: 20, overflow: 'hidden', boxShadow: 'var(--shadow-lg)' },
  coverImg: { position: 'absolute', inset: 0, backgroundImage: 'url(../../assets/brand-image-020.jpeg)', backgroundSize: 'cover', backgroundPosition: 'center' },
  coverScrim: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 30%, rgba(19,31,34,0.75) 100%)' },
  coverMeta: { position: 'absolute', left: 24, bottom: 24, color: '#fff' },
  industry: { fontSize: 11, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase', opacity: 0.75, marginBottom: 8 },
  client: { fontSize: 32, fontWeight: 600, letterSpacing: '-0.01em' },
  coverTag: { position: 'absolute', top: 20, right: 20, display: 'flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', padding: '6px 12px', borderRadius: 9999, fontSize: 11, fontWeight: 500, color: 'var(--fg)' },
  dot: { width: 7, height: 7, borderRadius: '50%', background: 'var(--craid-success)' },

  content: { display: 'flex', flexDirection: 'column' },
  eye: { fontSize: 12, fontWeight: 400, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--primary)', marginBottom: 14 },
  h2: { fontSize: 48, fontWeight: 700, lineHeight: 1.05, margin: '0 0 20px', letterSpacing: '-0.015em' },
  lead: { fontSize: 15, fontWeight: 300, lineHeight: 1.625, color: 'var(--fg-muted)', margin: '0 0 36px', maxWidth: 520 },

  kpis: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, paddingTop: 22, paddingBottom: 26, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', marginBottom: 24 },
  kpi: { paddingRight: 20, borderRight: '1px solid var(--border)' },
  kpiNum: { fontSize: 36, fontWeight: 300, color: 'var(--primary)', letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 8, fontVariantNumeric: 'tabular-nums' },
  kpiLabel: { fontSize: 12, fontWeight: 400, color: 'var(--fg-muted)', letterSpacing: '0.02em' },

  outcome: { display: 'flex', gap: 12, alignItems: 'baseline' },
  outcomeLabel: { fontSize: 11, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--primary)', flexShrink: 0 },
  outcomeText: { fontSize: 13, fontWeight: 300, color: 'var(--fg-muted)', lineHeight: 1.55 },
};

window.CaseStudySlide = CaseStudySlide;