// CourseLearningPathSections.jsx — beginner-first learning path for /curso.
const {
  firstWinFlow: courseFirstWinFlowData,
  learningPaths: courseLearningPathsData,
} = window.CourseFunnelData;

function CourseFirstWinSection() {
  return (
    <section className="course-section course-first-win" id="primer-resultado">
      <div className="course-wrap">
        <div className="course-first-win__intro">
          <CourseSectionHeader
            number="01"
            eyebrow="PRIMER RESULTADO"
            title="Primero la vas a ver funcionar"
            description="No vas a pasar horas estudiando teoría antes de ver resultados. Desde las primeras clases vas a crear el proyecto, abrirlo en un emulador o teléfono y empezar a transformar una pantalla en tu propia aplicación. Después iremos incorporando la complejidad de forma progresiva."
          />

          <aside className="course-first-win__promise">
            <i className="ph ph-play-circle" aria-hidden="true" />
            <div>
              <span>DESDE LAS PRIMERAS CLASES</span>
              <strong>Una primera versión abierta y funcionando.</strong>
              <p>Lo nuevo se aprende sobre una app que ya podés ver, tocar y mejorar.</p>
            </div>
          </aside>
        </div>

        <div
          className="course-first-win__journey"
          aria-label="De la idea a un producto publicado"
        >
          {courseFirstWinFlowData.map((step) => (
            <article className="course-first-win__step" key={step.number}>
              <div className="course-first-win__step-marker">
                <span>{step.number}</span>
                <i className={`ph ${step.icon}`} aria-hidden="true" />
              </div>
              <strong>{step.title}</strong>
              <p>{step.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function CourseLearningPathsSection() {
  return (
    <section className="course-section course-learning-paths" id="rutas">
      <div className="course-wrap">
        <div className="course-learning-paths__intro">
          <CourseSectionHeader
            number="05"
            eyebrow="RECORRIDO FLEXIBLE"
            title="Un curso completo, sin obligarte a usar todo"
            description="No todas las apps necesitan un backend complejo, pagos, Redis, mapas o una estrategia completa de marketing. Vas a seguir una ruta esencial y abrir la biblioteca especializada únicamente cuando una decisión de tu producto lo justifique."
          />

          <div className="course-learning-paths__rule">
            <i className="ph ph-signpost" aria-hidden="true" />
            <div>
              <span>LA REGLA</span>
              <strong>Primero funciona. Después profundizás.</strong>
              <p>No agregamos herramientas para que el proyecto parezca más sofisticado.</p>
            </div>
          </div>
        </div>

        <div className="course-learning-paths__grid">
          <article className="course-path-card course-path-card--essential">
            <header>
              <span className="course-label course-label--gold">RECORRIDO PRINCIPAL</span>
              <i className="ph ph-route" aria-hidden="true" />
            </header>
            <h3>Ruta esencial</h3>
            <p>El camino que todos siguen para convertir una idea en una app publicada.</p>

            <ol>
              {courseLearningPathsData.essential.map((item, index) => (
                <li key={item}>
                  <span>{String(index + 1).padStart(2, '0')}</span>
                  <strong>{item}</strong>
                  <i className="ph ph-check" aria-hidden="true" />
                </li>
              ))}
            </ol>

            <footer>
              <i className="ph ph-arrow-circle-right" aria-hidden="true" />
              <span>Esta ruta te lleva desde la idea hasta tus primeros usuarios.</span>
            </footer>
          </article>

          <article className="course-path-card course-path-card--library">
            <header>
              <span className="course-label">MÓDULOS OPCIONALES</span>
              <i className="ph ph-books" aria-hidden="true" />
            </header>
            <h3>Biblioteca especializada</h3>
            <p>Profundizá en estas áreas solo cuando tu app realmente las necesite.</p>

            <ul>
              {courseLearningPathsData.specialized.map((item) => (
                <li key={item.title}>
                  <i className={`ph ${item.icon}`} aria-hidden="true" />
                  <strong>{item.title}</strong>
                  <span>Opcional</span>
                </li>
              ))}
            </ul>

            <footer>
              <i className="ph ph-book-open-text" aria-hidden="true" />
              <span>Todo queda disponible para volver cuando tu producto crezca.</span>
            </footer>
          </article>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  CourseFirstWinSection,
  CourseLearningPathsSection,
});