/** Agenda slide — numbered list with time estimates */
function AgendaSlide() {
  const items = [
    { n: '01', title: 'Status quo: wo ihr heute steht', dur: '10 min', owner: 'Carlo · Research' },
    { n: '02', title: 'Die agentische Opportunität', dur: '15 min', owner: 'Maja · Business Design' },
    { n: '03', title: 'Unser Ansatz: Delivery Factory', dur: '20 min', owner: 'Brandon · Beratung' },
    { n: '04', title: 'Roadmap & Outcomes', dur: '15 min', owner: 'Doro · Chief of Staff' },
    { n: '05', title: 'Investment & nächste Schritte', dur: '10 min', owner: 'Daniel · Founder' },
  ];
  return (
    <SlideBase label="02 Agenda">
      <SlideChrome page="02" total="14" section="Agenda" />
      <div style={ag.body}>
        <div style={ag.left}>
          <span style={ag.eye}>Heute, 70 Minuten</span>
          <h2 style={ag.h2}>Was wir<br />gemeinsam<br />durchgehen.</h2>
        </div>
        <ol style={ag.list}>
          {items.map((it) => (
            <li key={it.n} style={ag.row}>
              <span style={ag.n}>{it.n}</span>
              <div style={{ flex: 1 }}>
                <div style={ag.title}>{it.title}</div>
                <div style={ag.meta}>{it.owner}</div>
              </div>
              <span style={ag.dur}>{it.dur}</span>
            </li>
          ))}
        </ol>
      </div>
    </SlideBase>
  );
}

const ag = {
  body: { position: 'absolute', inset: 0, padding: '120px 64px 64px', display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64 },
  left: { paddingTop: 20 },
  eye: { display: 'block', fontSize: 12, fontWeight: 400, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--primary)', marginBottom: 20 },
  h2: { fontSize: 56, fontWeight: 700, lineHeight: 1.05, margin: 0, letterSpacing: '-0.015em' },
  list: { margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column' },
  row: { display: 'flex', alignItems: 'center', gap: 24, padding: '22px 0', borderTop: '1px solid var(--border)' },
  n: { fontSize: 13, fontWeight: 500, color: 'var(--primary)', letterSpacing: '0.1em', width: 28 },
  title: { fontSize: 22, fontWeight: 600, color: 'var(--fg)', letterSpacing: '-0.005em', marginBottom: 4 },
  meta: { fontSize: 12, fontWeight: 400, color: 'var(--fg-muted)', letterSpacing: '0.02em' },
  dur: { fontSize: 12, fontWeight: 500, color: 'var(--fg-muted)', letterSpacing: '0.05em', fontVariantNumeric: 'tabular-nums' },
};

window.AgendaSlide = AgendaSlide;