/* eslint-disable */
// ============================================================
// Screen 6 — Case Comparison (standalone)
// For M01.E04 "Mismo P/E, tres calidades"
// ============================================================

const FZ_PEERS = [
  {
    id: "p1", name: "Arteca Brands", flag: "🇮🇹", sector: "Consumer · Premium",
    pe: 18.2, growth: 12, roe: 24, cashConv: 94, recurrence: 78, rule40: 32,
    quality: "alto", verdict: "premium",
    reason: "Pricing power demostrado · capex maduro · expansión geográfica probada.",
    pending: "Sostenibilidad ROE post-2027 · concentración en Asia."
  },
  {
    id: "p2", name: "Norvel Retail", flag: "🇪🇸", sector: "Consumer · Mid",
    pe: 14.0, growth: 6, roe: 14, cashConv: 76, recurrence: 52, rule40: 16,
    quality: "medio", verdict: "neutral",
    reason: "Ciclo maduro · margen estable · sin diferencial claro.",
    pending: "Ciclo de capex de renovación de tiendas."
  },
  {
    id: "p3", name: "Boucher Group", flag: "🇫🇷", sector: "Consumer · Cyclical",
    pe: 13.6, growth: 3, roe: 9, cashConv: 58, recurrence: 41, rule40: 6,
    quality: "bajo", verdict: "descuento",
    reason: "ROE deteriorándose 4 años · leverage al alza · marca erosionada.",
    pending: "Restructuring anunciado · efecto en 2026."
  }
];

