// HomeCourseSection.jsx — focused promotion for the course on the main landing.
function HomeCourseSection() {
  const config = window.CourseFunnelData.config;

  return (
    <section id="course" className="home-course">
      <div className="home-course__grid-bg" aria-hidden="true" />

      <div className="wrap home-course__inner">
        <header className="home-course__header reveal">
          <div>
            <span className="mono">03 / CURSO</span>
            <strong>De una idea a una app publicada.</strong>
          </div>
          <span className="mono">EN ESPAÑOL · PRIMERA EDICIÓN</span>
        </header>

        <div className="home-course__layout">
          <div className="home-course__copy reveal" data-d="1">
            <div className="home-course__badge mono">
              <span aria-hidden="true" />
              PRECIO FUNDADOR · {config.price}
            </div>

            <h2>Tenés una idea. Ahora podés convertirla en una app.</h2>
            <p>
              Aprendé el proceso real para planear, construir y publicar una aplicación usando IA
              como copiloto, incluso si hoy no te considerás programador.
            </p>

            <div className="home-course__actions">
              <a href="/curso" className="home-course__primary">
                <span>Conocer el curso</span>
                <i className="ph ph-arrow-up-right" aria-hidden="true" />
              </a>
              <a href="/curso#programa" className="home-course__secondary">
                Ver el programa
              </a>
            </div>

            <ul className="home-course__trust">
              <li>Curso completo</li>
              <li>Acceso de por vida</li>
              <li>4 llamadas privadas 1:1</li>
            </ul>
          </div>

          <div className="home-course__visual reveal" data-d="2">
            <div className="home-course__aura" aria-hidden="true" />
            <img
              className="home-course__cargito"
              src="assets/cargito-feliz.webp"
              alt=""
              aria-hidden="true"
            />
            <img
              className="home-course__anthony"
              src="assets/anthony-pfp.png"
              alt="Anthony Stepvoy"
            />

            <div className="home-course__case">
              <span className="mono">EL CASO REAL</span>
              <strong>CarGO</strong>
              <small>+2.000 usuarios · iOS + Android</small>
            </div>

            <div className="home-course__price">
              <span className="mono">ACCESO FUNDADOR</span>
              <strong>{config.price}</strong>
              <del>{config.futurePrice}</del>
            </div>
          </div>
        </div>

        <div className="home-course__flow reveal" data-d="3" aria-label="Recorrido del curso">
          {['Idea', 'Plan', 'Producto', 'Debug', 'Publicación'].map((step, index) => (
            <React.Fragment key={step}>
              <div>
                <span className="mono">{String(index + 1).padStart(2, '0')}</span>
                <strong>{step}</strong>
              </div>
              {index < 4 ? <i className="ph ph-arrow-right" aria-hidden="true" /> : null}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomeCourseSection });