/* eslint-disable */
const PHASES = [
  {
    n: '01', name: 'Kick-Off',
    eyebrow: 'Ebene 1 — Sinn & Strategie',
    sub: 'Sinn & Strategie',
    body: 'Wir zwingen die Geschäftsleitung zur strategischen Abstimmung: verbindliche Ziele, Budgets und ethische Leitplanken — bevor eine Zeile Code geschrieben wird.',
    tool: 'Strategisches Alignment',
  },
  {
    n: '02', name: 'Foundation',
    eyebrow: 'Ebene 2 — Kulturelle Integration',
    sub: 'Gemeinsames Fundament',
    body: 'Mit einem Assessment und Einstiegskursen legen wir ein gemeinsames Fundament. Wir bauen Berührungsängste ab und befähigen alle Mitarbeitenden — vom Management bis zur Werkstatt.',
    tool: 'Reifegrad-Assessment',
  },
  {
    n: '03', name: 'Focus',
    eyebrow: 'Ebene 3 — Wertschöpfung',
    sub: 'Pain Points',
    body: 'In abteilungsübergreifenden Workshops identifizieren wir echte Pain Points — zeitfressende, fehleranfällige Aufgaben — und sammeln sie auf einem Themenparkplatz.',
    tool: 'Themenparkplatz',
  },
  {
    n: '04', name: 'Build',
    eyebrow: 'Lab-Ansatz · Iteratives Bauen',
    sub: 'Lab-Ansatz',
    body: 'Ideen werden nicht blindlings umgesetzt: Wir priorisieren per Impact-vs-Effort-Matrix und testen in Sandbox bzw. Shadow Mode — bevor etwas produktiv geht.',
    tool: 'Impact × Effort',
  },
  {
    n: '05', name: 'Pulse',
    eyebrow: 'AI Champions · Multiplikatoren',
    sub: 'Kontinuität',
    body: 'Unser AI-Champions-Programm etabliert interne Multiplikatoren. Sie treiben den Innovationszyklus selbstständig weiter und halten die Feedback-Loops lebendig — auch lange nach dem Projektende.',
    tool: 'Champions-Programm',
  },
];

const CycleSection = () =>
<section id="cycle" style={{
  background: 'var(--ink)', color: 'var(--bone)',
  padding: 'var(--s-9) 0'
}}>
    <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: 'var(--ocher)', marginBottom: 'var(--s-6)'
      }}>
        <span style={{ width: 24, height: 2, background: 'var(--ocher)' }} />
        <span>So läuft's ab · Methodik</span>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'var(--s-7)',
        alignItems: 'end', marginBottom: 'var(--s-8)'
      }}>
        <h2 style={{
          fontSize: 'clamp(36px, 4vw, 64px)', lineHeight: 1.04,
          letterSpacing: '-0.022em', fontWeight: 600, color: 'var(--bone)',
          maxWidth: '14ch', margin: 0, textWrap: 'balance'
        }}>
          Ein Zyklus, <span style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontWeight: 400, color: 'var(--ocher)'
          }}>der nicht endet.</span>
        </h2>
        <p style={{
          fontSize: 17, lineHeight: 1.55,
          color: 'rgba(242,238,229,0.7)', maxWidth: '46ch', margin: 0
        }}>
          Der AI-Cycle durchläuft fünf Phasen, welche die drei Verantwortungsebenen — Sinn & Strategie,
          kulturelle Integration und Wertschöpfung — operationalisieren. Phase 5 ist kein Endpunkt,
          sondern der Loop, der den Zyklus am Leben hält.
        </p>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
        gap: 0, borderTop: '1px solid rgba(242,238,229,0.18)'
      }}>
        {PHASES.map((p, i) =>
        <div key={p.n} style={{
          padding: 'var(--s-6) var(--s-5) var(--s-7)',
          borderRight: i < PHASES.length - 1 ? '1px solid rgba(242,238,229,0.18)' : 'none',
          paddingLeft: i === 0 ? 0 : 'var(--s-5)',
          paddingRight: i === PHASES.length - 1 ? 0 : 'var(--s-5)',
          position: 'relative',
          display: 'flex', flexDirection: 'column'
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em',
            textTransform: 'uppercase', color: 'var(--ocher)', marginBottom: 'var(--s-5)'
          }}>{i === 4 ? 'Phase ∞' : `Phase ${p.n}`}</div>

          <h3 style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontSize: 30, fontWeight: 400, letterSpacing: '-0.012em',
            color: 'var(--bone)', margin: '0 0 6px 0', lineHeight: 1.05,
          }}>{p.name}</h3>

          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--ocher)',
            marginBottom: 'var(--s-4)', lineHeight: 1.4,
          }}>{p.eyebrow}</div>

          <p style={{
            fontSize: 14, lineHeight: 1.55, color: 'rgba(242,238,229,0.72)',
            margin: '0 0 var(--s-5) 0', maxWidth: '32ch'
          }}>{p.body}</p>

          <div style={{
            marginTop: 'auto', paddingTop: 'var(--s-4)',
            borderTop: '1px solid rgba(242,238,229,0.18)',
            fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.06em',
            textTransform: 'uppercase', color: 'rgba(242,238,229,0.85)',
          }}>
            <span style={{ color: 'rgba(242,238,229,0.4)' }}>Werkzeug · </span>{p.tool}
          </div>
        </div>
        )}
      </div>

      {/* Cycle visual indicator */}
      <div style={{
        marginTop: 'var(--s-7)',
        display: 'flex', alignItems: 'center', gap: 'var(--s-4)',
        fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
        textTransform: 'uppercase', color: 'rgba(242,238,229,0.5)'
      }}>
        <span>01</span>
        <span style={{ flex: 1, height: 1, background: 'rgba(242,238,229,0.18)' }} />
        <span>02</span>
        <span style={{ flex: 1, height: 1, background: 'rgba(242,238,229,0.18)' }} />
        <span>03</span>
        <span style={{ flex: 1, height: 1, background: 'rgba(242,238,229,0.18)' }} />
        <span>04</span>
        <span style={{ flex: 1, height: 1, background: 'rgba(242,238,229,0.18)' }} />
        <span style={{ color: 'var(--ocher)' }}>05 ↻ Loop</span>
      </div>
    </div>
  </section>;

window.CycleSection = CycleSection;