function CaseComparison() {
  return (
    <div style={{
      width: "100%", minHeight: 1000, background: "var(--paper)",
      padding: "32px 56px 56px", fontFamily: "var(--sans)"
    }}>
      {/* breadcrumb */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 20, fontSize: 12, color: "var(--ink-3)" }}>
        <FinazMark size={16} />
        <span>›</span>
        <a style={{ color: "var(--ink-3)" }}>C04-A</a>
        <span>›</span>
        <a style={{ color: "var(--ink-3)" }}>M01</a>
        <span>›</span>
        <span style={{ color: "var(--ink)" }}>E04 · Mismo P/E, tres calidades</span>
      </div>

      <div style={{ marginBottom: 24 }}>
        <ModuleRibbon code="M01" title="Múltiplos sobre beneficio" />
        <h1 className="t-display" style={{ fontSize: 36, margin: "10px 0 8px", maxWidth: 780, lineHeight: 1.1 }}>
          Tres empresas con P/E parecido. Tres calidades distintas.
        </h1>
        <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 16, color: "var(--accent)", marginBottom: 16 }}>
          “¿Cuál merece premium y cuál descuento, una vez que miras más allá del múltiplo?”
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 280px", gap: 32, alignItems: "start" }}>
        <div>
          {/* Step indicator */}
          <div style={{
            background: "var(--card)", border: "1px solid var(--rule)", borderRadius: 10,
            padding: 14, marginBottom: 20, display: "flex", alignItems: "center", gap: 18
          }}>
            <span className="t-label">Paso 1 de 2</span>
            <span style={{ fontSize: 13, color: "var(--ink-2)" }}>Ordena las empresas por <em>calidad</em>, no por múltiplo</span>
            <div style={{ flex: 1 }} />
            <span className="chip accent">drag & drop · accesible por teclado</span>
          </div>

          {/* Cards */}
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {FZ_PEERS.map((p, i) => (
              <PeerCard key={p.id} peer={p} rank={i + 1} />
            ))}
          </div>

          {/* Verdict legend */}
          <div style={{
            marginTop: 18, padding: "14px 16px",
            background: "var(--paper-2)", borderRadius: 10,
            display: "flex", gap: 16, alignItems: "center", fontSize: 12, color: "var(--ink-2)"
          }}>
            <span className="t-label">Veredictos permitidos:</span>
            <span className="chip green">merece premium</span>
            <span className="chip">neutral</span>
            <span className="chip red">requiere descuento</span>
            <span className="chip amber">evidencia insuficiente</span>
            <div style={{ flex: 1 }} />
            <span style={{ fontStyle: "italic" }}>nunca: "cara" / "barata"</span>
          </div>
        </div>

        <aside style={{ display: "flex", flexDirection: "column", gap: 14, position: "sticky", top: 24 }}>
          <div className="card" style={{ padding: 20 }}>
            <div className="t-label" style={{ marginBottom: 10 }}>Panel de lenguaje prudente</div>
            <ul style={{ margin: 0, paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8, fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
              <li>Defiende premium <em>con</em> drivers explícitos.</li>
              <li>Defiende descuento <em>con</em> dato comparable.</li>
              <li>Declara <strong>evidencia pendiente</strong> en cada caso.</li>
              <li>No uses "barata/cara" sin matiz.</li>
            </ul>
          </div>

          <div className="card" style={{ padding: 20 }}>
            <div className="t-label" style={{ marginBottom: 12 }}>Tu ranking actual</div>
            <ol style={{ margin: 0, paddingLeft: 18, fontSize: 13, color: "var(--ink)", lineHeight: 1.7 }}>
              <li>Arteca Brands <span style={{ color: "var(--green)" }}>premium</span></li>
              <li>Norvel Retail <span style={{ color: "var(--ink-3)" }}>neutral</span></li>
              <li>Boucher Group <span style={{ color: "var(--red)" }}>descuento</span></li>
            </ol>
            <button className="btn primary small" style={{ marginTop: 14, width: "100%", justifyContent: "center" }}>
              Continuar a memo →
            </button>
          </div>

          <div className="card" style={{ padding: 20, background: "var(--amber-tint)", borderColor: "transparent" }}>
            <div className="t-label" style={{ color: "var(--amber)", marginBottom: 6 }}>⚠ Alerta de signal</div>
            <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
              Estás a punto de ordenar tres empresas con P/E muy similar (13.6–18.2x).
              Una señal de múltiplo no equivale a prueba de calidad.
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function PeerCard({ peer: p, rank }) {
  const verdictColor = p.verdict === "premium" ? "green" : p.verdict === "descuento" ? "red" : "default";
  return (
    <div className="card" style={{
      padding: 20, background: "var(--card-elev)",
      display: "grid", gridTemplateColumns: "auto 1fr 280px", gap: 20, alignItems: "center"
    }}>
      {/* drag handle + rank */}
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
        <span style={{ color: "var(--ink-4)", cursor: "grab", fontSize: 14 }}>⋮⋮</span>
        <div style={{
          width: 32, height: 32, borderRadius: "50%",
          background: rank === 1 ? "var(--green-tint)" : rank === 3 ? "var(--red-tint)" : "var(--paper-2)",
          color: rank === 1 ? "var(--green)" : rank === 3 ? "var(--red)" : "var(--ink-2)",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--mono)", fontWeight: 600, fontSize: 13
        }}>{rank}</div>
      </div>

      {/* main */}
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
          <div className="t-display" style={{ fontSize: 20, fontWeight: 500 }}>{p.flag} {p.name}</div>
          <span className="chip" style={{ fontSize: 10 }}>{p.sector}</span>
          {p.verdict === "premium" && <span className="chip green">premium</span>}
          {p.verdict === "descuento" && <span className="chip red">descuento</span>}
          {p.verdict === "neutral" && <span className="chip">neutral</span>}
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16, margin: "12px 0 14px"
        }}>
          <MiniKPI label="P/E" value={p.pe.toFixed(1) + "x"} />
          <MiniKPI label="g" value={p.growth + "%"} highlight={p.growth >= 10} />
          <MiniKPI label="ROE" value={p.roe + "%"} highlight={p.roe >= 18} />
          <MiniKPI label="Cash conv." value={p.cashConv + "%"} highlight={p.cashConv >= 85} />
          <MiniKPI label="Recurrencia" value={p.recurrence + "%"} />
          <MiniKPI label="Rule of 40" value={p.rule40 + "%"} highlight={p.rule40 >= 30} />
        </div>

        <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
          <strong style={{ color: "var(--ink)" }}>Razón principal — </strong>{p.reason}
        </div>
      </div>

      {/* pending evidence */}
      <div style={{
        background: "var(--paper-2)", padding: "12px 14px", borderRadius: 8,
        height: "100%", boxSizing: "border-box"
      }}>
        <div className="t-label" style={{ marginBottom: 6 }}>Evidencia pendiente</div>
        <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>{p.pending}</div>
        <button className="btn small ghost" style={{ marginTop: 10, padding: "4px 8px", fontSize: 11 }}>
          + añadir
        </button>
      </div>
    </div>
  );
}

function MiniKPI({ label, value, highlight }) {
  return (
    <div>
      <div className="t-label" style={{ marginBottom: 2 }}>{label}</div>
      <div className="t-mono" style={{
        fontSize: 16, fontWeight: 500,
        color: highlight ? "var(--green)" : "var(--ink)"
      }}>{value}</div>
    </div>
  );
}

window.CaseComparison = CaseComparison;