// ═══════════════════════════════════════════════════════════════════
// src/sections/Hero.jsx
// Above-the-fold hero: headline, CTA, trust stats, art panel.
// ═══════════════════════════════════════════════════════════════════

function Hero({ heroVariant }) {
  return (
    <section id="top" className="hero">
      <div className="container">
        <div className="hero-grid">

          {/* ── Copy column ── */}
          <div>
            <div className="eyebrow hero-eyebrow reveal">Odontologia premium · São Paulo</div>

            <h1 className="display reveal d1">
              Sorrisos cuidados <em>com</em> arte<br/>e ciência.
            </h1>

            <p className="lede reveal d2">
              Tratamentos odontológicos personalizados, com tecnologia de ponta e o
              acolhimento que você merece — a um preço que cabe no seu plano.
            </p>

            <div className="hero-cta reveal d3">
              <a href={CONTACT.waLink} className="btn btn-primary"
                 target="_blank" rel="noopener noreferrer">
                <Icon.whatsapp className="wa-icon"/>
                Pedir orçamento no WhatsApp
              </a>
              <a href="#servicos" className="btn btn-ghost">
                Conhecer tratamentos <Icon.arrow className="arrow"/>
              </a>
            </div>

            <div className="hero-trust reveal d4">
              <div className="stat">
                <span className="num">12+</span>
                <div className="lbl">Anos de mercado</div>
              </div>
              <div className="stat">
                <span className="num">8.400</span>
                <div className="lbl">Pacientes atendidos</div>
              </div>
              <div className="stat">
                <span className="num">4,9★</span>
                <div className="lbl">Avaliação Google</div>
              </div>
            </div>
          </div>

          {/* ── Art column ── */}
          <div className="hero-art reveal d2">
            <HeroArt variant={heroVariant}/>
            <Photo
              src={PHOTOS.hero}
              alt="Paciente sorrindo após tratamento na OdontoPro"
              className="hero-photo"
            />
            <div className="hero-badge tl">
              <div className="ico">✓</div>
              <div>
                <h4>Avaliação gratuita</h4>
                <p>Plano de tratamento sem compromisso</p>
              </div>
            </div>
            <div className="hero-badge br">
              <div className="ico">★</div>
              <div>
                <h4>4,9 de 5 no Google</h4>
                <p>com mais de 600 avaliações</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}