// Hero — headline, lede, primary CTA, image panel with gradient + sello, stats row
const Hero = ({ onBookClick }) => {
  return (
    <section className="hero">
      <img src="../../assets/halftone-2.png" className="hero__halftone" alt="" aria-hidden="true" />
      <img src="../../assets/iso-saludaware-original.png" className="hero__iso-watermark" alt="" aria-hidden="true" />

      <div className="container">
        <div className="hero__grid">
          <div>
            <span className="eyebrow-mark">Medical Clinic · Puerto Rico</span>
            <h1 className="hero__title">
              ¡Tu salud<br/>es <em>nuestro<br/>propósito!</em>
            </h1>
            <p className="hero__lede">
              Medicina preventiva, de precisión, predictiva, personalizada y participativa.
              Estamos contigo, para que puedas vivir plena y libremente.
            </p>
            <div className="hero__cta-row">
              <button className="btn btn-primary btn-lg" onClick={onBookClick}>
                Agenda tu cita <span aria-hidden="true">→</span>
              </button>
              <a href="#telemedicina" className="btn btn-ghost btn-lg">
                <img src="../../assets/icons/icon-telemedicine.png" style={{width:20, height:20, filter: "brightness(0) saturate(100%) invert(31%) sepia(15%) saturate(1428%) hue-rotate(125deg) brightness(94%) contrast(86%)"}} alt="" />
                Telemedicina
              </a>
            </div>
          </div>

          <div className="hero__visual">
            <img src="../../assets/sello-2.png" className="hero__visual-sello" alt="" />
            <div className="hero__visual-sub">Donde todo comienza</div>
            <div className="hero__visual-caption">
              Conciencia sobre la salud y el bienestar.
            </div>
          </div>
        </div>

        <div className="hero__stats">
          <div className="hero__stat">
            <div className="hero__stat-num">+12</div>
            <div className="hero__stat-lbl">Años cuidando pacientes en San Juan</div>
          </div>
          <div className="hero__stat">
            <div className="hero__stat-num">24/7</div>
            <div className="hero__stat-lbl">Telemedicina disponible cuando la necesites</div>
          </div>
          <div className="hero__stat">
            <div className="hero__stat-num">8</div>
            <div className="hero__stat-lbl">Especialidades bajo un mismo techo</div>
          </div>
          <div className="hero__stat">
            <div className="hero__stat-num">96%</div>
            <div className="hero__stat-lbl">De pacientes nos recomiendan</div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;