function Hero() {
  const bullets = [
    { strong: 'Hersteller- & Zulieferer-Strategien:', sub: 'VW, Mercedes, Bosch, BYD, Huawei.' },
    { strong: 'Neue Technologien:',                   sub: 'EV, KI, Software, autonomes Fahren.' },
    { strong: 'China & globale Märkte:',              sub: 'Geopolitik, Kunden, Marktdaten.' },
  ];
  const logos = [
    { src: 'assets/logos/Mercedes-Benz.svg', alt: 'Mercedes-Benz', scale: 1.1  }, // flat negative-space, fills canvas
    { src: 'assets/logos/Bosch.svg',         alt: 'Bosch',         scale: 2.0  }, // square viewBox with whitespace
    { src: 'assets/logos/VW.svg',            alt: 'Volkswagen',    scale: 1.2  }, // VW circle fills ~85% of bbox
    { src: 'assets/logos/BYD.svg',           alt: 'BYD',           scale: 1.0  }, // 2022 wordmark, 4:1 tight
    { src: 'assets/logos/BMW.svg',           alt: 'BMW',           scale: 1.1  }, // flat 2020 rebrand, gradient quadrants
    { src: 'assets/logos/Tesla.svg',         alt: 'Tesla',         scale: 1.0  }, // wide wordmark (7.7:1)
  ];

  return (
    <section className="hero">
      <div className="container hero-grid">
        <div className="hero-left">
          <div className="hero-header">
            <img className="hero-header-avatar" src="assets/philipp-avatar.jpg" alt="Philipp Raasch" />
            <div className="hero-header-stack">
              <div className="hero-header-name">Philipp Raasch</div>
              <div className="hero-header-byline">Der Autopreneur · 10 Jahre Mercedes-Benz</div>
            </div>
          </div>
          <h1 className="hero-title">
            Was in der Autoindustrie <em>wirklich</em> passiert.
          </h1>
          <p className="hero-subheadline">
            Eine E-Mail. Jeden Sonntag. In 5 Minuten gelesen.
          </p>
          <ul className="hero-bullets">
            {bullets.map((b, i) => (
              <li key={i}>
                <strong>{b.strong}</strong> {b.sub}
              </li>
            ))}
          </ul>
          <div className="hero-cta-wrap">
            <SubscribeForm source="lp_hero" />
          </div>
          <ul className="hero-trust-bar">
            <li>Sonntag, 7:00 Uhr</li>
            <li>Kein Spam</li>
            <li>Jederzeit kündbar</li>
          </ul>
          <div className="hero-social-proof">
            <span className="hero-social-proof-tagline">40.000+ Leser aus der Autoindustrie</span>
            <div className="hero-social-proof-logos">
              {logos.map((l) => (
                <div key={l.alt} className="hero-social-proof-tile">
                  <img src={l.src} alt={l.alt} loading="lazy" style={{ transform: `scale(${l.scale})` }} />
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="hero-right">
          <PhoneMockup />
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;