/* global React, GlossaryTooltip, Watermark, DisclaimerFooter, Banner */
// P01 Course Home · P02 Module overview · P13 Progress dashboard

const { useState: useS_ov } = React;

// ============================================================================
//  P01 — Course Home
// ============================================================================
const P01_Home = () => {
  const modules = [
    { id: 'M00', title: 'El múltiplo aislado siempre miente un poco', episodes: 1, dur: '30 min', status: 'done', risk: 'aplicar técnica sin entender cuándo es apropiada' },
    { id: 'M01', title: 'Múltiplos sobre beneficio: P/E y PEG con quality earnings', episodes: 6, dur: '3h 05m', status: 'current', risk: 'usar P/E con earnings sin depurar' },
    { id: 'M02', title: 'Múltiplos sobre Enterprise Value: EV/EBITDA, EV/Sales, EV/EBIT', episodes: 5, dur: '2h 35m', status: 'locked', risk: 'ignorar leases, minoritarios, pensiones' },
    { id: 'M03', title: 'Comparables, sectores y dispersión: cuándo el peer set engaña', episodes: 4, dur: '2h 10m', status: 'locked', risk: 'mediana sectorial sin sub-sector mismatch' },
    { id: 'M04', title: 'Síntesis: panel 6×4×3 + capstone', episodes: 6, dur: '4h 30m', status: 'locked', risk: 'múltiplo aislado sin convergencia analítica' },
  ];

  return (
    <div className="artboard-root" style={{ padding: '0' }}>
      {/* top nav */}
      <div className="sticky-header" style={{ padding: '14px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="row" style={{ gap: 14 }}>
          <div className="mono" style={{ fontWeight: 600, letterSpacing: '-0.02em' }}>finaz<span style={{ color: 'var(--accent)' }}>.</span>educafcef</div>
          <span className="txt-ter">/</span>
          <span className="txt-sec txt-sm">Cursos</span>
          <span className="txt-ter">/</span>
          <span className="txt-sm">C04-A · Múltiplos Intro</span>
        </div>
        <div className="row" style={{ gap: 12 }}>
          <button className="btn btn-ghost"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 2a6 6 0 1 0 5.2 9A6 6 0 0 1 8 2z" stroke="currentColor" strokeLinejoin="round"/></svg></button>
          <div className="row" style={{ gap: 6 }}>
            <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'linear-gradient(135deg, var(--voice-mateo), var(--voice-sofia))', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600 }}>JM</div>
            <span className="txt-sm">Julia M.</span>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 32px' }}>
        {/* Hero */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 48, marginBottom: 48, alignItems: 'end' }}>
          <div>
            <div className="row" style={{ gap: 10, marginBottom: 16 }}>
              <span className="badge">CURSO C04-A</span>
              <span className="badge" style={{ borderColor: 'var(--signal-pass)', color: 'var(--signal-pass)' }}>NIVEL · INICIACIÓN</span>
              <span className="badge">22 episodios</span>
              <span className="badge">14–18h</span>
            </div>
            <h1 className="serif" style={{ fontSize: 'var(--size-3xl)', margin: '0 0 16px 0', fontWeight: 400, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
              Valoración Relativa<br/>y Múltiplos
            </h1>
            <p className="serif txt-sec" style={{ fontSize: 'var(--size-lg)', maxWidth: 640, lineHeight: 1.55, margin: '0 0 28px 0' }}>
              Convertir múltiplos en señales útiles para una tesis: leer <GlossaryTooltip termId="pe_trailing">P/E</GlossaryTooltip>, EV/EBITDA, P/B y P/S sin caer en trampas de comparabilidad ni precisión espuria.
            </p>
            <div className="row" style={{ gap: 12 }}>
              <button className="btn btn-primary" style={{ padding: '12px 18px', fontSize: 'var(--size-md)' }}>
                Continuar en M01 · E02
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M5 3l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </button>
              <button className="btn">Ver mapa completo</button>
              <button className="btn btn-ghost">Descargar PDF</button>
            </div>
          </div>

          <div className="card" style={{ padding: 20 }}>
            <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 10 }}>Tu progreso</div>
            <div className="row" style={{ justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-2xl)' }}>32%</span>
              <span className="txt-xs txt-sec mono">7 / 22 episodios</span>
            </div>
            <div className="rubric-bar"><div className="rubric-fill pass" style={{ width: '32%' }}/></div>
            <div className="divider"></div>
            <div className="col" style={{ gap: 8 }}>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <span className="txt-sm txt-sec">Mastery superados</span>
                <span className="mono txt-sm">5 <span className="txt-ter">/ 7</span></span>
              </div>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <span className="txt-sm txt-sec">Cards de recall hoy</span>
                <span className="mono txt-sm" style={{ color: 'var(--signal-hypothesis)' }}>3</span>
              </div>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <span className="txt-sm txt-sec">Glosario consultado</span>
                <span className="mono txt-sm">21 <span className="txt-ter">/ 66</span></span>
              </div>
            </div>
          </div>
        </div>

        {/* Promesa + Pre-reqs */}
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 32, marginBottom: 48 }}>
          <div>
            <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 8 }}>Promesa central</div>
            <p className="serif" style={{ fontSize: 'var(--size-xl)', lineHeight: 1.45, margin: 0, color: 'var(--text-primary)' }}>
              Aprenderás a leer un múltiplo como output de drivers — <span style={{ color: 'var(--signal-driver)' }}>g, ROE, riesgo</span> — y no como adjetivo de baratura.<br/>
              Ningún número se mira aislado.
            </p>
          </div>
          <div>
            <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 12 }}>Prerequisitos</div>
            <div className="col" style={{ gap: 8 }}>
              {['C01 · Estados financieros', 'C02-A · Métricas operativas', 'C03-A · Coste de capital'].map(p => (
                <div key={p} className="row" style={{ justifyContent: 'space-between', padding: '8px 12px', background: 'var(--surface-1)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--r-md)' }}>
                  <span className="txt-sm">{p}</span>
                  <span className="chip chip-pass" style={{ fontSize: 10 }}>✓ completo</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Module map */}
        <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 14 }}>5 módulos · 22 episodios · 1 capstone</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, marginBottom: 32 }}>
          {modules.map(m => {
            const isCurrent = m.status === 'current';
            const isDone = m.status === 'done';
            const isLocked = m.status === 'locked';
            return (
              <div
                key={m.id}
                className="card"
                style={{
                  padding: 16,
                  borderColor: isCurrent ? 'var(--accent)' : 'var(--border-default)',
                  background: isCurrent ? 'rgba(107,163,255,0.04)' : 'var(--surface-1)',
                  opacity: isLocked ? 0.6 : 1,
                  minHeight: 220,
                  display: 'flex', flexDirection: 'column',
                  cursor: isLocked ? 'not-allowed' : 'pointer',
                }}
              >
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 10 }}>
                  <span className="mono" style={{ fontSize: 'var(--size-lg)', color: isCurrent ? 'var(--accent)' : 'var(--text-secondary)' }}>{m.id}</span>
                  {isDone && <span className="chip chip-pass" style={{ fontSize: 10 }}>✓</span>}
                  {isCurrent && <span className="dot-pulse" />}
                  {isLocked && <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3" y="7" width="10" height="7" rx="1" stroke="currentColor"/><path d="M5 7V5a3 3 0 1 1 6 0v2" stroke="currentColor"/></svg>}
                </div>
                <h3 className="serif" style={{ fontSize: 'var(--size-md)', margin: '0 0 10px 0', lineHeight: 1.3, fontWeight: 500, flex: 1 }}>
                  {m.title}
                </h3>
                <div className="txt-xs" style={{ color: 'var(--signal-warning)', borderTop: '1px dashed var(--border-default)', paddingTop: 10, marginBottom: 10, lineHeight: 1.4 }}>
                  ⚠ Riesgo: {m.risk}
                </div>
                <div className="row" style={{ justifyContent: 'space-between', fontSize: 11, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)' }}>
                  <span>{m.episodes} ep</span>
                  <span>{m.dur}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Capstone preview */}
        <div className="card" style={{ padding: 24, display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 32, borderColor: 'var(--border-strong)' }}>
          <div>
            <div className="row" style={{ marginBottom: 8 }}>
              <span className="badge" style={{ borderColor: 'var(--signal-hypothesis)', color: 'var(--signal-hypothesis)' }}>CAPSTONE</span>
              <span className="badge">M04 · Gate</span>
            </div>
            <h2 className="serif" style={{ fontSize: 'var(--size-2xl)', margin: '0 0 8px 0', fontWeight: 400, lineHeight: 1.2 }}>
              Panel 6×4×3
            </h2>
            <p className="txt-sec txt-sm" style={{ margin: 0 }}>
              6 sectores × 4 múltiplos × 3 empresas con justificación por celda primaria + 3 ideas con anti-tesis falsable.
            </p>
          </div>
          <div>
            <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 10 }}>Mastery del curso</div>
            <ul className="col" style={{ gap: 8 }}>
              <li className="txt-sm row" style={{ alignItems: 'flex-start', gap: 8 }}>
                <span style={{ color: 'var(--signal-driver)', marginTop: 2 }}>▪</span>
                72 celdas con valor + drivers + fuente + limitación
              </li>
              <li className="txt-sm row" style={{ alignItems: 'flex-start', gap: 8 }}>
                <span style={{ color: 'var(--signal-driver)', marginTop: 2 }}>▪</span>
                3 ideas con anti-tesis falsable (no opiniones)
              </li>
              <li className="txt-sm row" style={{ alignItems: 'flex-start', gap: 8 }}>
                <span style={{ color: 'var(--signal-driver)', marginTop: 2 }}>▪</span>
                Memo 800 palabras sin lenguaje prohibido (compra/vende/garantía)
              </li>
            </ul>
          </div>
        </div>
      </div>

      <DisclaimerFooter expanded />
    </div>
  );
};

