/* eslint-disable */
const Hero = () => (
  <section id="top" style={{
    maxWidth: 'var(--container)', margin: '0 auto',
    padding: 'var(--s-9) var(--gutter) var(--s-8)',
  }}>
    <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-7)',
    }}>
      <span style={{ width: 24, height: 2, background: 'var(--ink)' }} />
      <span>Werkstatt für KI in Schweizer KMU</span>
    </div>

    <h1 className="display" style={{
      maxWidth: '14ch', margin: 0,
    }}>
      Die meisten machen <span style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontWeight: 400, color: 'var(--ink-3)', letterSpacing: '-0.01em',
      }}>KI-Theater.</span><br />
      Ihr macht <span style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontWeight: 400, color: 'var(--ocher)', letterSpacing: '-0.01em',
      }}>KI-Handwerk.</span>
    </h1>

    <div style={{
      marginTop: 'var(--s-7)',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--s-7)',
      alignItems: 'start',
    }}>
      <p style={{
        fontSize: 22, lineHeight: 1.4, color: 'var(--fg-2)', maxWidth: '40ch',
        margin: 0,
      }}>
        Der AI-Cycle ist eine Partnerschaft, die KI als echte Fähigkeit in eurem Team
        verankert — und euch dauerhaft am Vorsprung der Entwicklung hält.
      </p>
      <p style={{
        fontSize: 18, lineHeight: 1.5, color: 'var(--fg-3)', maxWidth: '36ch',
        margin: 0,
      }}>
        Eure Leute machen die Arbeit. Wir halten den Kurs.
      </p>
    </div>

    {/* Mini bullets */}
    <div style={{
      marginTop: 'var(--s-7)',
      display: 'flex', flexWrap: 'wrap', gap: 'var(--s-5)',
      borderTop: '1px solid var(--rule)',
      paddingTop: 'var(--s-5)',
      fontFamily: 'var(--font-mono)', fontSize: 12,
      letterSpacing: '0.06em', textTransform: 'uppercase',
      color: 'var(--fg-3)',
    }}>
      {[
        '12 Monate Aufbau',
        'Champions im eigenen Haus',
        'Fortlaufend am Puls der Technologie',
        'Limitiert auf 10 Mandate / Jahr',
      ].map((item, i, arr) => (
        <React.Fragment key={item}>
          <span>{item}</span>
          {i < arr.length - 1 && <span style={{ color: 'var(--ink-4)' }}>·</span>}
        </React.Fragment>
      ))}
    </div>

    <div style={{ marginTop: 'var(--s-7)', display: 'flex', gap: 12 }}>
      <a href="#kontakt" style={{
        padding: '14px 22px', background: 'var(--ink)', color: 'var(--bone)',
        textDecoration: 'none', fontSize: 15, fontWeight: 500, borderRadius: 2,
        whiteSpace: 'nowrap',
        transition: 'background .2s cubic-bezier(.2,0,0,1)',
      }}
      onMouseOver={e => e.currentTarget.style.background = 'var(--ocher)'}
      onMouseOut={e => e.currentTarget.style.background = 'var(--ink)'}>
        Unverbindliches Gespräch buchen →
      </a>
      <a href="#cycle" style={{
        padding: '14px 22px', background: 'transparent', color: 'var(--ink)',
        textDecoration: 'none', fontSize: 15, fontWeight: 500, borderRadius: 2,
        border: '1px solid var(--ink)',
        whiteSpace: 'nowrap',
        transition: 'all .2s cubic-bezier(.2,0,0,1)',
      }}
      onMouseOver={e => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.color = 'var(--bone)'; }}
      onMouseOut={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink)'; }}>
        Wie der Cycle läuft
      </a>
    </div>
  </section>
);
window.Hero = Hero;