// WhySection: three-up trust block on dark background
const WhySection = () => {
  const items = [
    { icon: 'shield', t: 'Europäische Infrastruktur.',
      b: 'Unsere KI-Systeme laufen auf Servern in Europa. DSGVO-Konformität und Datenschutz sind bei uns Standard — nicht Aufpreis.' },
    { icon: 'user', t: 'Greifbarer Ansprechpartner.',
      b: 'Kein Callcenter, kein Ticket-System. Jeder Kunde hat einen festen Projektverantwortlichen, der Technik und Business versteht.' },
    { icon: 'target', t: 'Ergebnisse statt Versprechen.',
      b: 'Wir verdienen an monatlichen Betreuungsvereinbarungen — das heißt, wir verdienen nur, wenn unsere Systeme dauerhaft funktionieren.' },
  ];
  return (
    <section style={{ padding: '96px 24px', background: '#0A0A0A', color: '#fff' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <h2 style={{
          font: '700 48px/1.05 Roboto, sans-serif', letterSpacing: '-0.02em',
          margin: '0 0 56px', maxWidth: 720,
        }}>
          Warum Unternehmen im DACH-Raum mit uns arbeiten.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {items.map((it, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{
                width: 48, height: 48, borderRadius: 8, background: '#FFD500',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={it.icon} size={24} stroke={1.6} color="#0A0A0A"/>
              </div>
              <div style={{ font: '600 22px/1.3 Roboto, sans-serif', color: '#fff' }}>{it.t}</div>
              <div style={{ font: '400 15px/1.6 Roboto, sans-serif', color: '#A3A3A3' }}>{it.b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.WhySection = WhySection;