/* global React */
function Hero({ mode, onPrimary, onContact }) {
  if (mode === 'b2b') {
    return (
      <section className="acmp-hero">
        <div>
          <div className="eyebrow" style={{marginBottom:14}}>EMPRESAS · IN-COMPANY</div>
          <h1>Que tu equipo comunique con <span className="kw">propósito</span>.</h1>
          <p className="lead">Programas a medida para líderes y equipos. Booking, Lancôme, Endeavor, Google, GSK, Elea, Mercado Libre y Roche ya entrenan con nosotros.</p>
          <div className="acmp-hero-ctas">
            <button className="acmp-btn acmp-btn-primary" onClick={onPrimary}>Hablar con el equipo →</button>
            <button className="acmp-btn acmp-btn-ghost">Ver casos</button>
          </div>
        </div>
        <div className="acmp-hero-art">
          <img className="hero-photo" src={window.__r('heroMai','assets/hero-mai.png')} alt="Mai Pistiner"/>
        </div>
      </section>
    );
  }
  return (
    <section className="acmp-hero">
      <div>
        <div className="eyebrow" style={{marginBottom:14}}>EDICIÓN 2026 | ON DEMAND</div>
        <h1 className="oratoria-title"><span className="navy">Curso de Oratoria: El arte de</span> <span className="kw">hablar</span></h1>
        <p className="lead" style={{fontSize:'18px'}}>Técnicas y habilidades para destacarte comunicando.</p>
        <div className="acmp-hero-ctas">
          <button className="acmp-btn acmp-btn-primary" onClick={onPrimary}>Inscribirme al curso →</button>
          <button className="acmp-btn acmp-btn-ghost" onClick={onContact}>Contactarme con un asesor</button>
        </div>
      </div>
      <div className="acmp-hero-art">
        <img className="hero-photo" src={window.__r('heroOratoria','assets/hero-oratoria.png')} alt="Mai Pistiner dando clase de oratoria"/>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });