/* global React, GLOSSARY, RubricMeter, Banner, Watermark, DisclaimerFooter */
// P08 Glossary flashcard · P09 Tutor drawer · P10 Mastery · P11 Spaced recall · P12 Quiz

const { useState: useM } = React;

// ============================================================================
// P08 — Glossary flashcard (expanded)
// ============================================================================
const P08_Glossary = () => {
  const entry = GLOSSARY.pe_forward;
  return (
    <div className="artboard-root" style={{ padding: 0 }}>
      <div className="sticky-header" style={{ padding: '14px 32px' }}>
        <div className="row" style={{ gap: 8 }}>
          <span className="txt-xs txt-ter mono">GLOSARIO · 66 TÉRMINOS</span>
          <span className="txt-ter">/</span>
          <span className="txt-sm">P/E forward</span>
        </div>
      </div>

      <div style={{ maxWidth: 920, margin: '0 auto', padding: '32px' }}>
        {/* Header */}
        <div className="row" style={{ gap: 10, marginBottom: 10 }}>
          <span className="badge" style={{ borderColor: 'var(--accent)', color: 'var(--accent)' }}>FLASHCARD</span>
          <span className="badge">categoría · métrica</span>
          <span className="badge">M01 · E02</span>
        </div>
        <h1 className="serif" style={{ fontSize: 'var(--size-3xl)', margin: '0 0 14px 0', fontWeight: 400 }}>
          P/E forward
        </h1>
        <p className="serif" style={{ fontSize: 'var(--size-xl)', lineHeight: 1.45, margin: '0 0 28px 0', color: 'var(--text-secondary)', maxWidth: 720 }}>
          {entry.definition}
        </p>

        {/* Formula */}
        <div style={{ marginBottom: 28 }}>
          <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 8 }}>Fórmula</div>
          <div className="formula" style={{ fontSize: 'var(--size-lg)' }}>
            P/E<sub>fwd</sub> <span className="op">=</span> <span className="var">Price</span> <span className="op">/</span> <span className="var">EPS</span><sub>NTM consenso</sub>
          </div>
        </div>

        {/* 3-column: ejemplo / por qué / misconcepción */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 28 }}>
          <div className="card" style={{ padding: 16 }}>
            <div className="row" style={{ gap: 6, marginBottom: 8 }}>
              <span className="i-icon" style={{ display: 'inline-grid', placeItems: 'center', width: 18, height: 18, borderRadius: '50%', background: 'var(--accent-muted)', color: 'var(--signal-driver)', fontSize: 10, fontFamily: 'var(--font-mono)' }}>·</span>
              <span className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase' }}>Ejemplo</span>
            </div>
            <p style={{ margin: 0, fontSize: 'var(--size-sm)', lineHeight: 1.55 }}>{entry.example}</p>
          </div>
          <div className="card" style={{ padding: 16, borderColor: 'rgba(91,198,143,0.3)', background: 'rgba(91,198,143,0.04)' }}>
            <div className="row" style={{ gap: 6, marginBottom: 8 }}>
              <span style={{ color: 'var(--signal-pass)' }}>✓</span>
              <span className="txt-xs mono" style={{ textTransform: 'uppercase', color: 'var(--signal-pass)' }}>Por qué importa</span>
            </div>
            <p style={{ margin: 0, fontSize: 'var(--size-sm)', lineHeight: 1.55 }}>{entry.why_matters}</p>
          </div>
          <div className="card" style={{ padding: 16, borderColor: 'rgba(224,122,95,0.3)', background: 'rgba(224,122,95,0.04)' }}>
            <div className="row" style={{ gap: 6, marginBottom: 8 }}>
              <span style={{ color: 'var(--signal-warning)' }}>⚠</span>
              <span className="txt-xs mono" style={{ textTransform: 'uppercase', color: 'var(--signal-warning)' }}>Misconcepción</span>
            </div>
            <p style={{ margin: 0, fontSize: 'var(--size-sm)', lineHeight: 1.55 }}>{entry.misconception}</p>
          </div>
        </div>

        {/* Related terms */}
        <div style={{ marginBottom: 28 }}>
          <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 12 }}>Términos relacionados</div>
          <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
            <button className="chip">P/E trailing</button>
            <button className="chip">Consenso sell-side calibration</button>
            <button className="chip">Earnings depurados</button>
            <button className="chip">PEG ratio</button>
          </div>
        </div>

        {/* Bottom actions */}
        <div className="card" style={{ padding: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="row" style={{ gap: 12 }}>
            <span className="chip chip-pass">✓ consultado en M01.E01</span>
            <span className="chip chip-hypothesis">en cola de recall · día 7</span>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <button className="btn">Volver al episodio</button>
            <button className="btn btn-primary">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M8 3l5 5-5 5" stroke="currentColor" strokeWidth="1.5"/></svg>
              Crear flashcard de repaso
            </button>
          </div>
        </div>
      </div>
      <DisclaimerFooter />
    </div>
  );
};

