// ContactHero: section header for the contact page
const ContactHero = () => (
  <section style={{ padding: '120px 24px 64px', background: '#fff' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto', maxWidth: 1200 }}>
      <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'}}/>
        Kontakt
      </div>
      <h1 style={{
        font: '700 80px/1.02 Roboto, sans-serif', letterSpacing: '-0.03em',
        color: '#0A0A0A', margin: '0 0 24px', maxWidth: 1100,
      }}>
        Legen wir den Grundstein für Ihre Automatisierung.
      </h1>
      <p style={{
        font: '400 24px/1.4 Roboto, sans-serif', letterSpacing: '-0.005em',
        color: '#525252', margin: 0, maxWidth: 880,
      }}>
        Ob Voice AI, Chatbot oder Prozess-Optimierung — wir finden in 15 Minuten heraus, wie viel
        Zeit und Umsatz Sie aktuell liegen lassen.
      </p>
    </div>
  </section>
);

window.ContactHero = ContactHero;