/* course.jsx — Curso CBCT + IA, story mode scroll */

function Course() {
  const blocks = [
  {
    n: "01",
    tag: "Contexto",
    icon: "book",
    title: "Años de casos clínicos reales.",
    body: "Durante años hemos analizado casos clínicos reales, desarrollando criterios avanzados en diagnóstico 3D aplicado a ortodoncia."
  },
  {
    n: "02",
    tag: "Experiencia",
    icon: "layers",
    title: "25 casos clínicos para aprender.",
    body: "El curso incluye casos clínicos reales, diseñados para simular la experiencia clínica de años en práctica profesional."
  },
  {
    n: "03",
    tag: "Enfoque",
    icon: "target",
    title: "No es software. Es criterio clínico.",
    body: "Criterio clínico aplicado a imágenes 3D reales — no una herramienta, sino una forma de pensar el diagnóstico."
  },
  {
    n: "04",
    tag: "Valor",
    icon: "pulse",
    title: "Aprendizaje acelerado, basado en experiencia.",
    body: "Análisis de casos complejos y toma de decisiones diagnósticas, condensando años de práctica en un recorrido guiado."
  }];


  return (
    <section className="section course" id="curso">
      {/* intro */}
      <div className="wrap course__intro reveal">
        <div className="eyebrow" style={{ color: "var(--accent-bright)" }}>Formación · Story mode</div>
        <h2 className="course__title">
          Curso de Diagnóstico en Ortodoncia con Casos Clínicos Reales
          <span className="course__title-sub">CBCT + Inteligencia Artificial</span>
        </h2>
        <div className="course__badges">
          <span className="course__badge"><Icon name="pin" size={15} /> Presencial · Caracas</span>
          <span className="course__badge course__badge--hot"><Icon name="award" size={15} /> Solo 15 cupos · 1ª edición</span>
          <span className="course__badge"><Icon name="pulse" size={15} /> Por tiempo limitado</span>
        </div>
      </div>

      {/* sticky scroll story */}
      <div className="wrap course__story">
        <div className="course__rail" aria-hidden="true">
          <span className="course__rail-fill" />
        </div>
        <div className="course__blocks">
          {blocks.map((b, i) =>
          <article className="cblock reveal" key={b.n} style={{ "--reveal-delay": `${i % 2 * 0.08}s` }}>
              <div className="cblock__index">
                <span className="cblock__n">{b.n}</span>
                <span className="cblock__icon"><Icon name={b.icon} size={22} /></span>
              </div>
              <div className="cblock__content">
                <span className="cblock__tag">{b.tag}</span>
                <h3 className="cblock__title">{b.title}</h3>
                <p className="cblock__body">{b.body}</p>
                {b.metric &&
              <div className="cblock__metric">
                    <span className="cblock__metric-v">{b.metric.v}</span>
                    <span className="cblock__metric-l">{b.metric.l}</span>
                  </div>
              }
              </div>
            </article>
          )}
        </div>
      </div>

      {/* CTA final */}
      <div className="wrap">
        <div className="course__cta reveal">
          <div className="course__cta-bg" aria-hidden="true" />
          <div className="course__cta-inner">
            <h3>Mejora tu diagnóstico y lleva tu práctica ortodóntica a nivel avanzado.</h3>
            <div className="course__cta-right">
              <a href="#contacto" className="btn btn-primary course__cta-btn">
                Inscripciones abiertas <span className="arrow"><Icon name="arrow" size={18} /></span>
              </a>
              <span className="course__cta-note">Solo 15 cupos · Presencial · Fechas próximamente</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Course });