// ============================================================================
// P09 — Tutor drawer (as standalone screen showing the conversation context)
// ============================================================================
const P09_Tutor = () => {
  return (
    <div className="artboard-root" style={{ background: 'var(--surface-0)' }}>
      <div className="sticky-header" style={{ padding: '14px 32px' }}>
        <div className="row" style={{ gap: 8 }}>
          <span className="txt-xs txt-ter mono">EPISODIO M01·E02 · TUTOR DRAWER</span>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 480px', minHeight: 800 }}>
        {/* Dimmed prototype of the underlying shell */}
        <div style={{ padding: 32, opacity: 0.35, pointerEvents: 'none' }}>
          <h2 className="serif" style={{ fontSize: 'var(--size-xl)', marginBottom: 12 }}>S3 · Lab CALC en curso</h2>
          <div className="card" style={{ padding: 20, marginBottom: 12 }}>
            <div className="placeholder-img" style={{ height: 120, marginBottom: 12 }}>tabla 4 empresas</div>
            <div className="placeholder-img" style={{ height: 80 }}>banner feedback</div>
          </div>
        </div>

        {/* Tutor drawer */}
        <div style={{ background: 'var(--surface-1)', borderLeft: '1px solid var(--border-strong)', padding: 24, display: 'flex', flexDirection: 'column', gap: 16, boxShadow: '-12px 0 32px rgba(0,0,0,0.5)' }}>
          <div className="row" style={{ justifyContent: 'space-between' }}>
            <div className="row" style={{ gap: 12 }}>
              <div className="voice-avatar voice-tutor" style={{ width: 36, height: 36, position: 'relative' }}>
                <span className="voice-glyph tutor" style={{ width: 24, height: 24 }}/>
              </div>
              <div>
                <div className="bold">Tutor Finaz</div>
                <div className="txt-xs txt-ter">conectado · scope acotado</div>
              </div>
            </div>
            <button className="btn btn-ghost">✕</button>
          </div>

          <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase' }}>Acciones permitidas</div>
          <div className="row" style={{ gap: 6, flexWrap: 'wrap' }}>
            <button className="chip chip-active">Explica fórmula</button>
            <button className="chip">Pista</button>
            <button className="chip">Pregúntame socráticamente</button>
            <button className="chip">Abrir glosario</button>
            <button className="chip">Mapear a afirmación</button>
            <button className="chip">Sugiere remediación</button>
          </div>

          <div className="divider"></div>

          {/* Conversation */}
          <div className="col" style={{ gap: 12, flex: 1, overflowY: 'auto' }}>
            <div className="voice-card voice-mateo" style={{ background: 'var(--surface-2)' }}>
              <div className="voice-avatar"><span className="voice-glyph mateo"/></div>
              <div>
                <div className="voice-name">Julia (tú)</div>
                <div className="voice-text" style={{ fontSize: 'var(--size-sm)', fontFamily: 'var(--font-text)' }}>
                  Explica por qué en CICL.MC el P/E forward también engaña.
                </div>
              </div>
            </div>

            <div className="voice-card voice-tutor">
              <div className="voice-avatar"><span className="voice-glyph tutor"/></div>
              <div>
                <div className="voice-name">Tutor Finaz</div>
                <div className="voice-text" style={{ fontSize: 'var(--size-sm)', fontFamily: 'var(--font-text)' }}>
                  Buena pregunta. En una cíclica, el consenso sell-side suele seguir el ciclo: cuando los EPS reportados (TTM) están en pico, los analistas extrapolan al alza y el EPS_NTM también es alto. <br/><br/>
                  Resultado: <span className="mono" style={{ color: 'var(--signal-driver)' }}>P/E_fwd = Price / EPS_NTM</span> queda aparentemente bajo, pero EPS_NTM no es sostenible. Cuando llega la siguiente parte del ciclo, el "fwd" real puede ser 30–50% más alto.
                </div>
                <div className="row" style={{ marginTop: 10, gap: 8 }}>
                  <button className="chip">Mapear a glosario · CAPE</button>
                  <button className="chip">Mostrar caso histórico</button>
                </div>
              </div>
            </div>

            <div className="voice-card voice-mateo" style={{ background: 'var(--surface-2)' }}>
              <div className="voice-avatar"><span className="voice-glyph mateo"/></div>
              <div>
                <div className="voice-name">Julia (tú)</div>
                <div className="voice-text" style={{ fontSize: 'var(--size-sm)', fontFamily: 'var(--font-text)' }}>
                  Entonces dime si CICL.MC es compra a este precio.
                </div>
              </div>
            </div>

            <div className="card" style={{ padding: 14, borderLeft: '3px solid var(--signal-warning)', background: 'var(--tint-warning)' }}>
              <div className="row" style={{ gap: 8, marginBottom: 6 }}>
                <span style={{ color: 'var(--signal-warning)' }}>⚠</span>
                <span className="txt-xs mono" style={{ textTransform: 'uppercase', color: 'var(--signal-warning)' }}>forbidden_action interceptada</span>
              </div>
              <div className="txt-sm" style={{ lineHeight: 1.5 }}>
                No emito recomendaciones de <span className="mono" style={{ color: 'var(--signal-fail)' }}>compra</span>/<span className="mono" style={{ color: 'var(--signal-fail)' }}>venta</span>. Mi rol es pedagógico.
                <br/><br/>
                Lo que sí puedo: ayudarte a estructurar la <strong>tesis</strong>, listar los <strong>drivers verificables</strong>, o proponerte una <strong>anti-tesis falsable</strong>. ¿Por dónde empezamos?
              </div>
            </div>
          </div>

          {/* Composer */}
          <div style={{ position: 'relative' }}>
            <input className="input" placeholder="Pregúntame sobre P/E, drivers, calibración…" style={{ padding: '12px 40px 12px 12px', fontSize: 'var(--size-sm)' }}/>
            <button className="btn btn-primary" style={{ position: 'absolute', right: 4, top: 4, padding: '6px 8px' }}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 8l12-6-4 14-2-6-6-2z" stroke="currentColor" strokeLinejoin="round"/></svg>
            </button>
          </div>
          <div className="txt-xs txt-ter" style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: 10 }}>
            Este tutor no da consejo de inversión. No accede a datos en tiempo real. Es asistente pedagógico con scope acotado al material del curso.
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================================
// P10 — Mastery result + feedback bank
// ============================================================================
const P10_Mastery = () => {
  const score = 83;
  const rubric = [
    { label: 'Precisión técnica',           score: 92, weight: 25 },
    { label: 'Cita de fuente y limitación', score: 88, weight: 20 },
    { label: 'Lenguaje prudente',           score: 95, weight: 15 },
    { label: 'Convergencia analítica',      score: 72, weight: 25 },
    { label: 'Utilidad para valoración',    score: 78, weight: 15 },
  ];

  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 · M01 · E02 · MASTERY</span>
        </div>
      </div>

      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '40px 32px' }}>
        {/* Score hero */}
        <div className="row" style={{ marginBottom: 12 }}>
          <span className="badge" style={{ borderColor: 'var(--signal-pass)', color: 'var(--signal-pass)' }}>MASTERY SUPERADO</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 40, marginBottom: 40 }}>
          <div>
            <div className="mono" style={{ fontSize: 112, lineHeight: 1, color: 'var(--signal-pass)', fontWeight: 300 }}>{score}</div>
            <div className="txt-sec mono" style={{ marginTop: 4 }}>/ 100 · threshold 75</div>
            <div style={{ marginTop: 18, height: 8, background: 'var(--surface-3)', borderRadius: 4, position: 'relative' }}>
              <div style={{ width: `${score}%`, height: '100%', background: 'var(--signal-pass)', borderRadius: 4 }}/>
              <div style={{ position: 'absolute', left: '75%', top: -4, bottom: -4, width: 1, background: 'var(--text-secondary)' }}/>
              <div style={{ position: 'absolute', left: '75%', bottom: -22, transform: 'translateX(-50%)', fontSize: 10, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)' }}>75 · threshold</div>
            </div>
          </div>

          <div>
            <h1 className="serif" style={{ fontSize: 'var(--size-2xl)', margin: '0 0 12px 0', fontWeight: 400, lineHeight: 1.2 }}>
              Trailing vs forward · veredicto procesado
            </h1>
            <p className="serif txt-sec" style={{ fontSize: 'var(--size-lg)', lineHeight: 1.55, margin: '0 0 20px 0' }}>
              Has identificado correctamente los 4 casos. Tu memo cita fuentes y limitaciones; el lenguaje es prudente. Una dimensión (convergencia analítica) queda por debajo del 80, principalmente en CICL.MC donde tu argumento de normalized podría apoyarse en CAPE explícito.
            </p>

            {/* Rubric breakdown */}
            <div className="card" style={{ padding: 18 }}>
              <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 14 }}>Rúbrica multidimensional · 5 dimensiones ponderadas</div>
              {rubric.map(r => (
                <div key={r.label} className="rubric-row">
                  <div className="rubric-label">
                    <span>{r.label} <span className="txt-ter mono" style={{ fontSize: 11 }}>· peso {r.weight}%</span></span>
                    <span className="rubric-value">{r.score}</span>
                  </div>
                  <div className="rubric-bar">
                    <div className={`rubric-fill ${r.score >= 75 ? 'pass' : r.score >= 50 ? 'warn' : 'fail'}`} style={{ width: `${r.score}%` }}/>
                    <div className="rubric-threshold" style={{ left: '75%' }}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Feedback bank citation */}
        <div className="card" style={{ padding: 22, marginBottom: 24, borderLeft: '3px solid var(--signal-pass)' }}>
          <div className="row" style={{ marginBottom: 10 }}>
            <span className="badge" style={{ borderColor: 'var(--signal-pass)', color: 'var(--signal-pass)' }}>FEEDBACK_BANK · EXCELLENT</span>
            <span className="badge">cita textual del YAML</span>
          </div>
          <div className="serif italic" style={{ fontSize: 'var(--size-xl)', lineHeight: 1.45, color: 'var(--text-primary)' }}>
            “Buen razonamiento: conectas dato, materialidad y siguiente evidencia. Tu memo distingue arquetipos con calibración del consenso explícita y no usa atajos lingüísticos.”
          </div>
          <div className="row" style={{ marginTop: 12, gap: 10 }}>
            <span className="chip chip-pass">precisión ✓</span>
            <span className="chip chip-pass">lenguaje ✓</span>
            <span className="chip chip-hypothesis">convergencia · pulir CICL.MC</span>
          </div>
        </div>

        {/* Next steps */}
        <div className="card" style={{ padding: 22 }}>
          <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 14 }}>Próximos pasos</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            <div style={{ padding: 16, borderRadius: 'var(--r-md)', border: '1px solid var(--accent)', background: 'var(--accent-muted)' }}>
              <div className="txt-xs mono" style={{ color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 6 }}>Recomendado</div>
              <div className="serif" style={{ fontSize: 'var(--size-md)', fontWeight: 500, marginBottom: 6 }}>Continuar a M01·E03</div>
              <div className="txt-xs txt-sec">PEG ratio: cuando Peter Lynch te ayuda y cuando te miente.</div>
              <button className="btn btn-primary" style={{ marginTop: 10, width: '100%', justifyContent: 'center' }}>Siguiente episodio →</button>
            </div>
            <div className="card" style={{ padding: 16 }}>
              <div className="txt-xs mono txt-ter" style={{ textTransform: 'uppercase', marginBottom: 6 }}>Recall programado</div>
              <div className="serif" style={{ fontSize: 'var(--size-md)', fontWeight: 500, marginBottom: 6 }}>3 cards a día 1 / 7 / 30</div>
              <ul className="col" style={{ gap: 3, fontSize: 11, color: 'var(--text-secondary)', marginTop: 6 }}>
                <li>• P/E forward — día 1</li>
                <li>• Consenso calibration — día 7</li>
                <li>• Normalized cycle — día 30</li>
              </ul>
            </div>
            <div className="card" style={{ padding: 16 }}>
              <div className="txt-xs mono txt-ter" style={{ textTransform: 'uppercase', marginBottom: 6 }}>Refuerzo opcional</div>
              <div className="serif" style={{ fontSize: 'var(--size-md)', fontWeight: 500, marginBottom: 6 }}>Quiz pool informal</div>
              <div className="txt-xs txt-sec">3 preguntas tipo aplicación / anti-tesis / transferencia.</div>
              <button className="btn" style={{ marginTop: 10, width: '100%', justifyContent: 'center' }}>Abrir quiz</button>
            </div>
          </div>
        </div>
      </div>
      <DisclaimerFooter />
    </div>
  );
};

