/** CRAiD slide — Section divider (lavender wash, consistent chrome) */
function SectionSlide({ number = '02', kicker = 'Philosophy', title = 'Wir arbeiten schon so, wie eure Organisation morgen arbeiten wird.', page = '03', total = '14' }) {
  return (
    <SlideBase label={`${page} Section · ${kicker}`} bg="var(--craid-lavender-soft)">
      <div style={ss.wash} />
      <SlideChrome page={page} total={total} section={kicker} />
      <div style={ss.body}>
        <div style={ss.topRow}>
          <span style={ss.num}>{number}</span>
          <span style={ss.eye}>Chapter</span>
        </div>
        <h2 style={ss.h2}>{title}</h2>
      </div>
    </SlideBase>
  );
}

const ss = {
  wash: { position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 80% 80%, rgba(236,22,245,0.12) 0%, transparent 55%)', zIndex: 0 },
  body: { position: 'absolute', inset: 0, padding: '88px 96px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center', zIndex: 2 },
  topRow: { display: 'flex', alignItems: 'center', gap: 16, marginBottom: 36 },
  num: { fontSize: 13, fontWeight: 500, color: 'var(--primary)', letterSpacing: '0.1em' },
  eye: { fontSize: 11, fontWeight: 500, color: 'var(--fg-muted)', letterSpacing: '0.15em', textTransform: 'uppercase' },
  h2: { fontSize: 68, fontWeight: 700, lineHeight: 1.08, margin: 0, maxWidth: 1000, letterSpacing: '-0.015em' },
};

window.SectionSlide = SectionSlide;