// meta.jsx — Course Home, Module Home, Episode Hub, Dashboard, Glossary index

const { useState: useStateM, useMemo: useMemoM } = React;

/* ─── Course Home ──────────────────────────────────────────── */
function CourseHome() {
  const { modules } = window.FinazData;
  const totalEpisodes = modules.reduce((s, m) => s + m.episodes, 0);
  const completed = 1, inProgress = 2;
  const masteryAvg = Math.round(modules.reduce((s, m) => s + m.mastery, 0) / modules.length);

  return (
    <div className="screen">
      <Topbar
        crumbs={["Curso C02-B"]}
        right={
          <>
            <button className="btn btn-quiet btn-sm">Ayuda</button>
            <div className="brand-glyph" style={{ background: 'var(--accent-soft)', color: 'var(--accent-deep)' }}>AC</div>
          </>
        }
      />

      <div className="scroll-y" style={{ padding: '32px 40px 24px', flex: 1 }}>
        {/* Hero */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 32, marginBottom: 36 }}>
          <div>
            <div className="kicker" style={{ marginBottom: 12 }}>Curso avanzado · C02-B · Nivel forense</div>
            <h1 className="editorial-display" style={{ marginBottom: 12, maxWidth: 640 }}>
              Análisis de Estados Financieros Avanzado
            </h1>
            <p style={{ color: 'var(--ink-muted)', fontSize: 15, lineHeight: 1.55, maxWidth: 560, marginBottom: 20 }}>
              Convertir estados financieros reportados en evidencia útil para calidad del beneficio, análisis forense, normalización y valoración.
            </p>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-primary">Continuar · M01.E03 · Accruals y Sloan ratio <Icon.arrowR /></button>
              <button className="btn">Ver índice completo</button>
              <span className="chip chip-mono" style={{ marginLeft: 8 }}>22–28 h · 37 episodios · 48 términos</span>
            </div>
          </div>

          {/* Progress card */}
          <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div className="kicker" style={{ marginBottom: 6 }}>Tu progreso</div>
                <div style={{ fontSize: 12, color: 'var(--ink-muted)' }}>Mastery medio</div>
              </div>
              <Ring value={masteryAvg} />
            </div>
            <hr className="rule"/>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, fontSize: 11.5 }}>
              <div>
                <div className="quiet kicker">Módulos</div>
                <div className="mono" style={{ fontSize: 15, marginTop: 4 }}>
                  <span className="strong">{completed}</span> <span className="quiet">/ {modules.length} hechos</span>
                </div>
              </div>
              <div>
                <div className="quiet kicker">Episodios</div>
                <div className="mono" style={{ fontSize: 15, marginTop: 4 }}>
                  <span className="strong">5</span> <span className="quiet">/ {totalEpisodes}</span>
                </div>
              </div>
              <div>
                <div className="quiet kicker">Glosario</div>
                <div className="mono" style={{ fontSize: 15, marginTop: 4 }}>
                  <span className="strong">14</span> <span className="quiet">/ 48 vistos</span>
                </div>
              </div>
              <div>
                <div className="quiet kicker">Próxima recall</div>
                <div className="mono" style={{ fontSize: 15, marginTop: 4 }}>
                  <span className="strong">hoy</span> <span className="quiet">· day-7</span>
                </div>
              </div>
            </div>
            <div className="progress-bar"><div className="progress-bar-fill" style={{ width: `${masteryAvg}%` }}/>
              <div className="progress-bar-mark" style={{ left: '75%' }}/></div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-quiet)', display: 'flex', justifyContent: 'space-between' }}>
              <span>Empezaste el 03 abr</span>
              <span>Umbral mastery <span className="mono">75%</span></span>
            </div>
          </div>
        </div>

        {/* Modules */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
          <h2 style={{ fontSize: 18 }}>Módulos del curso</h2>
          <span className="kicker">6 módulos · 37 episodios</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {modules.map(m => <ModuleCard key={m.id} m={m} />)}
        </div>

        {/* Secondary */}
        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          <SecondaryCard
            kicker="Referencia"
            title="Glosario"
            sub="48 términos en 8 categorías · 14 consultados"
            icon={<Icon.book />}
          />
          <SecondaryCard
            kicker="Proyecto final"
            title="Forensic Report Studio"
            sub="Bloqueado · disponible al completar M05.E07"
            icon={<Icon.doc />}
            locked
          />
          <SecondaryCard
            kicker="Métricas"
            title="Dashboard de progreso"
            sub="Mastery + spaced recall · day 1 · 7 · 30"
            icon={<Icon.chart />}
          />
        </div>
      </div>

      <Disclaimer />
    </div>
  );
}

