function Process() {
  const steps = [
    { n: '01', title: 'Du fragst an', body: 'Über das Formular oder per Mail. Innerhalb 48 Stunden bekommst du eine ehrliche Fit-Einschätzung.' },
    { n: '02', title: 'Wir sprechen 30 Minuten', body: 'Ich verstehe dein Ziel und deine Zielgruppe.' },
    { n: '03', title: 'Ich mache dir ein Angebot', body: 'Mit Paket, Kanal-Mix und Timeline.' },
    { n: '04', title: 'Wir bauen die Story', body: 'Briefing, Konzept, finaler Take. Zwei Revisions-Schleifen sind drin.' },
    { n: '05', title: 'Ich bringe sie raus', body: 'Über die Kanäle, die für dein Ziel passen.' },
    { n: '06', title: 'Du bekommst einen Performance-Report', body: 'Mit Zahlen und Empfehlung für den nächsten Schritt.' },
  ];
  return (
    <section style={{ padding: '120px 0', background: '#fff' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }} className="process-grid">
          <div>
            <div className="section-eyebrow" style={{ marginBottom: 24 }}>
              <span className="kicker-line"></span>So arbeiten wir zusammen
            </div>
            <h2 className="section-title" style={{ fontSize: 'clamp(36px, 4.4vw, 52px)' }}>
              Sechs Schritte. <em style={{ color: 'var(--ap-blue)', fontWeight: 500 }}>Kein Bullshit.</em>
            </h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', marginTop: 20 }}>
              Sales-Zyklen im Automotive sind lang. Der Prozess von Anfrage bis Launch ist kurz und klar.
            </p>
            <div style={{ marginTop: 32, padding: '20px 24px', background: 'var(--bg-page)', borderRadius: 8, border: '1px solid var(--border-default)' }}>
              <div className="section-eyebrow" style={{ marginBottom: 6, color: 'var(--ap-blue)' }}>⏱ Timing</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55 }}>
                Anfrage bis Launch: <strong style={{ color: 'var(--fg-1)' }}>typisch 30 Tage</strong>. Eine Thought-Leadership-Story braucht 4 bis 6 Wochen. Partnerships starten zum nächsten Monatsanfang.
              </div>
            </div>
          </div>

          {/* Right: steps with a visual connecting line */}
          <ol className="process-list" style={{ listStyle: 'none', padding: 0, margin: 0, position: 'relative' }}>
            {/* Vertical connecting line behind the step numbers */}
            <span aria-hidden style={{
              position: 'absolute',
              left: 17,
              top: 24,
              bottom: 24,
              width: 2,
              background: 'linear-gradient(to bottom, var(--ap-blue) 0%, var(--ap-pink) 100%)',
              opacity: 0.3,
              borderRadius: 2,
              zIndex: 0,
            }}></span>

            {steps.map((s, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 20, paddingBottom: 24, position: 'relative', zIndex: 1 }}>
                <div style={{
                  width: 36,
                  height: 36,
                  borderRadius: 999,
                  background: '#fff',
                  border: '2px solid var(--ap-blue)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontFamily: 'var(--font-mono)',
                  fontSize: 12,
                  fontWeight: 600,
                  color: 'var(--ap-blue)',
                  flexShrink: 0,
                }}>{s.n}</div>
                <div style={{ paddingTop: 4, paddingBottom: 4 }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.02em', lineHeight: 1.25 }}>{s.title}</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--fg-3)', marginTop: 6 }}>{s.body}</div>
                </div>
              </li>
            ))}

            {/* Terminal arrow */}
            <li style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 20, position: 'relative', zIndex: 1 }}>
              <div style={{ width: 36, display: 'flex', justifyContent: 'center' }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ap-pink)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v16M5 13l7 7 7-7"/></svg>
              </div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', paddingTop: 2 }}>Nächste Kampagne. Oder Partnership.</div>
            </li>
          </ol>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .process-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}
window.Process = Process;