function ReachStats() {
  const channels = [
    { big: '60.000+', lbl: 'folgen auf LinkedIn' },
    { big: '40.000+', lbl: 'lesen den Newsletter' },
    { big: '10.000+', lbl: 'auf YouTube' },
  ];
  const oems = [
    { src: 'assets/logos/Mercedes-Benz.svg', alt: 'Mercedes-Benz' },
    { src: 'assets/logos/Bosch.svg', alt: 'Bosch' },
    { src: 'assets/logos/VW.svg', alt: 'Volkswagen' },
    { src: 'assets/logos/BYD.svg', alt: 'BYD' },
    { src: 'assets/logos/BMW.svg', alt: 'BMW' },
    { src: 'assets/logos/Tesla.svg', alt: 'Tesla' },
  ];
  return (
    <section className="section reach" id="reichweite">
      <div className="container-narrow">
        <div className="section-eyebrow"><span className="kicker-line"></span>Reichweite</div>
        <h2 className="section-title">Wer Philipp liest</h2>
        <div className="reach-headline">
          <span className="reach-headline-big">100.000+</span>
          <span className="reach-headline-lbl">Entscheider und Praktiker der Autoindustrie folgen ihm über alle Kanäle.</span>
        </div>
        <div className="reach-row">
          {channels.map((s, i) => (
            <div key={i} className="reach-stat">
              <span className="reach-stat-big">{s.big}</span>
              <span className="reach-stat-lbl">{s.lbl}</span>
            </div>
          ))}
        </div>
        <div className="reach-logos">
          <span className="reach-logos-label">Gelesen von Entscheidern bei</span>
          <div className="reach-logos-row">
            {oems.map((l) => (
              <div key={l.alt} className="reach-logo-tile reach-logo-oem"><img src={l.src} alt={l.alt} loading="lazy" /></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.ReachStats = ReachStats;