// Hero.jsx — v3: Affensus-style. Headline left, photo card right with floating metric overlay.
function Hero() {
  return (
    <section id="top" className="hero" data-screen-label="01 Hero">
      <div className="hero__card">
        <div className="hero__topbar-rule"></div>

        {/* Decorative lavender brand mark dots */}
        <div className="hero__dot-cluster" aria-hidden="true">
          <span></span><span></span><span></span><span></span><span></span>
        </div>

        <div className="hero__inner">
          <span className="hero__eyebrow">
            <span className="hero__eyebrow-dot"></span>
            Marketing con Ética Médica
          </span>

          <div className="hero__grid">
            {/* LEFT — copy */}
            <div className="hero__col-left">
              <h1 className="hero__headline">
                Más que <em>likes,</em><br/>
                Pacientes<br/>
                <em>Reales<span className="hero__headline-dot">.</span></em>
              </h1>
              <p className="hero__sub">
                Estrategias éticas que llenan tu sala de espera —
                para especialistas que valoran su autoridad médica
                y el tiempo de sus pacientes.
              </p>

              <div className="hero__cta-row">
                <Button variant="primary" size="lg" href="#contacto">
                  Reservar diagnóstico
                </Button>
                <a
                  href="https://wa.link/0veemt"
                  target="_blank"
                  rel="noopener"
                  className="hero__wa-btn"
                  aria-label="Escribir por WhatsApp"
                >
                  <span className="hero__wa-btn-icon"><Icon name="whatsapp" size={20}/></span>
                  <span>WhatsApp directo</span>
                </a>
              </div>

              <div className="hero__id-row">
                <span className="hero__id-avatar hero__id-avatar--solo">
                  <img src="assets/daniela.jpg" alt="" style={{objectPosition:'50% 22%'}}/>
                </span>
                <div className="hero__id-text">
                  <strong>Daniela Cabrera,</strong>
                  <span>Estratega de marketing para médicos especialistas</span>
                </div>
              </div>
            </div>

            {/* RIGHT — clean photo card with floating overlay caption */}
            <div className="hero__col-right">
              <div className="hero__photo-card">
                <img src="assets/daniela.jpg" alt="Daniela Cabrera" className="hero__photo"/>

                {/* Floating logo mark — top-right */}
                <div className="hero__photo-mark" aria-hidden="true">
                  <img src="assets/logo-mark-yellow.png" alt=""/>
                </div>

                {/* Bottom caption pill */}
                <div className="hero__photo-caption">
                  <span className="hero__photo-caption-icon">
                    <Icon name="sparkle" size={14}/>
                  </span>
                  <span>
                    Estrategias que convierten <strong>seguidores</strong> en <strong>pacientes reales</strong> agendados.
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;