/* global React */
function HomeHero({ onPrimary }) {
  return (
    <section className="acmp-hero-banner" id="hero">
      <img
        className="acmp-hero-banner-bg"
        src={R("assets/hero-home.avif")}
        alt=""
        aria-hidden="true"
      />
      <div className="acmp-hero-banner-inner">
        <div className="acmp-hero-banner-left">
          <p className="acmp-hero-banner-off" style={{ fontSize: '79px' }}>Hasta 75% off</p>
          <p className="acmp-hero-banner-combo" style={{ fontSize: '175px' }}>Combo<br />Extremo</p>
        </div>
        <div className="acmp-hero-banner-center" aria-hidden="true"></div>
        <div className="acmp-hero-banner-right">
          <p className="acmp-hero-banner-cuotas" style={{ fontSize: '100px' }}>3 cuotas<br />sin interés</p>
          <a className="acmp-btn acmp-btn-primary acmp-hero-banner-cta" href="https://maipistiner.wisboo.com/product/combo-i-acceso-a-todos-los-cursos" target="_blank" rel="noopener noreferrer">
            ¡Lo quiero! →
          </a>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { HomeHero });