/* eslint-disable */
const Versprechen = () => (
  <section id="versprechen" style={{
    maxWidth: 'var(--container)', margin: '0 auto',
    padding: 'var(--s-10) var(--gutter)',
  }}>
    <div style={{
      display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'var(--s-8)',
      alignItems: 'start',
    }}>
      <div style={{ position: 'sticky', top: 100 }}>
        <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>Unser Versprechen</span>
        </div>
        <h2 style={{
          fontSize: 'clamp(36px, 4vw, 64px)', lineHeight: 1.04,
          letterSpacing: '-0.022em', fontWeight: 600,
          maxWidth: '12ch', margin: 0, textWrap: 'balance',
        }}>
          Handwerk in eurem Team. <span style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontWeight: 400, color: 'var(--ocher)',
          }}>Vorsprung mit uns.</span>
        </h2>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-6)' }}>
        <p style={{
          fontSize: 19, lineHeight: 1.55, color: 'var(--ink)',
          margin: 0, maxWidth: '52ch', fontWeight: 500,
        }}>
          Wir bauen keine KI-Lösungen, von denen ihr abhängig werdet. Wir bauen die
          Fähigkeit in euer Team ein — Schritt für Schritt, mit euren Leuten, in eurem Tempo.
          Eure Champions machen das tägliche KI-Handwerk. Eure Prozesse werden zu Routine.
        </p>

        <div style={{ height: 1, background: 'var(--rule)' }} />

        <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, maxWidth: '52ch' }}>
          Aber die Technologie steht nicht still. Was heute State of the Art ist, ist in
          sechs Monaten Standard und in zwölf Monaten überholt. Niemand — auch nicht euer
          bestes internes Team — kann nebenbei am Puls einer Industrie bleiben, die sich
          wöchentlich neu erfindet.
        </p>

        <div style={{ height: 1, background: 'var(--rule)' }} />

        <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, maxWidth: '52ch' }}>
          Genau deshalb endet der Cycle nicht. Wir bleiben euer Vorsprung:{' '}
          <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>scannen, filtern, übersetzen.</strong>{' '}
          Wir tragen die nächste Welle in euer Haus, bevor sie zur Aufholjagd wird.
        </p>

        <div style={{ height: 1, background: 'var(--rule)' }} />

        <p style={{
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontSize: 22, lineHeight: 1.4, color: 'var(--ink)',
          margin: 0, maxWidth: '46ch',
        }}>
          Das ist ehrlicher als das übliche «wir machen euch unabhängig». Es ist auch das,
          was tatsächlich funktioniert.
        </p>
      </div>
    </div>
  </section>
);
window.Versprechen = Versprechen;