function ModuleCard({ m }) {
  const statusLine = m.status === 'done' ? `${m.episodes} epis. · ${m.hours} · ✓ completado`
                  : m.status === 'now'  ? `${m.episodes} epis. · ${m.hours} · en progreso`
                  : m.status === 'lock' ? `${m.episodes} epis. · ${m.hours} · bloqueado`
                  : `${m.episodes} epis. · ${m.hours}`;

  return (
    <div className="mod-card">
      <div className="mod-card-head">
        <span className="mod-no">{m.n}</span>
        <StatusPill status={m.status} />
      </div>
      <div>
        <div className="mod-title">{m.title}</div>
        <div style={{ color: 'var(--ink-muted)', fontSize: 12, marginTop: 6, lineHeight: 1.4 }}>{m.sub}</div>
      </div>
      <div className="mod-meta">
        <span className="mono">{statusLine}</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div className="progress-bar" style={{ flex: 1 }}>
          <div className="progress-bar-fill" style={{ width: `${m.mastery}%` }}/>
          <div className="progress-bar-mark" style={{ left: '75%' }}/>
        </div>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)', minWidth: 28, textAlign: 'right' }}>
          {m.mastery}%
        </span>
      </div>
    </div>
  );
}

function SecondaryCard({ kicker, title, sub, icon, locked }) {
  return (
    <div className="mod-card" style={{ opacity: locked ? 0.6 : 1 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div className="kicker">{kicker}</div>
        <div style={{ color: 'var(--ink-muted)' }}>{locked ? <Icon.lock /> : icon}</div>
      </div>
      <div className="mod-title" style={{ fontSize: 15 }}>{title}</div>
      <div style={{ fontSize: 12, color: 'var(--ink-muted)' }}>{sub}</div>
    </div>
  );
}

/* ─── Module Home (M01) ────────────────────────────────────── */
function ModuleHomeM01() {
  const { m01Episodes } = window.FinazData;
  return (
    <div className="screen">
      <Topbar crumbs={["Curso C02-B", "M01 · Calidad del beneficio"]} mastery={42} />
      <div className="scroll-y" style={{ padding: '32px 40px 24px', flex: 1 }}>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 32, marginBottom: 28 }}>
          <div>
            <div className="kicker" style={{ marginBottom: 12 }}>Módulo 01 · 7 episodios · ≈ 4 h</div>
            <h1 className="editorial-display" style={{ marginBottom: 14, maxWidth: 620 }}>
              Calidad del beneficio
            </h1>
            <p style={{ color: 'var(--ink-muted)', fontSize: 14.5, lineHeight: 1.55, maxWidth: 620 }}>
              Este capítulo convierte el EPS en una hipótesis que debe pasar por <strong style={{ color: 'var(--ink)' }}>caja, recurrencia,
              working capital y owner earnings</strong>. La interactividad se centra en calculadoras y casos donde el alumno ve que el
              mismo beneficio puede tener calidades radicalmente distintas.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
              <button className="btn btn-primary">Empezar siguiente · E01 <Icon.arrowR /></button>
              <button className="btn">Ver gate del módulo</button>
            </div>
          </div>
          <div className="card" style={{ alignSelf: 'start' }}>
            <div className="kicker" style={{ marginBottom: 10 }}>Objetivo del módulo</div>
            <div style={{ fontSize: 12.5, lineHeight: 1.55 }}>
              Al terminar serás capaz de emitir un <span className="hl">veredicto de calidad del beneficio</span> sobre cualquier
              empresa con suficiente información, usando lenguaje prudente y separando dato observable de juicio.
            </div>
            <hr className="rule" style={{ margin: '14px 0' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: 'var(--ink-muted)' }}>
              <span>Términos clave</span><span className="mono strong">11</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: 'var(--ink-muted)' }}>
              <span>Datasets</span><span className="mono strong">3</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: 'var(--ink-muted)' }}>
              <span>Gate final</span><span className="mono strong">E07</span>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <h3 style={{ fontSize: 14 }}>Episodios</h3>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 11.5, color: 'var(--ink-muted)' }}>
            <span><span className="status-dot done" /> Completado</span>
            <span><span className="status-dot now"  /> En progreso</span>
            <span><span className="status-dot next" /> Siguiente</span>
            <span><span className="status-dot lock" /> Bloqueado</span>
          </div>
        </div>

        <div style={{ background: 'var(--bg-card)', border: '0.5px solid var(--rule)', borderRadius: 'var(--radius-md)' }}>
          {m01Episodes.map((e, i) => (
            <div key={e.id} style={{
              display: 'grid',
              gridTemplateColumns: '52px 1fr 90px 80px 56px 28px',
              gap: 14, padding: '14px 18px', alignItems: 'center',
              borderBottom: i < m01Episodes.length - 1 ? '0.5px solid var(--rule)' : 'none',
              cursor: e.status !== 'lock' ? 'pointer' : 'not-allowed',
              opacity: e.status === 'lock' ? 0.55 : 1,
            }}>
              <div className="mono strong" style={{ fontSize: 13, color: 'var(--ink-muted)' }}>
                {e.gate ? <span style={{ color: 'var(--amber)', fontWeight: 700 }}>GATE</span> : e.n}
              </div>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--ink)' }}>
                  {e.title}
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-muted)', marginTop: 3 }}>
                  <em>{e.big}</em>
                </div>
              </div>
              <span className="chip chip-mono">{e.arch}</span>
              <span className="mono" style={{ fontSize: 11.5, color: 'var(--ink-muted)' }}>{e.min} min</span>
              <span className="mono" style={{ fontSize: 11.5, color: 'var(--ink-muted)', textAlign: 'right' }}>
                {e.status === 'now' ? `${e.mastery}%` : e.status === 'lock' ? '—' : `${e.mastery}%`}
              </span>
              <span style={{ color: 'var(--ink-quiet)' }}>{e.status === 'lock' ? <Icon.lock /> : <Icon.arrowR />}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 24, fontSize: 11.5, color: 'var(--ink-quiet)' }}>
          <span className="mono">resource_type</span>: badge tipográfico, sin color. El color se reserva al Semáforo Finaz.
        </div>
      </div>
      <Disclaimer />
    </div>
  );
}

