/* global React */
// §5.1 MultifactorRegressionPanel + §5.2 R²LadderChart
// Lab del slot S3 para CALC+CASE multifactor (10/19 episodios)

const { useState, useMemo, useRef, useEffect } = React;

// Demo data — empresa C001 sector tech del brief §8.2
const COMPANIES = {
  C001: {
    label: "C001 · Sector Tech",
    sector: "Technology",
    icc: 8.5,
    betas: {
      mkt: 1.20,
      size: -0.30,   // tilt large cap
      value: -0.40,  // tilt growth
      momentum: 0.20,
      quality: 0.50,
    },
    r2: {
      capm: 0.70,
      ff3: 0.85,
      ff5: 0.90,
      carhart: 0.92,
    },
    r2_periods: {
      "in-sample": { capm: 0.70, ff3: 0.85, ff5: 0.90, carhart: 0.92 },
      "1995-2007": { capm: 0.68, ff3: 0.82, ff5: 0.86, carhart: 0.88 },
      "2008-2024": { capm: 0.74, ff3: 0.88, ff5: 0.91, carhart: 0.93 },
      "last-5y":   { capm: 0.61, ff3: 0.73, ff5: 0.78, carhart: 0.80 },
    },
  },
};

// Expected factor premia (annual, %) — for Ke calc
const PREMIA = {
  rf: 4.0,
  mkt: 5.5,   // ERP
  size: 2.3,  // E[SMB]
  value: 3.1, // E[HML]
  momentum: 4.0, // E[WML]
  quality: 2.5,  // E[RMW] proxy
  cma: 1.8,
};

const MODELS = [
  { id: "capm",    label: "CAPM",          factors: ["mkt"] },
  { id: "ff3",     label: "FF3",           factors: ["mkt", "size", "value"] },
  { id: "ff5",     label: "FF5",           factors: ["mkt", "size", "value", "quality"] },
  { id: "carhart", label: "FF5 + Carhart", factors: ["mkt", "size", "value", "quality", "momentum"] },
];

const FACTOR_META = {
  mkt:      { name: "β_mkt",   long: "Market (R_M − R_f)",   premiaKey: "mkt",      tiltOptions: ["high beta", "low beta"] },
  size:     { name: "β_SMB",   long: "Size (SMB)",            premiaKey: "size",     tiltOptions: ["large cap", "small cap"] },
  value:    { name: "β_HML",   long: "Value (HML)",           premiaKey: "value",    tiltOptions: ["growth", "value"] },
  quality:  { name: "β_RMW",   long: "Quality (RMW)",         premiaKey: "quality",  tiltOptions: ["robust", "weak"] },
  momentum: { name: "β_WML",   long: "Momentum (WML/UMD)",    premiaKey: "momentum", tiltOptions: ["momentum", "contrarian"] },
};

function inferTilt(factor, beta) {
  if (factor === "mkt")      return beta > 1.05 ? "high beta" : beta < 0.95 ? "low beta" : "neutral";
  if (factor === "size")     return beta > 0.15 ? "small cap" : beta < -0.15 ? "large cap" : "neutral";
  if (factor === "value")    return beta > 0.15 ? "value" : beta < -0.15 ? "growth" : "neutral";
  if (factor === "quality")  return beta > 0.15 ? "robust" : beta < -0.15 ? "weak" : "neutral";
  if (factor === "momentum") return beta > 0.15 ? "momentum" : beta < -0.15 ? "contrarian" : "neutral";
  return "—";
}

function suggestedInterpretation(factor, beta) {
  if (factor === "mkt")
    return beta > 1.0 ? "Amplifica el movimiento del mercado; riesgo sistémico elevado." : "Más defensiva que el mercado.";
  if (factor === "size")
    return beta < -0.15 ? "Carga negativa: comportamiento de large cap, menor prima por tamaño." : beta > 0.15 ? "Sesgo small cap; prima esperada por tamaño positiva." : "Neutral respecto a SMB.";
  if (factor === "value")
    return beta < -0.15 ? "Tilt growth: el modelo penaliza expectativas value." : beta > 0.15 ? "Tilt value claro." : "Sin tilt value/growth claro.";
  if (factor === "quality")
    return beta > 0.15 ? "Robusta en rentabilidad operativa; carga positiva en RMW." : beta < -0.15 ? "Empresa weak en términos de RMW." : "Neutral.";
  if (factor === "momentum")
    return beta > 0.15 ? "Sesgo momentum positivo." : "Sin tilt momentum claro.";
  return "";
}