// ============================================================================
//  P02 — Module Overview (M01)
// ============================================================================
const P02_Module = () => {
  const episodes = [
    { id: 'E01', title: 'P/E como cociente de un cuento: precio entre beneficio', type: 'VIDEO+Q-MAP', dur: '30 min', status: 'done', score: 88 },
    { id: 'E02', title: 'Trailing vs forward: ¿qué foto miras?', type: 'CALC', dur: '30 min', status: 'current', score: null },
    { id: 'E03', title: 'PEG ratio: cuando Peter Lynch te ayuda y cuando te miente', type: 'CALC', dur: '30 min', status: 'locked', score: null },
    { id: 'E04', title: 'Mismo P/E, tres calidades: ordenar sin mirar precio', type: 'CASE', dur: '35 min', status: 'locked', score: null },
    { id: 'E05', title: 'P/E sectorial mediano: cuándo es útil y cuándo distrae', type: 'MAP+CASE', dur: '30 min', status: 'locked', score: null },
    { id: 'E06', title: 'Gate M01: veredicto sobre múltiplos beneficio', type: 'GATE', dur: '30 min', status: 'locked', score: null },
  ];

  return (
    <div className="artboard-root">
      <div className="sticky-header" style={{ padding: '14px 32px' }}>
        <div className="row" style={{ gap: 8 }}>
          <span className="txt-xs txt-ter mono">C04-A · MÚLTIPLOS INTRO</span>
          <span className="txt-ter">/</span>
          <span className="txt-sm">M01</span>
        </div>
      </div>

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 32px' }}>
        {/* Header */}
        <div style={{ marginBottom: 32 }}>
          <div className="row" style={{ gap: 10, marginBottom: 12 }}>
            <span className="badge" style={{ borderColor: 'var(--accent)', color: 'var(--accent)' }}>MÓDULO M01</span>
            <span className="badge">6 episodios · 3h 05m</span>
            <span className="badge" style={{ borderColor: 'var(--signal-pass)', color: 'var(--signal-pass)' }}>1 / 6 en progreso</span>
          </div>
          <h1 className="serif" style={{ fontSize: 'var(--size-3xl)', margin: '0 0 8px 0', fontWeight: 400, letterSpacing: '-0.02em' }}>
            Múltiplos sobre beneficio
          </h1>
          <p className="serif txt-sec" style={{ margin: 0, fontSize: 'var(--size-lg)', maxWidth: 720 }}>
            P/E y PEG con quality earnings. El alumno depura earnings de one-offs, distingue trailing vs forward, aplica PEG con g sostenible y reconoce la trampa de earnings inflados.
          </p>
        </div>

        {/* Risk callout */}
        <div className="banner banner-warning" style={{ marginBottom: 32, padding: 20 }}>
          <span className="banner-icon">⚠</span>
          <div>
            <div className="banner-title" style={{ fontSize: 'var(--size-md)', marginBottom: 6 }}>Riesgo formativo que previene este capítulo</div>
            <div className="banner-text" style={{ fontSize: 'var(--size-md)', lineHeight: 1.5 }}>
              Un alumno que llega aquí con conceptos sueltos puede aplicar la técnica sin entender cuándo es apropiada. Este capítulo previene ese riesgo con 6 episodios con entregables observables y 1 cierre con criterio cuantitativo. <strong>La narrativa no sustituye al cálculo; el cálculo no sustituye al juicio.</strong>
            </div>
          </div>
        </div>

        {/* Episodes + Glossary preview */}
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 32 }}>
          <div>
            <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 12 }}>Episodios</div>
            <div className="col" style={{ gap: 6 }}>
              {episodes.map(ep => {
                const isCurrent = ep.status === 'current';
                const isDone = ep.status === 'done';
                const isLocked = ep.status === 'locked';
                return (
                  <div
                    key={ep.id}
                    className="card"
                    style={{
                      padding: 14,
                      display: 'grid', gridTemplateColumns: '48px 80px 1fr 90px 90px',
                      gap: 14, alignItems: 'center',
                      borderColor: isCurrent ? 'var(--accent)' : 'var(--border-default)',
                      opacity: isLocked ? 0.55 : 1,
                    }}
                  >
                    <span className="step-rail-marker" style={{ width: 32, height: 32, fontSize: 13 }}>
                      {isDone ? '✓' : ep.id.replace('E','')}
                    </span>
                    <span className="badge" style={{ borderColor: ep.type === 'GATE' ? 'var(--signal-hypothesis)' : 'var(--border-default)', color: ep.type === 'GATE' ? 'var(--signal-hypothesis)' : 'var(--text-tertiary)' }}>
                      {ep.type}
                    </span>
                    <div>
                      <div style={{ fontSize: 'var(--size-md)', fontWeight: 500, marginBottom: 2 }}>{ep.title}</div>
                      <div className="mono txt-xs txt-ter">{ep.id}</div>
                    </div>
                    <span className="mono txt-xs txt-sec">{ep.dur}</span>
                    {isDone && <span className="chip chip-pass">mastery {ep.score}</span>}
                    {isCurrent && <span className="chip chip-active">Continuar →</span>}
                    {isLocked && <span className="chip" style={{ opacity: 0.6 }}>bloqueado</span>}
                  </div>
                );
              })}
            </div>
          </div>

          <div>
            <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 12 }}>Glosario clave del capítulo</div>
            <div className="card" style={{ padding: 16 }}>
              {['earnings_depurados', 'sbc_abusivo', 'pe_trailing', 'pe_forward', 'peg_ratio'].map((tid, i, arr) => {
                const e = window.GLOSSARY[tid];
                return (
                  <div key={tid} style={{ paddingBottom: 10, marginBottom: 10, borderBottom: i < arr.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}>
                    <div className="row" style={{ gap: 6, marginBottom: 4 }}>
                      <span className="i-icon" style={{ display: 'inline-grid', placeItems: 'center', width: 16, height: 16, borderRadius: '50%', background: 'var(--accent-muted)', color: 'var(--accent)', fontSize: 10, fontFamily: 'var(--font-mono)' }}>i</span>
                      <span className="bold txt-sm">{e.term}</span>
                    </div>
                    <div className="txt-xs txt-sec" style={{ lineHeight: 1.45 }}>{e.definition}</div>
                  </div>
                );
              })}
              <button className="btn btn-ghost" style={{ width: '100%', marginTop: 4, justifyContent: 'center' }}>Ver los 18 términos del módulo →</button>
            </div>

            <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', margin: '24px 0 12px' }}>Mastery del capítulo</div>
            <div className="card" style={{ padding: 16 }}>
              <div className="serif" style={{ fontSize: 'var(--size-md)', lineHeight: 1.5 }}>
                3 veredictos completos con 4 dimensiones evaluadas + memo 200 palabras prudente <span style={{ color: 'var(--signal-warning)' }}>sin atajos lingüísticos</span> (barata, cara, garantía).
              </div>
              <div className="row" style={{ gap: 6, marginTop: 12 }}>
                <span className="chip chip-driver">P/E clean</span>
                <span className="chip chip-driver">PEG quality</span>
                <span className="chip chip-driver">Sectorial</span>
                <span className="chip chip-driver">Recurrencia</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <DisclaimerFooter />
    </div>
  );
};