// ============================================================================
// P11 — Spaced recall
// ============================================================================
const P11_Recall = () => {
  const [side, setSide] = useM('front');
  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">SPACED RECALL · SESIÓN DEL DÍA</span>
            <span className="txt-ter">/</span>
            <span className="txt-sm">19 may · 2 / 3 cards</span>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <span className="mono txt-xs txt-sec">04:12 transcurrido</span>
            <button className="btn btn-ghost">Pausar sesión</button>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 720, margin: '0 auto', padding: '40px 32px' }}>
        {/* Progress */}
        <div className="row" style={{ marginBottom: 28, gap: 4 }}>
          {[true, true, false].map((done, i) => (
            <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: done ? 'var(--signal-pass)' : 'var(--surface-3)' }}/>
          ))}
        </div>

        {/* Card */}
        <div className="card" style={{ padding: 0, overflow: 'hidden', minHeight: 360, display: 'flex', flexDirection: 'column' }}>
          <div className="row" style={{ justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)' }}>
            <div className="row" style={{ gap: 8 }}>
              <span className="badge" style={{ borderColor: 'var(--signal-hypothesis)', color: 'var(--signal-hypothesis)' }}>DÍA 7</span>
              <span className="badge">M01 · E02</span>
              <span className="badge">PEG ratio</span>
            </div>
            <span className="mono txt-xs txt-ter">card 3 / 3</span>
          </div>

          <div style={{ flex: 1, padding: '40px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            {side === 'front' ? (
              <>
                <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 16, textAlign: 'center' }}>Pregunta</div>
                <p className="serif" style={{ fontSize: 'var(--size-2xl)', lineHeight: 1.4, textAlign: 'center', fontWeight: 400, margin: 0 }}>
                  Una empresa tiene PEG 0,7. ¿Qué tres elementos necesitas verificar antes de llamar a eso "Lynch sweet spot"?
                </p>
                <div className="row" style={{ justifyContent: 'center', marginTop: 28 }}>
                  <button className="btn btn-primary" style={{ padding: '12px 22px' }} onClick={() => setSide('back')}>
                    Revelar respuesta · Space
                  </button>
                </div>
              </>
            ) : (
              <>
                <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 12 }}>Respuesta · evidencia</div>
                <ol className="serif" style={{ fontSize: 'var(--size-lg)', lineHeight: 1.55, paddingLeft: 24, margin: 0 }}>
                  <li style={{ marginBottom: 8 }}>El <span style={{ color: 'var(--signal-driver)' }}>g del denominador</span> es defendible (no consenso optimista ni histórico irrepetible).</li>
                  <li style={{ marginBottom: 8 }}>Los <span style={{ color: 'var(--signal-driver)' }}>earnings están depurados</span> de one-offs y SBC abusivo.</li>
                  <li>El <span style={{ color: 'var(--signal-driver)' }}>g está bajo el techo sectorial</span> (ROIC × tasa de reinversión).</li>
                </ol>
                <div style={{ marginTop: 20, padding: 14, background: 'var(--surface-2)', borderRadius: 'var(--r-md)', borderLeft: '3px solid var(--accent)' }}>
                  <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 6 }}>Fuente</div>
                  <div className="txt-sm">M01.E03 · "PEG ratio: cuando Peter Lynch te ayuda y cuando te miente" · glosario `lynch_sweet_spot_quality`</div>
                </div>
              </>
            )}
          </div>

          {side === 'back' && (
            <div className="row" style={{ gap: 8, padding: '14px 18px', borderTop: '1px solid var(--border-subtle)' }}>
              <button className="btn" style={{ flex: 1, justifyContent: 'center', borderColor: 'rgba(216,92,92,0.4)', color: 'var(--signal-fail)' }}>
                Otra vez
                <span className="mono txt-xs" style={{ marginLeft: 6, opacity: 0.7 }}>1 día</span>
              </button>
              <button className="btn" style={{ flex: 1, justifyContent: 'center', borderColor: 'rgba(240,184,110,0.4)', color: 'var(--signal-hypothesis)' }}>
                Difícil
                <span className="mono txt-xs" style={{ marginLeft: 6, opacity: 0.7 }}>3 días</span>
              </button>
              <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
                Bien
                <span className="mono txt-xs" style={{ marginLeft: 6, opacity: 0.7 }}>14 días</span>
              </button>
              <button className="btn" style={{ flex: 1, justifyContent: 'center', borderColor: 'rgba(91,198,143,0.4)', color: 'var(--signal-pass)' }}>
                Fácil
                <span className="mono txt-xs" style={{ marginLeft: 6, opacity: 0.7 }}>30 días</span>
              </button>
            </div>
          )}
        </div>

        <div className="txt-xs txt-ter" style={{ marginTop: 18, textAlign: 'center', fontStyle: 'italic' }}>
          El intervalo se ajusta según tu rating. Sin nota: la auto-honestidad es el método.
        </div>
      </div>
      <DisclaimerFooter />
    </div>
  );
};

