// ============================================================
// COHORTE / BOOTCAMP — Premium single-viewport with gold accents
// Animated 5-day journey carousel
// ============================================================

function Cohorte() {
  const [day, setDay] = React.useState(0);
  const [playing, setPlaying] = React.useState(true);
  const total = COHORTE_MODULES.length;
  const timerRef = React.useRef(null);

  React.useEffect(() => {
    if (!playing) return;
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => setDay(d => (d + 1) % total), 3600);
    return () => clearTimeout(timerRef.current);
  }, [day, playing, total]);

  const current = COHORTE_MODULES[day];
  const host = CHARACTERS.find(c => c.id === current.host);
  const prevDay = (day - 1 + total) % total;

  return (
    <section id="cohorte" className="section cohorte-gold">
      <div className="bc-wrap">
        {/* Premium corner badge */}
        <div className="bc-medal" aria-hidden="true">
          <span className="bc-medal-ring" />
          <span className="bc-medal-star">★</span>
        </div>

        {/* HEAD: title + dates inline */}
        <header className="bc-head">
          <div className="bc-head-left">
            <div className="bc-kicker">
              <span className="bc-kicker-bar" />
              <span>Se abren convocatorias · culminación 2026</span>
            </div>
            <h2>Deja de ser operativo. <em>Transfórmate en empresario.</em></h2>
            <p>Tu empresa por fin integrará sistemas a la medida que tú mismo diseñarás con tu equipo, para que todos dejen el trabajo operativo en manos de la tecnología y aporten valor con su conocimiento y experiencia. Navega esta aventura de la mano de ingenieros, especialistas y de <b>Cristina, tu amiga de la tecnología.</b></p>
          </div>
          <div className="bc-head-right">
            <h3 className="bc-dates-title">Próximas fechas · 2026</h3>
            <div className="bc-dates">
              <div className="bc-date">
                <small>Lun – Vie</small>
                <b>Ago 17</b>
                <em>Cerrada</em>
              </div>
              <div className="bc-date">
                <small>Lun – Vie</small>
                <b>Sep 21</b>
                <em>Cerrada</em>
              </div>
              <div className="bc-date bc-date-active">
                <small>Lun – Vie</small>
                <b>Oct 19</b>
                <em>Inicia curso</em>
              </div>
            </div>
            <p className="bc-dates-note">Nueva convocatoria abre el lunes siguiente al inicio de octubre.</p>
          </div>
        </header>

        {/* BODY: 5-day animated journey */}
        <div className="bc-journey">
          <div className="bc-journey-track">
            <div className="bc-journey-line">
              <div className="bc-journey-fill" style={{ width: `${((day + 1) / total) * 100}%` }} />
            </div>

            {COHORTE_MODULES.map((m, i) => {
              const h = CHARACTERS.find(c => c.id === m.host);
              const active = i === day;
              const done = i < day;
              return (
                <button
                  key={m.week}
                  type="button"
                  className={"bc-day" + (active ? " active" : "") + (done ? " done" : "")}
                  style={{ "--dc": h.color }}
                  onClick={() => { setPlaying(false); setDay(i); }}
                >
                  <span className="bc-day-medal">
                    <span className="bc-day-avatar">
                      <img src={h.img} alt={h.name} draggable="false" loading="eager" />
                    </span>
                    <span className="bc-day-num">D{i + 1}</span>
                  </span>
                  <span className="bc-day-label">{m.title.split('·')[0].replace(' + ', ' / ').trim()}</span>
                </button>
              );
            })}
          </div>

          {/* Animated detail panel for current day */}
          <div className="bc-stage" style={{ "--sc": host.color }}>
            <div className="bc-stage-glow" />
            <div className="bc-stage-grid">
              <div className="bc-stage-char">
                {COHORTE_MODULES.map((m, i) => {
                  const h = CHARACTERS.find(c => c.id === m.host);
                  let state = "hidden";
                  if (i === day) state = "active";
                  else if (i === prevDay) state = "leaving";
                  return (
                    <div key={m.week} className={"bc-stage-slot is-" + state} style={{ "--cc": h.color }}>
                      <img src={h.img} alt={h.name} draggable="false" loading="eager" />
                      <span className="bc-stage-halo" style={{ background: `radial-gradient(circle, ${h.color}, transparent 60%)` }} />
                    </div>
                  );
                })}
              </div>
              <div className="bc-stage-info">
                <span className="bc-stage-tag" style={{ borderColor: host.color, color: host.color }}>
                  Día {day + 1} de {total} · {host.name}
                </span>
                <h3>{current.title}</h3>
                <p>{current.sub}</p>
                <div className="bc-stage-ctrl">
                  <button type="button" className="bc-mini" onClick={() => { setPlaying(false); setDay(d => (d - 1 + total) % total); }}>‹</button>
                  <button type="button" className="bc-mini primary" style={{ background: "linear-gradient(95deg, #ffd84a, #ff2fb3)" }} onClick={() => setPlaying(p => !p)}>
                    {playing ? "⏸ Pausar" : "▶ Reproducir"}
                  </button>
                  <button type="button" className="bc-mini" onClick={() => { setPlaying(false); setDay(d => (d + 1) % total); }}>›</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* FOOT: stats + CTA */}
        <footer className="bc-foot">
          <div className="bc-stat"><b>5</b><small>Días · 9 a 5</small></div>
          <div className="bc-stat"><b>40h</b><small>Inmersivas</small></div>
          <div className="bc-stat"><b>10</b><small>Empresarios</small></div>
          <div className="bc-stat"><b>+20</b><small>Años resolviendo</small></div>
          <a className="bc-cta" href="https://wa.me/525532009853?text=Hola%20Cristina%2C%20quiero%20aplicar%20al%20Curso%20Maestro%20de%20Digitalizaci%C3%B3n" target="_blank" rel="noopener">
            Aplicar al bootcamp <span>→</span>
          </a>
        </footer>
      </div>
    </section>
  );
}

window.Cohorte = Cohorte;