// ============================================================================
//  P13 — Progress Dashboard
// ============================================================================
const P13_Progress = () => {
  // glossary heatmap: 66 terms, 11x6 grid
  const heatStates = useMemo(() => {
    const s = [];
    for (let i = 0; i < 66; i++) {
      const r = (i * 7) % 10;
      if (r < 2) s.push('lv4'); // dominado
      else if (r < 4) s.push('lv3');
      else if (r < 6) s.push('lv2');
      else if (r < 8) s.push('lv1');
      else s.push(''); // sin tocar
    }
    return s;
  }, []);

  const recallDays = [
    { day: 'Hoy',     date: '19 may', count: 3, items: ['P/E forward', 'EBITDA depurado', 'Lynch sweet spot'] },
    { day: 'Mañana',  date: '20 may', count: 5, items: [] },
    { day: 'Jue',     date: '21 may', count: 2, items: [] },
    { day: 'Vie',     date: '22 may', count: 0, items: [] },
    { day: 'Sáb',     date: '23 may', count: 4, items: [] },
    { day: 'Dom',     date: '24 may', count: 1, items: [] },
    { day: 'Lun',     date: '25 may', count: 6, items: [] },
  ];

  const masteryHistory = [
    { ep: 'M00.E00', name: 'Dos empresas, mismo P/E', score: 82, when: 'hace 12 días' },
    { ep: 'M01.E01', name: 'P/E como cociente de un cuento', score: 88, when: 'hace 5 días' },
    { ep: 'M01.E02', name: 'Trailing vs forward', score: null, when: 'en curso' },
  ];

  return (
    <div className="artboard-root">
      <div className="sticky-header" style={{ padding: '14px 32px' }}>
        <div className="row" style={{ justifyContent: 'space-between' }}>
          <div className="row" style={{ gap: 8 }}>
            <span className="txt-xs txt-ter mono">FINAZ · C04-A</span>
            <span className="txt-ter">/</span>
            <span className="txt-sm">Tu progreso</span>
          </div>
          <button className="btn btn-primary">Continuar en M01 · E02 →</button>
        </div>
      </div>

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '32px' }}>
        <h1 className="serif" style={{ fontSize: 'var(--size-2xl)', margin: '0 0 24px 0', fontWeight: 400 }}>
          Panel del alumno
        </h1>

        {/* Summary tiles */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 32 }}>
          {[
            { label: 'Curso completado', value: '32%', sub: '7 / 22 episodios', tone: 'pass' },
            { label: 'Mastery medio',    value: '85',  sub: 'sobre 100 (umbral 75)', tone: 'pass' },
            { label: 'Recall hoy',       value: '3',   sub: 'cards en cola', tone: 'warn' },
            { label: 'Glosario',         value: '21',  sub: '/ 66 consultados', tone: 'driver' },
          ].map(t => (
            <div key={t.label} className="card" style={{ padding: 16 }}>
              <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 8 }}>{t.label}</div>
              <div className="row" style={{ alignItems: 'baseline', gap: 8 }}>
                <span className="mono" style={{ fontSize: 'var(--size-3xl)', fontWeight: 500, color: 'var(--signal-driver)', lineHeight: 1 }}>{t.value}</span>
                <span className="txt-xs txt-sec">{t.sub}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Recall timeline */}
        <div className="card" style={{ padding: 20, marginBottom: 24 }}>
          <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16 }}>
            <div>
              <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 4 }}>Spaced recall · próximos 7 días</div>
              <div className="serif" style={{ fontSize: 'var(--size-lg)' }}>Programadas según día 1 / 7 / 30 de cada episodio.</div>
            </div>
            <button className="btn">Empezar sesión de hoy →</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8 }}>
            {recallDays.map((d, i) => {
              const h = Math.max(8, d.count * 12);
              return (
                <div key={i} className="col" style={{ gap: 6 }}>
                  <div style={{ height: 80, background: 'var(--surface-2)', borderRadius: 'var(--r-md)', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'flex-end' }}>
                    <div style={{ width: '100%', height: `${h}px`, background: i === 0 ? 'var(--signal-hypothesis)' : 'var(--accent)', opacity: 0.85 }}/>
                    <span className="mono" style={{ position: 'absolute', top: 6, left: 8, fontSize: 11, color: 'var(--text-primary)' }}>{d.count}</span>
                  </div>
                  <div className="txt-xs txt-sec" style={{ textAlign: 'center' }}>
                    <div style={{ fontWeight: i === 0 ? 600 : 400, color: i === 0 ? 'var(--signal-hypothesis)' : 'var(--text-secondary)' }}>{d.day}</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>{d.date}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Two columns: glossary heatmap + mastery list */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24 }}>
          <div className="card" style={{ padding: 20 }}>
            <div className="row" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
              <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase' }}>Mapa térmico del glosario · 66 términos</div>
              <div className="row" style={{ gap: 10 }}>
                {[['','sin tocar'],['lv1','nuevo'],['lv2','aprendiendo'],['lv3','sólido'],['lv4','dominado']].map(([lv, lbl]) => (
                  <div key={lbl} className="row" style={{ gap: 4 }}>
                    <span className={`heat-cell ${lv}`} style={{ width: 10, height: 10 }}/>
                    <span className="txt-xs txt-ter">{lbl}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="heat-grid">
              {heatStates.map((lv, i) => (
                <div key={i} className={`heat-cell ${lv}`} title={`Término ${i+1}`}/>
              ))}
            </div>
            <div className="divider"></div>
            <div className="row" style={{ gap: 12 }}>
              <span className="txt-xs txt-sec">Términos pendientes de repaso:</span>
              <span className="chip chip-hypothesis">P/E forward</span>
              <span className="chip chip-hypothesis">SBC abusivo</span>
              <span className="chip chip-hypothesis">PEG</span>
            </div>
          </div>

          <div className="card" style={{ padding: 20 }}>
            <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 12 }}>Historial de mastery</div>
            <div className="col" style={{ gap: 10 }}>
              {masteryHistory.map(m => (
                <div key={m.ep} style={{ paddingBottom: 10, borderBottom: '1px solid var(--border-subtle)' }}>
                  <div className="row" style={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <div>
                      <div className="mono txt-xs txt-ter">{m.ep}</div>
                      <div className="txt-sm">{m.name}</div>
                    </div>
                    {m.score
                      ? <span className="chip chip-pass">{m.score} / 100</span>
                      : <span className="chip chip-active">En curso</span>
                    }
                  </div>
                  <div className="txt-xs txt-ter mono" style={{ marginTop: 4 }}>{m.when}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <DisclaimerFooter />
    </div>
  );
};

Object.assign(window, { P01_Home, P02_Module, P13_Progress });