// AboutHero: bold "Wir sind Goma-IT" intro
const AboutHero = ({ onCTA }) => (
  <section style={{ padding: '120px 24px 96px', background: '#fff' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '6px 12px', borderRadius: 999,
        background: '#FFF6BF', color: '#0A0A0A',
        font: '500 12px Roboto, sans-serif',
        letterSpacing: '0.04em', textTransform: 'uppercase',
        marginBottom: 32,
      }}>
        <span style={{width: 6, height: 6, borderRadius: '50%', background: '#0A0A0A'}}/>
        Über uns
      </div>
      <h1 style={{
        font: '700 88px/1.02 Roboto, sans-serif', letterSpacing: '-0.03em',
        color: '#0A0A0A', margin: '0 0 24px', maxWidth: 1100,
      }}>
        Wir sind Goma-IT.
      </h1>
      <p style={{
        font: '400 28px/1.35 Roboto, sans-serif', letterSpacing: '-0.01em',
        color: '#525252', margin: '0 0 40px', maxWidth: 880,
      }}>
        Die KI-Agentur aus Vorarlberg, die Mittelständler wirklich entlastet.
      </p>
      <button onClick={onCTA} style={{
        height: 52, padding: '0 24px', border: 'none', borderRadius: 8,
        background: '#FFD500', color: '#0A0A0A',
        font: '600 14px Roboto, sans-serif',
        letterSpacing: '0.04em', textTransform: 'uppercase',
        cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 10,
        transition: 'background 200ms cubic-bezier(0.2,0.7,0.2,1)',
      }}
      onMouseEnter={(e)=>e.currentTarget.style.background='#F5C400'}
      onMouseLeave={(e)=>e.currentTarget.style.background='#FFD500'}>
        Kostenlose Analyse
        <Icon name="arrowRight" size={16} stroke={2}/>
      </button>
    </div>
  </section>
);

window.AboutHero = AboutHero;