// ============================================================================
// P12 — Quiz pool retest
// ============================================================================
const P12_Quiz = () => {
  const [showRubric, setShowRubric] = useM(false);
  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">QUIZ POOL · RETEST INFORMAL</span>
            <span className="txt-ter">/</span>
            <span className="txt-sm">M01.E02 · pregunta 2 / 3</span>
          </div>
          <span className="chip chip-hypothesis">No bloquea progreso · auto-evaluación</span>
        </div>
      </div>

      <div style={{ maxWidth: 980, margin: '0 auto', padding: '40px 32px' }}>
        <div className="row" style={{ gap: 8, marginBottom: 14 }}>
          <span className="badge" style={{ borderColor: 'var(--signal-warning)', color: 'var(--signal-warning)' }}>ANTI-TESIS</span>
          <span className="badge">M01·E02·Q2</span>
          <span className="badge">~5 min</span>
        </div>

        <h1 className="serif" style={{ fontSize: 'var(--size-2xl)', margin: '0 0 24px 0', fontWeight: 400, lineHeight: 1.3 }}>
          Una cíclica europea cotiza a P/E forward 9,2× (consenso bottom-up). El sector mediano es 11×. ¿Qué argumentas a un comité que pide veredicto de premium o descuento?
        </h1>

        <div style={{ display: 'grid', gridTemplateColumns: showRubric ? '1fr 1fr' : '1fr', gap: 20 }}>
          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: 14, borderBottom: '1px solid var(--border-subtle)' }}>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <span className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase' }}>Tu respuesta</span>
                <span className="mono txt-xs txt-sec">142 palabras</span>
              </div>
            </div>
            <textarea
              className="textarea"
              style={{ border: 0, minHeight: 280 }}
              defaultValue={`El P/E forward 9,2× vs sector 11× sugiere descuento aparente del 16%, pero antes de aceptarlo como tesis verifico tres puntos. (1) Calibración del consenso en cíclicas: la mediana histórica EPS_realizado/EPS_consenso es 0,71× — el consenso sobreestima sistemáticamente. Ajustado, el P/E forward "real" es aproximadamente 13×, ya en línea con sector. (2) Posición en el ciclo: si EPS_NTM coincide con pico, normalizar a mid-cycle elimina el descuento. (3) Drivers fundamentales: ROE estructural, intensidad de capital, exposición a costes variables. Mi argumento: el múltiplo aparente bajo no constituye señal de oportunidad sin desagregar calibración del consenso ni posición cíclica. Recomiendo recalcular con CAPE 7y antes de cualquier veredicto. Evidencia pendiente: márgenes mid-cycle del sector y track record del consenso para esta empresa concretamente.`}
            />
          </div>

          {showRubric && (
            <div className="card" style={{ padding: 18, background: 'var(--surface-1)' }}>
              <div className="row" style={{ justifyContent: 'space-between', marginBottom: 14 }}>
                <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase' }}>Pauta de respuesta</div>
                <span className="chip">auto-evaluación honesta</span>
              </div>
              <div className="serif" style={{ fontSize: 'var(--size-md)', lineHeight: 1.55, marginBottom: 14 }}>
                Una buena respuesta menciona <strong>tres elementos</strong>:
              </div>
              <ol className="col" style={{ gap: 10, paddingLeft: 20, fontSize: 'var(--size-sm)', lineHeight: 1.5 }}>
                <li>
                  <strong>Calibración del consenso</strong> en cíclicas: ratio histórico EPS_real/EPS_consenso típicamente {'<'}1 (consenso optimista en pico, pesimista en valle).
                </li>
                <li>
                  <strong>Posición en el ciclo</strong>: normalizar a mid-cycle o CAPE 7y antes de comparar contra sector.
                </li>
                <li>
                  <strong>Anti-tesis falsable</strong>: el descuento aparente podría desaparecer recalibrando el consenso y normalizando earnings; si esos dos ajustes no eliminan el descuento, sí hay tesis.
                </li>
              </ol>
              <div className="divider"></div>
              <div className="txt-xs txt-ter mono" style={{ textTransform: 'uppercase', marginBottom: 8 }}>Evidence required</div>
              <ul className="col" style={{ gap: 4, fontSize: 'var(--size-sm)' }}>
                <li>• Series EPS realizado vs consenso 5–7 años</li>
                <li>• Cuantificación del pico/valle del ciclo sectorial</li>
                <li>• Mid-cycle EBITDA y margen normalizado</li>
              </ul>
            </div>
          )}
        </div>

        <div className="row" style={{ justifyContent: 'space-between', marginTop: 24 }}>
          <div className="txt-sm txt-sec">No hay nota. Compara tu respuesta con la pauta. Si te falta evidencia técnica, vuelve al episodio.</div>
          <div className="row" style={{ gap: 8 }}>
            <button className="btn" onClick={() => setShowRubric(s => !s)}>{showRubric ? 'Ocultar pauta' : 'Ver pauta'}</button>
            <button className="btn btn-primary">Siguiente pregunta →</button>
          </div>
        </div>
      </div>
      <DisclaimerFooter />
    </div>
  );
};

Object.assign(window, { P08_Glossary, P09_Tutor, P10_Mastery, P11_Recall, P12_Quiz });