/** Timeline — 5-phase horizontal roadmap */
function TimelineSlide() {
  const phases = [
    { w: 'W 1–2',  t: 'Discovery',   b: 'Agentic-readiness assessment, Ist-Analyse, Stakeholder-Map', tag: 'Diagnose' },
    { w: 'W 3–5',  t: 'Opportunity', b: 'Value-Mapping, AX-Priorisierung, drei Hypothesen', tag: 'Strategie' },
    { w: 'W 6–10', t: 'Prototype',   b: 'Zwei Agent-native Prototypen, validiert mit 12 Nutzer:innen', tag: 'Design' },
    { w: 'W 11–16', t: 'Pilot',       b: 'Ein Prototyp im Live-Betrieb mit echten Kunden, Team-Enablement', tag: 'Delivery' },
    { w: 'W 17+', t: 'Scale',       b: 'Playbook, Governance, nächste drei Use Cases priorisiert', tag: 'Transfer' },
  ];
  return (
    <SlideBase label="06 Timeline">
      <SlideChrome page="06" total="14" section="Roadmap" />
      <div style={tl.body}>
        <div style={tl.header}>
          <span style={tl.eye}>03 — Roadmap</span>
          <h2 style={tl.h2}>Von der ersten Woche zum Live-Piloten<br /><span style={{ color: 'var(--fg-muted)' }}>in unter vier Monaten.</span></h2>
        </div>

        <div style={tl.track}>
          <div style={tl.line} />
          {phases.map((p, i) => (
            <div key={p.t} style={tl.col}>
              <div style={tl.dot}>{i + 1}</div>
              <div style={tl.week}>{p.w}</div>
              <div style={tl.phaseTitle}>{p.t}</div>
              <div style={tl.phaseBody}>{p.b}</div>
              <div style={tl.tagRow}><span style={tl.tag}>{p.tag}</span></div>
            </div>
          ))}
        </div>

        <div style={tl.bottomNote}>
          <span style={tl.outcomeLabel}>Outcomes</span>
          <span style={tl.outcomeText}>
            1 validierter Prototyp im Live-Betrieb · interne Agent-Ops-Fähigkeit · Scale-Playbook für 10+ Use Cases
          </span>
        </div>
      </div>
    </SlideBase>
  );
}

const tl = {
  body: { position: 'absolute', inset: 0, padding: '104px 64px 56px', display: 'flex', flexDirection: 'column' },
  header: { marginBottom: 44 },
  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' },

  track: { position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, flex: 1, paddingTop: 36 },
  line: { position: 'absolute', top: 48, left: '8%', right: '8%', height: 1, background: 'var(--border)', zIndex: 0 },
  col: { position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column' },
  dot: { width: 36, height: 36, borderRadius: '50%', background: 'var(--primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 600, marginBottom: 20, boxShadow: '0 0 0 6px rgba(236,22,245,0.10)' },
  week: { fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-muted)', marginBottom: 8 },
  phaseTitle: { fontSize: 20, fontWeight: 600, color: 'var(--fg)', marginBottom: 10, letterSpacing: '-0.005em' },
  phaseBody: { fontSize: 13, fontWeight: 300, lineHeight: 1.55, color: 'var(--fg-muted)', marginBottom: 16, flex: 1 },
  tagRow: { display: 'flex' },
  tag: { fontSize: 10.5, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--primary)', background: 'rgba(236,22,245,0.10)', border: '1px solid rgba(236,22,245,0.20)', padding: '4px 10px', borderRadius: 9999 },

  bottomNote: { marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--border)', display: 'flex', gap: 20, alignItems: 'baseline' },
  outcomeLabel: { fontSize: 11, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--primary)' },
  outcomeText: { fontSize: 13, fontWeight: 300, color: 'var(--fg-muted)', lineHeight: 1.55 },
};

window.TimelineSlide = TimelineSlide;