function Hero() {
  return (
    <section className="hero" style={{ padding: '88px 0 96px', background: '#fff', position: 'relative', overflow: 'hidden' }}>
      {/* Top half — headline + portrait */}
      <div className="container hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <div className="section-eyebrow" style={{ marginBottom: 28 }}>
            <span className="kicker-line"></span>Partnerships · Der Autopreneur
          </div>
          <h1 className="hero-title section-title" style={{ fontSize: 'clamp(40px, 5.6vw, 76px)', fontWeight: 700, lineHeight: 1.02 }}>
            Du verkaufst an Automotive-Entscheider.<br />
            <span style={{ color: 'var(--ap-blue)', fontStyle: 'italic', fontWeight: 500 }}>Ich kenne sie</span><br />
            und sie hören mir zu.
          </h1>
          <p className="hero-lead" style={{ fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.55, color: 'var(--fg-2)', marginTop: 32, maxWidth: 580 }}>
            90.000+ Automotive-Professionals folgen mir. Ich finde die Story hinter deinem Angebot und bringe sie direkt vor C-Level, VPs und Bereichsleiter. Und weil sie mir vertrauen, hören sie auch dir zu.
          </p>

          <div className="hero-cta" style={{ display: 'flex', alignItems: 'center', gap: 24, marginTop: 40, flexWrap: 'wrap' }}>
            <a href="#kontakt" className="btn btn-primary btn-lg" style={{ whiteSpace: 'nowrap' }}>Fit-Check anfragen <span style={{ fontSize: 18 }}>→</span></a>
            <a href="#pakete" style={{ fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg-2)', textDecoration: 'none', fontWeight: 500, borderBottom: '1px solid var(--fg-2)', paddingBottom: 2, whiteSpace: 'nowrap' }}>
              Oder Pakete ansehen
            </a>
          </div>
        </div>

        {/* Right: Portrait — top-aligned with headline. ONE proof card, off-face. */}
        <div className="hero-portrait" style={{ position: 'relative', paddingTop: 28 }}>
          <div style={{ aspectRatio: '4/5', borderRadius: 12, overflow: 'hidden', background: 'var(--ap-gradient)', boxShadow: '0 24px 60px rgba(17,1,150,0.18)' }}>
            <img src="assets/philipp.png" alt="Philipp Raasch" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>

          {/* Quote card — sits BELOW the portrait, offset right, doesn't cover the face. */}
          <div className="card hero-quote" style={{ marginTop: -36, marginLeft: 40, marginRight: -32, position: 'relative', zIndex: 2, padding: '22px 26px', boxShadow: 'var(--shadow-lg)', background: '#fff' }}>
            <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 17, lineHeight: 1.45, color: 'var(--fg-1)' }}>
              „Philipp kombiniert OEM-Insider-Wissen mit echter globaler Perspektive."
            </div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)', marginTop: 12, fontWeight: 500 }}>
              Mathias Vaitl · CEO Mercedes-Benz Korea
            </div>
          </div>
        </div>
      </div>

      {/* Bottom: full-width channel proof-strip — BAM-level stats, minimal copy */}
      <div className="container" style={{ marginTop: 80 }}>
        <div className="hero-meta" style={{ paddingTop: 32, borderTop: '1px solid var(--border-default)' }} data-comment-anchor="dd3057bf3f-div-47-9">
          {[
          { icon: <ChannelIcon name="mail" />, n: '40k', l: 'Newsletter-Abonnenten' },
          { icon: <ChannelIcon name="linkedin" />, n: '60k+', l: 'LinkedIn-Follower' },
          { icon: <ChannelIcon name="podcast" />, n: '10k', l: 'Podcast-Downloads / Monat' },
          { icon: <ChannelIcon name="youtube" />, n: '250k+', l: 'YouTube-Views / Monat' }].
          map((it, i) =>
          <div key={it.l} className="hero-meta-item" style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 16
          }}>
              <div style={{
              color: 'var(--ap-blue)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-start'
            }}>{it.icon}</div>
              <div style={{
              fontFamily: 'var(--font-serif)',
              fontSize: 'clamp(56px, 6.8vw, 84px)',
              fontWeight: 500,
              color: 'var(--fg-1)',
              letterSpacing: '-0.04em',
              lineHeight: 0.95,
              position: 'relative'
            }}>
                {it.n}
                <span style={{
                display: 'block',
                width: 36,
                height: 3,
                background: 'var(--ap-blue)',
                borderRadius: 2,
                marginTop: 14
              }}></span>
              </div>
              <div style={{
              fontFamily: 'var(--font-sans)',
              fontSize: 14,
              fontWeight: 600,
              color: 'var(--fg-1)',
              letterSpacing: '0.01em',
              lineHeight: 1.35
            }}>{it.l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* Monoline SVG channel icons — all 20×20, same stroke weight, same family */
function ChannelIcon({ name }) {
  const props = { width: 30, height: 30, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'mail') {
    return (
      <svg {...props}>
        <rect x="3" y="5" width="18" height="14" rx="2" />
        <path d="M3 7l9 6 9-6" />
      </svg>);

  }
  if (name === 'linkedin') {
    return (
      <svg {...props}>
        <rect x="3" y="3" width="18" height="18" rx="2" />
        <path d="M8 10v7" />
        <circle cx="8" cy="7.2" r="0.9" fill="currentColor" stroke="none" />
        <path d="M12 17v-4.5c0-1.4 1-2.5 2.4-2.5s2.6 1 2.6 2.5V17" />
      </svg>);

  }
  if (name === 'podcast') {
    return (
      <svg {...props}>
        <path d="M5 13a7 7 0 0 1 14 0" />
        <rect x="4" y="13" width="4" height="7" rx="1.5" />
        <rect x="16" y="13" width="4" height="7" rx="1.5" />
      </svg>);

  }
  if (name === 'youtube') {
    return (
      <svg {...props}>
        <rect x="2.5" y="5" width="19" height="14" rx="3" />
        <path d="M10.5 9.5v5l4.5-2.5z" fill="currentColor" stroke="none" />
      </svg>);

  }
  return null;
}

window.Hero = Hero;