/** CRAiD slide — Content with 3-up cards */
function ContentSlide() {
  const items = [
    { t: 'Agentic by Nature', b: 'Humans and AI agents work as one team. Not as an experiment — as everyday reality.' },
    { t: 'Outcome-obsessed', b: 'We sell outcomes, not hours. Every engagement ties to a measurable business result.' },
    { t: 'Design-led, always', b: 'We arrive with craft, empathy, and a pencil. AI extends judgement — it never replaces it.' },
  ];
  return (
    <SlideBase label="04 Content · Philosophy">
      <SlideChrome page="04" total="14" section="Philosophy" />
      <div style={csp.body}>
        <span style={csp.eye}>01 — Philosophy</span>
        <h2 style={csp.h2}>Three things we believe<br /><span style={{ color: 'var(--fg-muted)' }}>before any engagement starts.</span></h2>
        <div style={csp.grid}>
          {items.map((it, i) => (
            <div key={it.t} style={csp.card}>
              <div style={csp.tile}>{String(i + 1).padStart(2, '0')}</div>
              <h3 style={csp.ct}>{it.t}</h3>
              <p style={csp.cb}>{it.b}</p>
            </div>
          ))}
        </div>
      </div>
    </SlideBase>
  );
}

const csp = {
  body: { position: 'absolute', inset: 0, padding: '88px 56px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' },
  eye: { fontSize: 12, fontWeight: 400, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--primary)', marginBottom: 18 },
  h2: { fontSize: 44, fontWeight: 700, lineHeight: 1.1, margin: '0 0 48px', letterSpacing: '-0.01em' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 },
  card: { background: '#fff', border: '1px solid var(--border)', borderRadius: 14, padding: 28, boxShadow: '0 1px 3px rgba(19,31,34,0.04)' },
  tile: { width: 42, height: 42, borderRadius: 10, background: 'rgba(236,22,245,0.10)', color: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18, fontSize: 13, fontWeight: 600, letterSpacing: '0.05em' },
  ct: { margin: '0 0 10px', fontSize: 20, fontWeight: 600, color: 'var(--fg)' },
  cb: { margin: 0, fontSize: 13, fontWeight: 300, lineHeight: 1.6, color: 'var(--fg-muted)' },
};

window.ContentSlide = ContentSlide;