/* ─── Episode Hub (M01.E01) ────────────────────────────────── */
function EpisodeHubM01E01() {
  const terms = [
    { id: "accruals", lbl: "Accruals" },
    { id: "sloan", lbl: "Sloan ratio" },
    { id: "ownerearnings", lbl: "Owner earnings" },
    { id: "cfo", lbl: "CFO" },
    { id: "oneoffs", lbl: "One-offs" },
    { id: "recurrence", lbl: "Recurrencia" },
    { id: "earnpwr", lbl: "Earning power" },
  ];
  return (
    <div className="screen">
      <Topbar crumbs={["Curso C02-B", "M01", "E01"]} mastery={0} />
      <div className="scroll-y" style={{ padding: '40px 56px', flex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 48 }}>
          <div>
            <div className="kicker" style={{ marginBottom: 12 }}>M01 · E01 · ≈ 30 min · VIDEO + Q-MAP</div>
            <h1 style={{ fontSize: 26, fontWeight: 550, lineHeight: 1.25, letterSpacing: '-0.022em', marginBottom: 8, color: 'var(--ink)' }}>
              La calidad del beneficio: cuatro pruebas antes de creer el EPS
            </h1>
            <div style={{ marginTop: 24 }}>
              <div className="kicker" style={{ marginBottom: 10 }}>Pregunta rectora</div>
              <h2 className="editorial-display" style={{ fontSize: 30 }}>
                «Dos empresas ganan 100 M€. ¿Cuál merece múltiplo mayor?»
              </h2>
            </div>

            <hr className="rule" style={{ margin: '28px 0' }}/>

            <div className="kicker" style={{ marginBottom: 10 }}>Objetivo de aprendizaje</div>
            <p style={{ fontSize: 14, color: 'var(--ink)', maxWidth: 580, marginBottom: 22 }}>
              Reconocer las cuatro pruebas de calidad del beneficio (<em>conversión a caja, recurrencia, intensidad de estimaciones,
              trazabilidad en notas</em>) y clasificar señales reales en cada cuadrante con justificación.
            </p>

            <div className="kicker" style={{ marginBottom: 10 }}>Plan del episodio</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {[
                { n: "S1", lbl: "Hook · story panel", min: "5 min" },
                { n: "S2", lbl: "Fórmula anotada", min: "6 min" },
                { n: "S3", lbl: "Lab · Q-MAP 16 chips", min: "14 min" },
                { n: "S4", lbl: "Mini-memo · 90 palabras", min: "5 min" },
              ].map(s => (
                <div key={s.n} className="card" style={{ padding: 14 }}>
                  <div className="mono strong" style={{ fontSize: 11, color: 'var(--accent-deep)' }}>{s.n}</div>
                  <div style={{ fontSize: 12.5, marginTop: 4, marginBottom: 6, fontWeight: 500 }}>{s.lbl}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: 'var(--ink-quiet)' }}>{s.min}</div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
              <button className="btn btn-primary">Empezar escena S1 <Icon.arrowR /></button>
              <button className="btn">Revisar términos primero</button>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div className="card">
              <div className="kicker" style={{ marginBottom: 10 }}>Términos que aparecerán <span style={{ marginLeft: 6 }}>· {terms.length}</span></div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {terms.map(t => (
                  <InfoI key={t.id} termId={t.id}>{t.lbl}</InfoI>
                ))}
              </div>
              <div style={{ fontSize: 11, color: 'var(--ink-quiet)', marginTop: 12 }}>
                Toca <i className="info-i" style={{ display: 'inline-grid' }}>i</i> para abrir la flash card.
              </div>
            </div>
            <div className="card">
              <div className="kicker" style={{ marginBottom: 10 }}>Dataset</div>
              <span className="chip chip-mono">dataset_quality_earnings_cases.csv</span>
              <div style={{ fontSize: 11.5, color: 'var(--ink-muted)', marginTop: 8 }}>
                6 compañías sintéticas · 17 columnas
              </div>
            </div>
            <div className="card">
              <div className="kicker" style={{ marginBottom: 10 }}>Voces de la escena</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span className="vp-voice s">SO</span> Locutora Sofía
                  <span className="quiet" style={{ marginLeft: 'auto', fontSize: 10.5 }}>narrativa</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span className="vp-voice m">MA</span> Analista Mateo
                  <span className="quiet" style={{ marginLeft: 'auto', fontSize: 10.5 }}>primer pensamiento</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span className="vp-voice t">TF</span> Tutor Finaz
                  <span className="quiet" style={{ marginLeft: 'auto', fontSize: 10.5 }}>sistema</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Disclaimer />
    </div>
  );
}

/* ─── Glossary index ──────────────────────────────────────── */
function GlossaryIndex() {
  const { glossary } = window.FinazData;
  const [cat, setCat] = useStateM("all");
  const [q, setQ] = useStateM("");
  const cats = useMemoM(() => {
    const c = {};
    glossary.forEach(g => { c[g.cat] = (c[g.cat] || 0) + 1; });
    return c;
  }, [glossary]);
  const filtered = glossary.filter(g =>
    (cat === "all" || g.cat === cat) &&
    (q === "" || g.term.toLowerCase().includes(q.toLowerCase()))
  );
  const consulted = useMemoM(() => new Set(glossary.slice(0, 14).map(g => g.id)), []);

  return (
    <div className="screen">
      <Topbar crumbs={["Curso C02-B", "Glosario"]} />
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', flex: 1, minHeight: 0 }}>
        <div style={{ borderRight: '0.5px solid var(--rule)', padding: '24px 16px', background: 'var(--bg-elev-1)' }}>
          <div className="kicker" style={{ marginBottom: 12 }}>Categorías</div>
          <button onClick={() => setCat("all")}
            className="tutor-action"
            style={{ background: cat === "all" ? 'var(--bg)' : 'transparent', borderColor: cat === "all" ? 'var(--rule-strong)' : 'transparent', marginBottom: 4 }}>
            <span>Todas</span><span className="mono">{glossary.length}</span>
          </button>
          {Object.entries(cats).map(([c, n]) => (
            <button key={c} onClick={() => setCat(c)}
              className="tutor-action"
              style={{ background: cat === c ? 'var(--bg)' : 'transparent', borderColor: cat === c ? 'var(--rule-strong)' : 'transparent', marginBottom: 4 }}>
              <span>{c.replace(/_/g, ' ')}</span><span className="mono">{n}</span>
            </button>
          ))}

          <hr className="rule" style={{ margin: '14px 0' }}/>
          <div className="kicker" style={{ marginBottom: 8 }}>Tu progreso</div>
          <div style={{ fontSize: 12, color: 'var(--ink-muted)', lineHeight: 1.55 }}>
            Términos consultados <span className="strong mono">14 / 48</span><br/>
            Flash q. respondidas <span className="strong mono">9</span><br/>
            Tasa de acierto <span className="strong mono">67%</span>
          </div>
        </div>

        <div className="scroll-y" style={{ padding: '24px 32px' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
            <h1 style={{ fontSize: 22, fontWeight: 550, letterSpacing: '-0.022em' }}>Glosario · 48 términos</h1>
            <input
              value={q} onChange={e => setQ(e.target.value)}
              placeholder="Buscar término…"
              style={{
                font: 'inherit', fontSize: 12.5, padding: '7px 12px', border: '0.5px solid var(--rule-strong)',
                borderRadius: 'var(--radius-sm)', background: 'var(--bg-card)', color: 'var(--ink)',
                width: 240, outline: 'none',
              }}
            />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
            {filtered.map(t => (
              <div key={t.id} className="card" style={{ padding: 14 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ fontSize: 14, fontWeight: 600 }}>{t.term}</span>
                    {consulted.has(t.id) && <span className="chip chip-green" style={{ fontSize: 9.5 }}><Icon.check /> visto</span>}
                  </div>
                  <span className="chip chip-mono" style={{ fontSize: 9.5 }}>{t.cat}</span>
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-muted)', lineHeight: 1.5 }}>{t.def}</div>
                {t.formula !== "—" && (
                  <div className="mono" style={{ fontSize: 10.5, marginTop: 8, color: 'var(--ink-quiet)', background: 'var(--bg-elev-1)', padding: '4px 6px', borderRadius: 3, display: 'inline-block' }}>
                    {t.formula}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
      <Disclaimer />
    </div>
  );
}

/* ─── Dashboard de progreso ──────────────────────────────── */
function Dashboard() {
  const { modules } = window.FinazData;
  // recall calendar mock
  const recallDays = [
    { date: "L 19", count: 3, kind: "day-1" },
    { date: "M 20", count: 1, kind: "day-7" },
    { date: "X 21", count: 0, kind: "" },
    { date: "J 22", count: 2, kind: "day-7" },
    { date: "V 23", count: 1, kind: "day-30" },
    { date: "S 24", count: 0, kind: "" },
    { date: "D 25", count: 0, kind: "" },
  ];

  return (
    <div className="screen">
      <Topbar crumbs={["Curso C02-B", "Dashboard"]} />
      <div className="scroll-y" style={{ padding: '32px 40px 24px', flex: 1 }}>
        <h1 style={{ fontSize: 22, fontWeight: 550, marginBottom: 4 }}>Dashboard de progreso</h1>
        <p style={{ color: 'var(--ink-muted)', fontSize: 13, marginBottom: 24 }}>
          Mastery por módulo, calendario de spaced recall y diagnóstico de lenguaje.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 24 }}>
          {[
            { lbl: "Mastery medio", val: "22%", sub: "umbral 75%", spark: [10, 14, 18, 19, 22, 22] },
            { lbl: "Tiempo invertido", val: "5h 12m", sub: "estimado 22–28h", spark: [0, 1, 2, 3, 4, 5] },
            { lbl: "Términos consultados", val: "14 / 48", sub: "≥30 recomendado", spark: [2, 4, 6, 9, 12, 14] },
            { lbl: "Tasa overclaim", val: "18%", sub: "baja → mejora prudencia", spark: [42, 36, 28, 24, 20, 18] },
          ].map(s => (
            <div key={s.lbl} className="card">
              <div className="kicker">{s.lbl}</div>
              <div className="bignum" style={{ fontSize: 32, marginTop: 6 }}>{s.val}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 6 }}>
                <span style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{s.sub}</span>
                <Sparkline data={s.spark} width={64} height={18} />
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 18 }}>
          <div className="card">
            <h3 style={{ fontSize: 13, marginBottom: 14 }}>Mastery por módulo</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {modules.map(m => (
                <div key={m.id} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 50px', gap: 12, alignItems: 'center' }}>
                  <div>
                    <div className="mono strong" style={{ fontSize: 11 }}>{m.n}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--ink-quiet)' }}>{m.episodes} ep.</div>
                  </div>
                  <div className="progress-bar" style={{ height: 6 }}>
                    <div className="progress-bar-fill" style={{ width: `${m.mastery}%`, background: m.mastery >= 75 ? 'var(--green)' : m.mastery > 0 ? 'var(--accent)' : 'var(--rule-strong)' }}/>
                    <div className="progress-bar-mark" style={{ left: '75%' }}/>
                  </div>
                  <div className="mono tabular" style={{ fontSize: 11.5, textAlign: 'right' }}>{m.mastery}%</div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <h3 style={{ fontSize: 13, marginBottom: 14 }}>Spaced recall · esta semana</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
              {recallDays.map(d => (
                <div key={d.date} style={{
                  border: '0.5px solid var(--rule)', borderRadius: 'var(--radius-sm)',
                  padding: 8, textAlign: 'center', minHeight: 70,
                  background: d.count > 0 ? 'var(--accent-soft)' : 'var(--bg-elev-1)',
                }}>
                  <div className="mono" style={{ fontSize: 9.5, color: 'var(--ink-muted)', textTransform: 'uppercase' }}>{d.date}</div>
                  {d.count > 0 ? (
                    <>
                      <div className="bignum" style={{ fontSize: 22, marginTop: 4, color: 'var(--accent-deep)' }}>{d.count}</div>
                      <div className="mono" style={{ fontSize: 9, color: 'var(--ink-quiet)' }}>{d.kind}</div>
                    </>
                  ) : (
                    <div style={{ fontSize: 10, color: 'var(--ink-quiet)', marginTop: 14 }}>—</div>
                  )}
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, fontSize: 11, color: 'var(--ink-muted)', lineHeight: 1.5 }}>
              Próxima sesión <span className="strong">hoy</span> · 3 tarjetas de M00.E00 (day-1) y 1 de M01.E01 (day-7).
            </div>
          </div>
        </div>

        <div className="card" style={{ marginTop: 18 }}>
          <h3 style={{ fontSize: 13, marginBottom: 14 }}>Diagnóstico de lenguaje · últimos 10 memos</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 12 }}>
            {[
              { lbl: "overclaim detectado", n: 6, color: "var(--amber)", hint: "Verbos demasiado fuertes" },
              { lbl: "underclaim detectado", n: 2, color: "var(--ink-muted)", hint: "Hipótesis sin compromiso" },
              { lbl: "lenguaje prohibido bloqueado", n: 11, color: "var(--red)", hint: "‘compra’ / ‘vende’ / ‘fraude’" },
              { lbl: "memos con evidencia completa", n: 4, color: "var(--green)", hint: "Rúbrica ≥ 75%" },
            ].map(s => (
              <div key={s.lbl} style={{ borderLeft: `2px solid ${s.color}`, paddingLeft: 12 }}>
                <div className="kicker" style={{ marginBottom: 4 }}>{s.lbl}</div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 500 }}>{s.n}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{s.hint}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <Disclaimer />
    </div>
  );
}

Object.assign(window, { CourseHome, ModuleHomeM01, EpisodeHubM01E01, GlossaryIndex, Dashboard });