// CTASection: full-bleed yellow band with the 60-second analysis call to action
const CTASection = ({ onCTA }) => (
  <section style={{ padding: '96px 24px', background: '#FFD500' }}>
    <div style={{
      maxWidth: 1200, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center',
    }}>
      <div>
        <div style={{
          font: '500 12px Roboto, sans-serif', letterSpacing: '0.08em',
          textTransform: 'uppercase', color: '#0A0A0A', marginBottom: 16,
        }}>
          60-Sekunden-Analyse
        </div>
        <h2 style={{
          font: '700 56px/1.05 Roboto, sans-serif', letterSpacing: '-0.02em',
          color: '#0A0A0A', margin: '0 0 16px',
        }}>
          Starten Sie jetzt mit KI-Automatisierung.
        </h2>
        <p style={{
          font: '400 18px/1.6 Roboto, sans-serif', color: '#0A0A0A', margin: 0, maxWidth: 560,
        }}>
          Finden Sie in 60 Sekunden heraus, welche Prozesse in Ihrem Unternehmen automatisiert
          werden können — kostenlos und unverbindlich.
        </p>
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <button onClick={onCTA} style={{
          height: 56, padding: '0 28px', border: 'none', borderRadius: 8,
          background: '#0A0A0A', color: '#fff',
          font: '600 16px Roboto, sans-serif', cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 10,
          transition: 'background 200ms',
        }}
        onMouseEnter={(e)=>e.currentTarget.style.background='#2E2E2E'}
        onMouseLeave={(e)=>e.currentTarget.style.background='#0A0A0A'}>
          Jetzt 60-Sekunden-Check machen
          <Icon name="arrowRight" size={18} stroke={2}/>
        </button>
      </div>
    </div>
  </section>
);

window.CTASection = CTASection;