// Telemedicina — dark banner with stock photo panel, CTA
const Telemedicina = ({ onBookClick }) => {
  return (
    <section className="section telebanner" id="telemedicina">
      <div className="container">
        <div className="telebanner__grid">
          <div>
            <span className="eyebrow-mark">Telemedicina · 24 / 7</span>
            <h2>Tu médico, donde tú estés.</h2>
            <p>
              Agenda una videoconsulta en minutos. Recetas digitales, exámenes y
              seguimiento — todo desde tu teléfono. Sin sala de espera.
            </p>
            <div style={{display: "flex", gap: 14, flexWrap: "wrap"}}>
              <button className="btn btn-on-dark btn-lg" onClick={onBookClick}>
                Iniciar consulta <span aria-hidden="true">→</span>
              </button>
              <a href="#" className="btn btn-ghost btn-lg" style={{color: "var(--sa-green-light)"}}>
                Cómo funciona
              </a>
            </div>
          </div>
          <div className="telebanner__visual">
            <div className="telebanner__visual-inner">
              <img
                className="telebanner__photo"
                src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1400&q=80"
                alt="Médica atendiendo una videoconsulta desde su laptop"
              />
              <span className="telebanner__photo-tag">
                <span className="dot"></span>
                En línea ahora
              </span>
            </div>
            <img src="../../assets/sello-1.png" className="telebanner__visual-sello" alt="" aria-hidden="true" />
          </div>
        </div>
      </div>
    </section>
  );
};

window.Telemedicina = Telemedicina;