function Hero({ whatsappLink, onWhatsApp }) {
  return (
    <section className="hero" id="topo">
      <div className="hero__inner">
        <div className="hero__text">
          <div className="hero__eyebrow">MÉTODO 8BAC · ESTRUTURA DIGITAL</div>
          <h1 className="hero__headline">
            Tráfego pago<br/>
            <span style={{ color: 'var(--bac-blue)' }}>não vende.</span><br/>
            <span style={{ color: 'var(--bac-navy)' }}>Estrutura vende.</span>
          </h1>
          <p className="hero__sub">
            Antes de queimar verba com ads, eu organizo o seu bastidor digital:
            perfil, funil e atendimento. Aí sim o tráfego pago vira faturamento —
            não só fluxo passando pelo seu Instagram.
          </p>
          <div className="hero__cta-row">
            <a href="#" className="btn-primary" onClick={e => { e.preventDefault(); onWhatsApp(); }}>
              <i data-lucide="message-circle"></i>
              Quero o diagnóstico gratuito
            </a>
            <a href="#metodo" className="btn-ghost">Como funciona →</a>
          </div>
          <div className="hero__trust">
            <span className="hero__dot"></span>
            DIAGNÓSTICO GRATUITO · SEM COMPROMISSO
          </div>
        </div>

        <div className="hero__portrait-wrap">
          <img src="assets/founder-portrait.png" alt="Fundador 8BAC" className="hero__portrait"/>
          <div className="hero__tag">NO DIGITAL DESDE 2017</div>
        </div>
      </div>

      <style>{`
        .hero { background: #fff; }
        .hero__inner {
          max-width: 1200px; margin: 0 auto;
          padding: 48px 20px 64px;
          display: flex; flex-direction: column; gap: 40px;
        }
        .hero__eyebrow {
          font-family: var(--font-mono); font-size: 11px; font-weight: 700;
          letter-spacing: 0.08em; text-transform: uppercase;
          color: var(--bac-blue); margin-bottom: 18px;
        }
        .hero__headline {
          font-family: var(--font-display); font-weight: 900;
          font-size: clamp(42px, 10vw, 84px); line-height: 1.02;
          letter-spacing: -0.03em; color: var(--ink-1); margin: 0;
        }
        .hero__sub {
          font-family: var(--font-sans); font-size: 17px; line-height: 1.55;
          color: var(--ink-3); margin: 22px 0 0 0;
        }
        .hero__cta-row {
          display: flex; flex-direction: column; gap: 12px; margin-top: 32px;
        }
        .btn-primary {
          display: inline-flex; align-items: center; justify-content: center; gap: 10px;
          background: var(--bac-blue); color: #fff;
          font-family: var(--font-sans); font-weight: 600; font-size: 16px;
          padding: 16px 24px; border-radius: 10px; text-decoration: none;
          transition: background .14s var(--ease-out);
        }
        .btn-primary i { width: 18px; height: 18px; flex-shrink: 0; }
        .btn-primary:hover { background: var(--bac-blue-700); }
        .btn-ghost {
          display: inline-flex; align-items: center; justify-content: center;
          font-family: var(--font-sans); font-size: 16px; font-weight: 600;
          color: var(--ink-1); text-decoration: none; padding: 14px 8px;
        }
        .btn-ghost:hover { color: var(--bac-blue); }
        .hero__trust {
          font-family: var(--font-mono); font-size: 11px; font-weight: 600;
          letter-spacing: 0.04em; color: var(--ink-3); margin-top: 20px;
          display: flex; align-items: center; gap: 8px;
        }
        .hero__dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--success); flex-shrink: 0;
        }
        .hero__portrait-wrap { position: relative; }
        .hero__portrait {
          width: 100%; max-width: 100%; aspect-ratio: 1 / 1;
          border-radius: 16px; object-fit: cover; display: block;
          box-shadow: var(--sh-3);
        }
        .hero__tag {
          position: absolute; bottom: -14px; left: -10px;
          background: var(--bac-navy); color: #fff;
          padding: 12px 16px; border-radius: 10px;
          font-family: var(--font-mono); font-size: 11px; font-weight: 600;
          letter-spacing: 0.04em; box-shadow: var(--sh-2);
        }
        @media (min-width: 600px) {
          .hero__cta-row { flex-direction: row; align-items: center; }
        }
        @media (min-width: 860px) {
          .hero__inner {
            flex-direction: row; align-items: center;
            padding: clamp(64px, 7vw, 88px) 24px 80px;
            gap: clamp(40px, 6vw, 72px);
          }
          .hero__text { flex: 1.25; min-width: 0; }
          .hero__portrait-wrap { flex: 1; min-width: 0; }
          .hero__sub { font-size: 18px; max-width: 540px; }
          .hero__eyebrow { font-size: 12px; }
          .hero__trust { font-size: 12px; }
          .hero__tag { font-size: 12px; padding: 14px 18px; bottom: -16px; left: -16px; }
        }
      `}</style>
    </section>
  );
}