/** Process / workflow — horizontal step diagram with connectors */
function ProcessSlide() {
  const steps = [
    { n: '01', t: 'Listen',   b: 'Ist-Analyse mit Stakeholdern, Agent-Readiness, KPI-Baseline.' },
    { n: '02', t: 'Frame',    b: 'Hypothesen formulieren, Value-Mapping, Erfolgskriterien fixieren.' },
    { n: '03', t: 'Prototype', b: 'Agent-native Flows in 2 Wochen, getestet mit echten Nutzer:innen.' },
    { n: '04', t: 'Ship',     b: 'Live-Pilot, Team-Enablement, Governance-Guardrails.' },
    { n: '05', t: 'Scale',    b: 'Playbook, nächste Use Cases, Agent-Ops in der Linie verankert.' },
  ];
  return (
    <SlideBase label="09 Process">
      <SlideChrome page="09" total="14" section="Methode" />
      <div style={pr.body}>
        <div style={pr.header}>
          <span style={pr.eye}>06 — Methode</span>
          <h2 style={pr.h2}>Fünf Schritte,<br />kein Theater.</h2>
          <p style={pr.lead}>
            Unser Delivery-Factory-Prozess. Jede Phase endet mit einem Artefakt, das
            ihr behalten könnt — unabhängig davon, ob wir weitermachen.
          </p>
        </div>

        <div style={pr.track}>
          {steps.map((s, i) => (
            <React.Fragment key={s.n}>
              <div style={pr.step}>
                <div style={pr.num}>{s.n}</div>
                <div style={pr.stepTitle}>{s.t}</div>
                <div style={pr.stepBody}>{s.b}</div>
              </div>
              {i < steps.length - 1 && (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={pr.arrow}>
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </SlideBase>
  );
}

const pr = {
  body: { position: 'absolute', inset: 0, padding: '104px 64px 80px', display: 'flex', flexDirection: 'column' },
  header: { maxWidth: 780, marginBottom: 52 },
  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 0 16px', letterSpacing: '-0.01em' },
  lead: { fontSize: 15, fontWeight: 300, lineHeight: 1.6, color: 'var(--fg-muted)', margin: 0, maxWidth: 720 },

  track: { display: 'flex', alignItems: 'stretch', gap: 12, flex: 1 },
  step: { flex: 1, background: '#fff', border: '1px solid var(--border)', borderRadius: 16, padding: '26px 22px', display: 'flex', flexDirection: 'column' },
  num: { fontSize: 12, fontWeight: 500, color: 'var(--primary)', letterSpacing: '0.1em', marginBottom: 16 },
  stepTitle: { fontSize: 22, fontWeight: 600, color: 'var(--fg)', marginBottom: 10, letterSpacing: '-0.005em' },
  stepBody: { fontSize: 12.5, fontWeight: 300, lineHeight: 1.55, color: 'var(--fg-muted)' },
  arrow: { alignSelf: 'center', flexShrink: 0 },
};

window.ProcessSlide = ProcessSlide;