function computeKe(model, betas) {
  let ke = PREMIA.rf;
  const factors = MODELS.find(m => m.id === model).factors;
  for (const f of factors) {
    ke += (betas[f] ?? 0) * PREMIA[FACTOR_META[f].premiaKey];
  }
  return ke;
}

// Mini sparkline (rolling 12m stability mock)
function StabilitySpark({ seed = 0.5, width = 56, height = 16 }) {
  const points = useMemo(() => {
    const arr = [];
    const noise = (i) => Math.sin(i * 1.7 + seed * 13) * 0.5 + Math.cos(i * 0.9 + seed * 7) * 0.3;
    for (let i = 0; i < 24; i++) {
      arr.push(0.5 + noise(i) * 0.35);
    }
    return arr;
  }, [seed]);
  const path = points.map((v, i) => {
    const x = (i / (points.length - 1)) * width;
    const y = height - v * height;
    return `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(" ");
  return (
    <svg width={width} height={height} className="fz-spark" style={{ overflow: "visible" }}>
      <path d={path} stroke="var(--signal-loading)" strokeWidth="1.2" fill="none" opacity="0.8" />
    </svg>
  );
}

// ────────────────────────────────────────────────────────────
// R² Ladder Chart (§5.2)
// ────────────────────────────────────────────────────────────
function R2Ladder({ company, period, setPeriod, divergenceFlag }) {
  const r2 = company.r2_periods[period];
  const max = 1.0;
  const layers = [
    { id: "capm", label: "CAPM", value: r2.capm, delta: r2.capm, color: "#4d6a8a", factors: "Rm − Rf" },
    { id: "ff3",  label: "+SMB+HML", value: r2.ff3, delta: r2.ff3 - r2.capm, color: "#6BA3FF", factors: "size + value" },
    { id: "ff5",  label: "+RMW+CMA", value: r2.ff5, delta: r2.ff5 - r2.ff3, color: "#9CB4D8", factors: "quality + invest." },
    { id: "wml",  label: "+WML",     value: r2.carhart, delta: r2.carhart - r2.ff5, color: "#C8A3E5", factors: "momentum" },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14, height: "100%" }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
        <div>
          <div className="fz-label">R² Ladder</div>
          <div style={{ fontSize: 13, color: "var(--fg-muted)", marginTop: 4 }}>
            Varianza explicada incremental
          </div>
        </div>
        {divergenceFlag && (
          <span className="fz-chip fz-chip-amber" title="Rango sub-período >10pp">
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--signal-hypothesis)" }}></span>
            cargas inestables
          </span>
        )}
      </div>

      {/* Period switch */}
      <div style={{ display: "flex", gap: 4, padding: 3, background: "var(--surface-2)", borderRadius: 8, alignSelf: "flex-start" }}>
        {["in-sample", "1995-2007", "2008-2024", "last-5y"].map(p => (
          <button
            key={p}
            onClick={() => setPeriod(p)}
            style={{
              padding: "5px 10px",
              fontSize: 11,
              fontFamily: "var(--font-mono)",
              border: "none",
              borderRadius: 6,
              cursor: "pointer",
              background: period === p ? "var(--surface-3)" : "transparent",
              color: period === p ? "var(--fg)" : "var(--fg-muted)",
              transition: "background 120ms, color 120ms",
            }}
          >
            {p}
          </button>
        ))}
      </div>

      {/* Bars stacked horizontally */}
      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 4 }}>
        {layers.map((l, i) => {
          const cumulative = l.value;
          const start = i === 0 ? 0 : layers[i - 1].value;
          const startPct = (start / max) * 100;
          const endPct = (cumulative / max) * 100;
          return (
            <div key={l.id} style={{ position: "relative" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                <div style={{ fontSize: 12, color: "var(--fg)" }}>
                  <span style={{ fontWeight: 500 }}>{l.label}</span>
                  <span style={{ color: "var(--fg-faint)", marginLeft: 8 }}>{l.factors}</span>
                </div>
                <div style={{ fontSize: 11, fontFamily: "var(--font-mono)" }}>
                  <span style={{ color: "var(--fg-muted)" }}>+{l.delta.toFixed(2)}</span>
                  <span style={{ color: "var(--fg)", marginLeft: 8 }}>R² = {l.value.toFixed(2)}</span>
                </div>
              </div>
              <div style={{ height: 18, background: "var(--surface-2)", borderRadius: 4, position: "relative", overflow: "hidden" }}>
                {/* prior bars (filled) */}
                {start > 0 && (
                  <div style={{
                    position: "absolute", left: 0, top: 0, bottom: 0,
                    width: `${startPct}%`,
                    background: "var(--surface-3)",
                  }} />
                )}
                {/* this layer */}
                <div style={{
                  position: "absolute", left: `${startPct}%`, top: 0, bottom: 0,
                  width: `${endPct - startPct}%`,
                  background: l.color,
                  transition: "width 240ms cubic-bezier(.2,.7,.3,1), left 240ms",
                }} />
              </div>
            </div>
          );
        })}
      </div>

      {/* Footer reading */}
      <div style={{ marginTop: "auto", fontSize: 11, color: "var(--fg-faint)", lineHeight: 1.6 }}>
        Click en barra → drill-down regresión sub-período (coef., SE, t-stats).
        <br />
        <span style={{ color: "var(--signal-loading)" }}>R²</span> incremental, no aditivo en términos económicos.
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Glossary tooltip (inline)
// ────────────────────────────────────────────────────────────
function GlossPop({ factor, onClose }) {
  const meta = FACTOR_META[factor];
  if (!meta) return null;
  return (
    <div style={{
      position: "absolute", top: "calc(100% + 8px)", left: 0, zIndex: 10,
      width: 280, padding: 14,
      background: "var(--surface-2)",
      border: "1px solid var(--border-strong)",
      borderRadius: 8,
      boxShadow: "0 16px 40px rgba(0,0,0,0.5)",
      fontSize: 12, lineHeight: 1.5, color: "var(--fg-muted)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
        <span style={{ fontFamily: "var(--font-mono)", color: "var(--signal-loading)", fontSize: 13 }}>{meta.name}</span>
        <button onClick={onClose} style={{ background: "none", border: "none", color: "var(--fg-faint)", cursor: "pointer", padding: 0, fontSize: 14 }}>×</button>
      </div>
      <div style={{ fontWeight: 500, color: "var(--fg)", marginBottom: 6 }}>{meta.long}</div>
      <div>
        Sensibilidad estimada de R_i − R_f al factor. Estimado por OLS panel multi-empresa.
        Inestable en períodos &lt; 60 meses.
      </div>
      <div style={{ marginTop: 8, fontSize: 11, color: "var(--fg-faint)" }}>
        GLOSS.AF.{factor.toUpperCase()}_M01 · ver más
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Main panel
// ────────────────────────────────────────────────────────────
function MultifactorRegressionPanel() {
  const [activeModel, setActiveModel] = useState("ff5");
  const [period, setPeriod] = useState("in-sample");
  const [betas, setBetas] = useState({ ...COMPANIES.C001.betas });
  const [interpretations, setInterpretations] = useState({});
  const [tilts, setTilts] = useState({});
  const [glossOpen, setGlossOpen] = useState(null);
  const [simFactor, setSimFactor] = useState("value");
  const [showUnderclaim, setShowUnderclaim] = useState(false);
  const company = COMPANIES.C001;

  const factors = MODELS.find(m => m.id === activeModel).factors;
  const ke = computeKe(activeModel, betas);

  // Divergence flag for R²Ladder
  const r2_min = Math.min(...Object.values(company.r2_periods).map(p => p[activeModel]));
  const r2_max = Math.max(...Object.values(company.r2_periods).map(p => p[activeModel]));
  const divergenceFlag = (r2_max - r2_min) * 100 > 10;

  return (
    <div className="fz-slot">
      {/* Slot header */}
      <div className="fz-slot-header">
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="fz-eyebrow">S3 · LAB · CALC+CASE</span>
          <span style={{ color: "var(--border-strong)" }}>·</span>
          <h2>Multifactor Regression Panel</h2>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span className="fz-chip">
            <span style={{ width: 5, height: 5, borderRadius: 999, background: "var(--signal-loading)" }}></span>
            cargas pre-computadas
          </span>
          <span className="fz-chip">M04 · E02</span>
        </div>
      </div>

      {/* Formula display */}
      <div style={{ padding: "18px 24px 4px", borderBottom: "1px solid var(--border)" }}>
        <div className="fz-label" style={{ marginBottom: 8 }}>Modelo activo · regla del Tutor</div>
        <div className="fz-formula">
          R<sub>i</sub> − R<sub>f</sub>
          <span className="op">=</span>
          α
          <span className="op">+</span>
          <span className="beta" onClick={() => setGlossOpen("mkt")}>β<sub>M</sub></span>
          (R<sub>M</sub> − R<sub>f</sub>)
          {activeModel !== "capm" && <>
            <span className="op">+</span>
            <span className="beta" onClick={() => setGlossOpen("size")}>β<sub>S</sub></span> SMB
            <span className="op">+</span>
            <span className="beta" onClick={() => setGlossOpen("value")}>β<sub>H</sub></span> HML
          </>}
          {(activeModel === "ff5" || activeModel === "carhart") && <>
            <span className="op">+</span>
            <span className="beta" onClick={() => setGlossOpen("quality")}>β<sub>R</sub></span> RMW
          </>}
          {activeModel === "carhart" && <>
            <span className="op">+</span>
            <span className="beta" onClick={() => setGlossOpen("momentum")}>β<sub>W</sub></span> WML
          </>}
          <span className="op">+</span>
          ε
        </div>
      </div>

      {/* Tabs */}
      <div style={{ padding: "0 24px", background: "var(--surface-1)" }}>
        <div className="fz-tabs">
          {MODELS.map(m => (
            <button
              key={m.id}
              className="fz-tab"
              data-active={activeModel === m.id}
              onClick={() => setActiveModel(m.id)}
            >
              {m.label}
            </button>
          ))}
        </div>
      </div>

      {/* Main grid: 6/6 inside slot */}
      <div className="fz-scroll" style={{ flex: 1, overflow: "auto", padding: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, alignContent: "start" }}>
        {/* LEFT 6: factor table */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
            <div className="fz-label">Cargas factoriales — {company.label}</div>
            <span className="fz-num fz-num-loading" style={{ fontSize: 11 }}>n=60 meses</span>
          </div>

          <div className="fz-card" style={{ padding: 0 }}>
            <div style={{
              display: "grid",
              gridTemplateColumns: "92px 76px 1fr 100px",
              padding: "10px 14px",
              borderBottom: "1px solid var(--border)",
              fontSize: 11,
              color: "var(--fg-faint)",
              textTransform: "uppercase",
              letterSpacing: "0.05em",
              gap: 8,
            }}>
              <div>Factor</div>
              <div style={{ textAlign: "right" }}>β</div>
              <div>Interpretación</div>
              <div>Tilt</div>
            </div>
            {factors.map((f, i) => {
              const meta = FACTOR_META[f];
              const beta = betas[f];
              const inferred = inferTilt(f, beta);
              const tilt = tilts[f] ?? inferred;
              return (
                <div key={f} style={{
                  display: "grid",
                  gridTemplateColumns: "92px 76px 1fr 100px",
                  alignItems: "center",
                  padding: "12px 14px",
                  borderBottom: i < factors.length - 1 ? "1px solid var(--border)" : "none",
                  gap: 8,
                  position: "relative",
                }}>
                  <div style={{ position: "relative" }}>
                    <button
                      onClick={() => setGlossOpen(glossOpen === f ? null : f)}
                      style={{
                        background: "transparent", border: "none", padding: 0, cursor: "pointer",
                        fontFamily: "var(--font-mono)", fontSize: 13,
                        color: "var(--signal-loading)",
                        display: "inline-flex", alignItems: "center", gap: 4,
                      }}
                    >
                      {meta.name}
                      <span style={{
                        width: 12, height: 12, borderRadius: 999,
                        border: "1px solid var(--border-strong)",
                        color: "var(--fg-faint)",
                        fontSize: 9, display: "inline-flex", alignItems: "center", justifyContent: "center",
                        fontFamily: "var(--font-sans)",
                      }}>i</span>
                    </button>
                    {glossOpen === f && <GlossPop factor={f} onClose={() => setGlossOpen(null)} />}
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <span className="fz-num fz-num-loading" style={{ fontSize: 14 }}>
                      {beta >= 0 ? "+" : ""}{beta.toFixed(2)}
                    </span>
                    <div style={{ marginTop: 2 }}>
                      <StabilitySpark seed={f.charCodeAt(0) / 10} width={64} height={10} />
                    </div>
                  </div>
                  <input
                    type="text"
                    placeholder={suggestedInterpretation(f, beta)}
                    value={interpretations[f] ?? ""}
                    onChange={e => setInterpretations({ ...interpretations, [f]: e.target.value })}
                    style={{
                      width: "100%", padding: "6px 8px",
                      background: "var(--surface-2)",
                      border: "1px solid var(--border)",
                      borderRadius: 6,
                      color: "var(--fg)",
                      fontSize: 12,
                      fontFamily: "var(--font-sans)",
                    }}
                  />
                  <select
                    value={tilt}
                    onChange={e => setTilts({ ...tilts, [f]: e.target.value })}
                    style={{
                      padding: "6px 8px",
                      background: tilt !== "neutral" ? "var(--surface-3)" : "var(--surface-2)",
                      border: "1px solid var(--border)",
                      borderRadius: 6,
                      color: "var(--fg)",
                      fontSize: 11,
                      fontFamily: "var(--font-mono)",
                    }}
                  >
                    <option value="neutral">neutral</option>
                    {meta.tiltOptions.map(o => <option key={o} value={o}>{o}</option>)}
                  </select>
                </div>
              );
            })}
          </div>

          {/* Feedback banner */}
          {showUnderclaim && (
            <div className="fz-banner fz-banner-terracotta">
              <span style={{ flexShrink: 0, marginTop: 2 }}>●</span>
              <div>
                <div style={{ fontWeight: 500, color: "var(--fg)" }}>Underclaim</div>
                Has visto el dato pero no explicas por qué importa. Conecta carga con riesgo económico o valoración.
              </div>
            </div>
          )}
        </div>

        {/* RIGHT 6: R² ladder */}
        <div>
          <R2Ladder company={company} period={period} setPeriod={setPeriod} divergenceFlag={divergenceFlag} />
        </div>

        {/* FULL WIDTH: Sim-explorer + Ke result */}
        <div style={{ gridColumn: "1 / -1", marginTop: 8, display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }}>
          {/* Sim explorer */}
          <div className="fz-card fz-card-pad">
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 10 }}>
              <div>
                <div className="fz-label">Sim-explorer</div>
                <div style={{ fontSize: 13, color: "var(--fg)", marginTop: 4 }}>
                  ¿Qué pasaría si{" "}
                  <select
                    value={simFactor}
                    onChange={e => setSimFactor(e.target.value)}
                    style={{
                      background: "var(--surface-2)",
                      border: "1px solid var(--border)",
                      color: "var(--signal-loading)",
                      fontFamily: "var(--font-mono)",
                      borderRadius: 4, padding: "2px 6px", fontSize: 13,
                    }}
                  >
                    {factors.map(f => <option key={f} value={f}>{FACTOR_META[f].name}</option>)}
                  </select>
                  {" "}fuera{" "}
                  <span className="fz-num fz-num-loading" style={{ fontSize: 13 }}>
                    {betas[simFactor] >= 0 ? "+" : ""}{betas[simFactor].toFixed(2)}
                  </span>
                  ?
                </div>
              </div>
              <button
                onClick={() => setBetas({ ...betas, [simFactor]: company.betas[simFactor] })}
                className="fz-btn fz-btn-ghost"
                style={{ height: 26, fontSize: 11 }}
              >
                reset
              </button>
            </div>
            <input
              type="range"
              min={-1}
              max={2}
              step={0.05}
              value={betas[simFactor]}
              onChange={e => setBetas({ ...betas, [simFactor]: parseFloat(e.target.value) })}
              style={{ width: "100%", accentColor: "var(--signal-loading)" }}
            />
            <div style={{
              display: "flex", justifyContent: "space-between",
              fontFamily: "var(--font-mono)", fontSize: 10,
              color: "var(--fg-faint)", marginTop: 2,
            }}>
              <span>−1.00</span><span>0.00</span><span>+1.00</span><span>+2.00</span>
            </div>

            <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
              <div className="fz-label" style={{ marginBottom: 6 }}>Drivers de Ke</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, fontFamily: "var(--font-mono)", fontSize: 12 }}>
                <div style={{ color: "var(--fg-muted)" }}>R<sub>f</sub></div>
                <div style={{ textAlign: "right", color: "var(--signal-driver)" }}>{PREMIA.rf.toFixed(1)}%</div>
                {factors.map(f => (
                  <React.Fragment key={f}>
                    <div style={{ color: "var(--fg-muted)" }}>
                      {FACTOR_META[f].name} · E[{f}]
                    </div>
                    <div style={{ textAlign: "right", color: "var(--signal-loading)" }}>
                      {(betas[f] * PREMIA[FACTOR_META[f].premiaKey]).toFixed(2)}%
                    </div>
                  </React.Fragment>
                ))}
              </div>
            </div>
          </div>

          {/* Ke result card */}
          <div style={{
            background: "linear-gradient(180deg, rgba(107,163,255,0.08), rgba(107,163,255,0.02))",
            border: "1px solid rgba(107,163,255,0.3)",
            borderRadius: "var(--r-lg)",
            padding: 18,
            display: "flex", flexDirection: "column", justifyContent: "space-between",
          }}>
            <div>
              <div className="fz-label" style={{ marginBottom: 6 }}>Ke {MODELS.find(m => m.id === activeModel).label}</div>
              <div className="fz-num fz-num-xl fz-num-loading">{ke.toFixed(1)}%</div>
              <div style={{ fontSize: 11, color: "var(--fg-faint)", marginTop: 4 }}>
                Coste del equity estimado · cargas pre-computadas
              </div>
            </div>
            <div style={{ marginTop: 14, paddingTop: 10, borderTop: "1px solid rgba(107,163,255,0.2)" }}>
              <div style={{ fontSize: 11, color: "var(--fg-muted)", lineHeight: 1.5 }}>
                ICC empresa (M02.E01): <span className="fz-num fz-num-driver">{company.icc}%</span>
                <br />
                Δ = <span className="fz-num" style={{ color: ke - company.icc >= 2 ? "var(--signal-hypothesis)" : "var(--fg-muted)" }}>
                  {(ke - company.icc).toFixed(1)}pp
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Send footer */}
        <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 14, borderTop: "1px solid var(--border)" }}>
          <div style={{ fontSize: 11, color: "var(--fg-faint)" }}>
            S3 → S4 · al enviar, este output se guarda en <span className="fz-mono" style={{ color: "var(--fg-muted)" }}>student_workspace</span> para transclusión en M03/M04
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="fz-btn fz-btn-ghost" onClick={() => setShowUnderclaim(!showUnderclaim)}>
              {showUnderclaim ? "ocultar feedback" : "validar interpretación"}
            </button>
            <button className="fz-btn fz-btn-primary">
              guardar y avanzar a S4
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.MultifactorRegressionPanel = MultifactorRegressionPanel;
