/* eslint-disable */
const WhatIsCycle = () => (
  <section id="was-ist" style={{
    background: 'var(--bone-2)',
    borderTop: '1px solid var(--rule)',
    borderBottom: '1px solid var(--rule)',
    padding: 'var(--s-9) 0',
  }}>
    <div style={{
      maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)',
      display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'var(--s-8)',
      alignItems: 'start',
    }}>
      <div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em',
          textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 'var(--s-6)',
        }}>
          <span style={{ width: 24, height: 2, background: 'var(--ink)' }} />
          <span>Definition</span>
        </div>
        <h2 style={{
          fontSize: 'clamp(36px, 4vw, 64px)', lineHeight: 1.04,
          letterSpacing: '-0.022em', fontWeight: 600,
          maxWidth: '14ch', margin: 0,
        }}>
          Was ist der <span style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontWeight: 400, color: 'var(--ocher)',
          }}>AI-Cycle?</span>
        </h2>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-6)' }}>
        <p style={{ fontSize: 22, lineHeight: 1.4, color: 'var(--ink)', maxWidth: '46ch', margin: 0, fontWeight: 500 }}>
          Eine Partnerschaft, die KI in eurem Unternehmen verankert — und sie dort hält,
          wenn sich die Technologie weiterentwickelt.
        </p>

        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 12,
          textTransform: 'uppercase', letterSpacing: '0.08em',
        }}>
          {['Kein Workshop', 'Kein Pilotprojekt', 'Kein Produkt'].map(t => (
            <span key={t} style={{
              padding: '6px 12px', border: '1px solid var(--rule-strong)',
              color: 'var(--ink-2)', textDecoration: 'line-through',
              textDecorationColor: 'var(--ocher)', textDecorationThickness: '1.5px',
            }}>{t}</span>
          ))}
        </div>

        <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: '52ch', margin: 0 }}>
          Der AI-Cycle ist ein laufender Zyklus aus <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>Verstehen,
          Befähigen, Bauen</strong> und <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>Dranbleiben</strong>.
          Er beginnt mit zwölf Monaten Aufbauarbeit — und dreht sich danach mit euch weiter,
          in der Geschwindigkeit, die zur Technologie passt.
        </p>

        <blockquote style={{
          margin: 'var(--s-4) 0 0 0',
          paddingLeft: 'var(--s-5)',
          borderLeft: '2px solid var(--ocher)',
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontSize: 22, lineHeight: 1.35, color: 'var(--ink)',
          maxWidth: '40ch',
        }}>
          «Wir machen aus dem Hype echtes Handwerk — und sorgen dafür, dass das
          Handwerk nicht morgen schon veraltet ist.»
        </blockquote>
      </div>
    </div>
  </section>
);
window.WhatIsCycle = WhatIsCycle;