/* course-panoramica.jsx — Curso Radiografía Panorámica */

function CoursePanoramica() {
  const modules = [
  {
    n: "01",
    tag: "Fundamentos",
    icon: "target",
    hours: "1.5 h",
    title: "El Protocolo de las 5 Zonas.",
    body: "La mayoría de los errores diagnósticos ocurren por falta de orden. Aprenderemos a mirar la radiografía como método análitico secuencial para llegar a un diagnostico."
  },
  {
    n: "02",
    tag: "Módulo 2",
    icon: "layers",
    hours: "1.5 h",
    title: "Alteraciones del Desarrollo Craneofacial y Dental.",
    body: "Asimetrías condilares, anomalías de crecimiento, dientes impactados ectópicos, caninos en seno maxilar, transposiciones, agenesias múltiples, evaluación de fisuras labiopalatinas; aprenderemos a interpretar con claridad."
  },
  {
    n: "03",
    tag: "Módulo 3",
    icon: "pulse",
    hours: "1.5 h",
    title: "Patología Maxilofacial: Quistes, Tumores y Lesiones Óseas.",
    body: "Diagnóstico diferencial entre quistes odontogénicos vs tumores, lesiones radiolúcidas, displasia cemento-ósea, odontomas y signos de sospecha de malignidad."
  },
  {
    n: "04",
    tag: "Módulo 4",
    icon: "book",
    hours: "1.5 h",
    title: "Tejidos Blandos, Senos Maxilares y ATM.",
    body: "Ateromas carotídeos, sialolitos, sinusitis odontogénica, pseudoquistes antrales y cambios degenerativos de la ATM. Cierre con mesa redonda y tips de posibles diagnósticos diferenciales."
  }];

  const panoCases = [
    { src: "assets/pano-displasia-fibrosa.png", label: "Displasia fibrosa", tags: ["Panorámica", "Patología ósea"] },
    { src: "assets/pano-ameloblastoma.jpg", label: "Ameloblastoma", tags: ["Panorámica", "Lesión radiolúcida"] },
    { src: "assets/pano-odontoma.png", label: "Odontoma", tags: ["Panorámica", "Lesión mixta"] },
    { src: "assets/pano-fractura-mandibular.jpg", label: "Fractura mandibular", tags: ["Panorámica", "Trauma"] }
  ];

  return (
    <section className="section course course--panoramica" id="curso-panoramica">

      {/* ── Intro ── */}
      <div className="wrap course__intro reveal">
        <div className="eyebrow" style={{ color: "var(--accent-bright)" }}>NUEVO CURSO · DISPONIBLE</div>
        <h2 className="course__title">
          Curso: 42 casos clínicos<br/><span style={{ letterSpacing: "-1.083px" }}>Maratón de la panóramica</span>
          <span className="course__title-sub">DOMINANDO EL DIAGNOSTÍCO</span>
        </h2>
        <div className="course__badges">
          <span className="course__badge"><Icon name="pulse" size={15} /> 6 horas académicas</span>
          <span className="course__badge course__badge--hot"><Icon name="book" size={15} /> Cupos limitados. · 1ª edición</span>
          <span className="course__badge"><Icon name="pin" size={15} /> Presencial · Barquisimeto</span>
        </div>
        <p className="course__objective">
          <strong>Objetivo:</strong> Desarrollar un método visual sistemático para interpretar radiografías panorámicas, minimizando los "puntos ciegos" diagnósticos y entrenando el ojo para diferenciar anatomía normal, variantes del desarrollo y patologías francas.
        </p>
        <div className="course__aval">
          <span className="course__aval-label">Avalado por</span>
          <img src="assets/aval-svrid.png" alt="Sociedad Venezolana de Radiología (SVRID)" />
          <span className="course__aval-name">Sociedad Venezolana de Radiología Dento-Maxilofacial</span>
        </div>
      </div>

      {/* ── Story blocks 01–04 ── */}
      <div className="wrap course__story">
        <div className="course__rail" aria-hidden="true">
          <span className="course__rail-fill" />
        </div>
        <div className="course__blocks">
          {modules.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">
              <div className="cblock__tag-row">
                <span className="cblock__tag">{b.tag}</span>
                <span className="cblock__hours"><Icon name="pulse" size={12} /> {b.hours}</span>
              </div>
              <h3 className="cblock__title">{b.title}</h3>
              <p className="cblock__body">{b.body}</p>
            </div>
          </article>
          )}
        </div>
      </div>

      {/* ── Placeholder galería (sin imágenes aún) ── */}
      <div className="course__gallery-wrap">
        <div className="wrap">
          <div className="gallery__head reveal">
            <div>
              <div className="eyebrow">Casos clínicos</div>
              <h2 className="gallery__title">42 casos de radiografía panorámica.</h2>
            </div>
            <p className="gallery__lead">Una selección de casos panorámicos analizados en el curso — patología ósea, lesiones y trauma interpretados con el protocolo de lectura sistemático.</p>
          </div>
          <div className="pano-gallery__grid">
            {panoCases.map((c, i) => (
              <figure className="gcard pano-gcard reveal" key={c.src} style={{ "--reveal-delay": `${i * 0.07}s` }}>
                <img className="gcard__img" src={c.src} alt={c.label} loading="lazy" />
                <figcaption className="gcard__meta">
                  <div className="gcard__tags">
                    {c.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
                  </div>
                  <h4 className="gcard__name">{c.label}</h4>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </div>

      {/* ── Ficha técnica Ciudad Crepuscular ── */}
      <div className="wrap course__ficha-wrap reveal" style={{ "--reveal-delay": "0.1s" }}>
        <div className="course__ficha">
          <div className="course__ficha-img">
            <img src="assets/ciudad-crepuscular.png" alt="Ciudad Crepuscular · Barquisimeto" />
            <div className="course__ficha-img-tag">
              <Icon name="pin" size={14} />
              Ciudad Crepuscular · Barquisimeto
            </div>
          </div>
          <div className="course__ficha-detail">
            <div className="course__ficha-head">
              <span className="eyebrow" style={{ color: "var(--accent)" }}>Ficha del curso</span>
              <h3 className="course__ficha-title">6 horas académicas<span> · Jornada intensiva</span></h3>
            </div>
            <div className="course__schedule">
              <div className="schedule__row">
                <div>
                  <strong>Mañana</strong>
                  <span>8:00 AM → 11:00 AM</span>
                </div>
              </div>
              <div className="schedule__break">
                <Icon name="plus" size={13} /> Coffee break
              </div>
              <div className="schedule__row">
                <div>
                  <strong>Mediodía</strong>
                  <span>11:15 AM → 2:15 PM</span>
                </div>
              </div>
            </div>
            <div className="course__amenities">
              <div className="amenity">
                <div>
                  <strong>Coffee incluido</strong>
                  <span>Durante el break</span>
                </div>
              </div>
              <div className="amenity">
                <div>
                  <strong>Ciudad Crepuscular</strong>
                  <span>Centro comercial</span>
                </div>
              </div>
              <div className="amenity">
                <div>
                  <strong>Barquisimeto</strong>
                  <span>Lara, Venezuela</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ── CTA ── */}
      <div className="wrap">
        <div className="course__cta reveal">
          <div className="course__cta-bg" aria-hidden="true" />
          <div className="course__cta-inner">
            <h3>Entrena tu ojo clínico con 42 casos panorámicos reales.</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>
            </div>
          </div>
        </div>
      </div>

    </section>);
}

Object.assign(window, { CoursePanoramica });