/* global React */

function HomeProductos({ onCta }) {
  return (
    <section className="home-productos" id="cursos">
      <div className="home-productos-inner">

        <div className="home-productos-header">
          <div className="eyebrow" style={{ marginBottom: 12 }}>FORMATE Y ADQUIRÍ HABILIDADES</div>
          <h2 className="home-productos-heading">
            Con la Academia podés aprender con cursos<br />prácticos y formaciones, <span className="kw">sin horarios</span>
          </h2>
        </div>

        <div className="home-productos-grid">

          <div className="home-producto-item">
            <div className="home-producto-img-wrap">
              <img src={R("assets/foto-cursos.png")} alt="Cursos y Combos ACMP" />
            </div>
            <div className="home-producto-info">
              <div className="home-producto-eyebrow">CURSOS ONLINE</div>
              <h2 className="home-producto-title" style={{ color: 'var(--acmp-navy)' }}>
                Cursos y Combos
              </h2>
              <button className="acmp-btn acmp-btn-primary" onClick={onCta}>
                Ver cursos →
              </button>
            </div>
          </div>

          <div className="home-producto-item">
            <div className="home-producto-img-wrap">
              <img src={R("assets/hero-ingles.avif")} alt="Academia en Inglés ACMP" />
            </div>
            <div className="home-producto-info">
              <div className="home-producto-eyebrow">INTENSIVO · 2026</div>
              <h2 className="home-producto-title" style={{ color: 'var(--acmp-navy)' }}>
                Academia en Inglés
              </h2>
              <button className="acmp-btn acmp-btn-primary" onClick={onCta}>
                Ver el intensivo →
              </button>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomeProductos });