// StatsSection: "Goma-IT in Zahlen" on dark background
const StatsSection = () => {
  const stats = [
    { value: '3', unit: 'Sprachregionen', body: 'Aktive Kunden in Österreich, Deutschland und der Schweiz — persönlich vor Ort oder per Videocall.' },
    { value: '24/7', unit: 'Voice-AI im Einsatz', body: 'KI-Telefonie für unsere Kunden, auch nachts und am Wochenende.' },
    { value: '<60', unit: 'Sekunden', body: 'Durchschnittliche Bearbeitungszeit bei KI-gestützter Dokumenten- und E-Mail-Verarbeitung.' },
    { value: '100%', unit: 'EU-Hosting', body: 'Sämtliche KI-Infrastruktur läuft auf Servern in der EU, DSGVO-konform.' },
    { value: '∞', unit: 'Wartung statt Fire-and-Forget', body: 'Jedes System bleibt unter unserer monatlichen Betreuung.' },
  ];

  return (
    <section style={{ padding: '96px 24px', background: '#0A0A0A', color: '#fff' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: 64 }}>
          <div style={{
            font: '500 12px Roboto, sans-serif', letterSpacing: '0.08em',
            textTransform: 'uppercase', color: '#FFD500', marginBottom: 16,
          }}>
            Zahlen
          </div>
          <h2 style={{
            font: '700 56px/1.05 Roboto, sans-serif', letterSpacing: '-0.02em',
            color: '#fff', margin: 0,
          }}>
            Goma-IT in Zahlen.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: '#2E2E2E', border: '1px solid #2E2E2E' }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: '32px 28px', background: '#0A0A0A',
              display: 'flex', flexDirection: 'column', gap: 12,
              minHeight: 200,
            }}>
              <div style={{
                font: '700 64px/1 Roboto, sans-serif', letterSpacing: '-0.03em',
                color: '#FFD500',
              }}>
                {s.value}
              </div>
              <div style={{ font: '600 14px Roboto, sans-serif', color: '#fff' }}>
                {s.unit}
              </div>
              <div style={{ font: '400 14px/1.55 Roboto, sans-serif', color: '#A3A3A3', marginTop: 4 }}>
                {s.body}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.StatsSection = StatsSection;