// Comparativo — the restyled comparative dashboard (matrix + decision axis).
(function () {
  const I = window.SIcon || {};

  const SDKS = ["Claude", "OpenAI", "LangGraph", "Cloudflare", "Híbrido"];
  const ROWS = [
    ["Estado / memória", "manual (DB)", "Sessions", "checkpointer", "SQLite/DO", "DO + checkpoint", [3, 4]],
    ["Streaming", "SSE manual", "run_streamed", "stream_mode", "WebSocket", "WS + SSE", [3]],
    ["Human-in-the-loop", "DIY", "DIY", "nativo", "reinventar", "nativo", [2, 4]],
    ["Time-travel / auditoria", "manual", "tracing", "nativo", "ad-hoc", "nativo", [2, 4]],
    ["Latência ponta-a-ponta", "média", "média", "maior", "baixíssima", "baixa/média", [3]],
    ["Multi-tenant / isolamento", "linha em DB", "sessão", "thread_id", "DO físico", "DO + thread", [3, 4]],
    ["Saída estruturada", "parse manual", "Zod / strict", "Pydantic", "Zod nas tools", "Pydantic ⊕ Zod", [1]],
    ["Otimização de custo", "cascade", "mini + fallback", "depende", "Workers AI", "WAI + Claude", [0]],
    ["Fit p/ banco grande", "POC", "produto", "compliance", "escala", "COMPLETO", [4]],
  ];
  const DECISIONS = [
    ["claude", "Requisito = RACIOCÍNIO", "Produto/POC com saída estruturada, controle fino, custo.", "Claude SDK (cascade de modelos)"],
    ["openai", "RACIOCÍNIO + DX", "Velocidade de entrega, agentes componíveis, tracing.", "OpenAI Agents SDK"],
    ["lang", "Requisito = WORKFLOW", "Aprovação humana, time-travel, audit trail.", "LangGraph (graph-first)"],
    ["cf", "Requisito = RUNTIME", "Chat stateful, baixa latência, muitos usuários.", "Cloudflare Agents SDK"],
    ["hyb", "MAIS DE UM (banco)", "Latência + governança + multi-tenant ao mesmo tempo.", "HÍBRIDO: borda + planner via MCP"],
  ];

  function Comparativo({ onBack }) {
    const NS = window.StudioDesignSystemUsegallSandbox_0c6109 || {};
    const { Dots, Button, Card } = NS;
    const [col, setCol] = React.useState(-1);
    return (
      <div>
        <header className="st-hero">
          <div className="st-wrap st-wrap--wide">
            <Dots size="lg" style={{ marginBottom: 14 }} />
            <div className="st-kicker">Estudo técnico · caráter educacional</div>
            <h1 style={{ fontSize: 34, margin: "8px 0 10px" }}>Orquestração Multiagêntica para Cash Management</h1>
            <p style={{ color: "var(--fg-2)", fontSize: 16, maxWidth: 820, margin: 0 }}>
              Cinco implementações do <b>mesmo</b> caso de uso sobre SDKs diferentes. Sendo o mesmo problema,
              toda diferença é puramente arquitetural.
            </p>
            <Button variant="ghost" size="sm" icon={I.back && <I.back size={15} />} onClick={onBack} style={{ marginTop: 14, paddingLeft: 0 }}>voltar ao hub</Button>
          </div>
        </header>

        <section style={{ padding: "32px 0" }}>
          <div className="st-wrap st-wrap--wide">
            <h2 style={{ fontSize: 24, margin: "0 0 4px" }}>Matriz comparativa</h2>
            <p style={{ color: "var(--fg-2)", margin: "0 0 16px", fontSize: 15 }}>Destaque uma coluna para focar um SDK.</p>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 14, alignItems: "center" }}>
              <span style={{ fontSize: 13, color: "var(--fg-2)" }}>Destacar:</span>
              <Button variant={col === -1 ? "primary" : "secondary"} size="sm" onClick={() => setCol(-1)}>Todos</Button>
              {SDKS.map((s, i) => (
                <Button key={s} variant={col === i ? "primary" : "secondary"} size="sm" onClick={() => setCol(i)}>{s}</Button>
              ))}
            </div>
            <div style={{ overflow: "auto", borderRadius: "var(--radius)", border: "1px solid var(--line)" }}>
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13, background: "var(--card)" }}>
                <thead>
                  <tr>
                    <th style={thLeft}>Dimensão</th>
                    {SDKS.map((s, i) => (
                      <th key={s} style={{ ...th, background: col === i ? "var(--navy)" : "#172046" }}>{s}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {ROWS.map((r, ri) => (
                    <tr key={ri}>
                      <td style={tdLeft}>{r[0]}</td>
                      {r.slice(1, 6).map((cell, ci) => {
                        const win = r[6].includes(ci);
                        const hl = col === ci;
                        return (
                          <td key={ci} style={{ ...td, background: hl ? "color-mix(in oklch, var(--cyan) 10%, transparent)" : "transparent", color: win ? "var(--ok)" : "var(--fg-2)", fontWeight: win ? 700 : 400 }}>
                            {cell}{win ? " ✦" : ""}
                          </td>
                        );
                      })}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p style={{ fontSize: 12.5, color: "var(--fg-3)", fontStyle: "italic", marginTop: 12 }}>✦ = ponto onde aquele SDK é diferencial.</p>
          </div>
        </section>

        <section style={{ borderTop: "1px solid var(--line-2)", padding: "32px 0" }}>
          <div className="st-wrap st-wrap--wide">
            <h2 style={{ fontSize: 24, margin: "0 0 4px" }}>Quando usar o quê</h2>
            <p style={{ color: "var(--fg-2)", margin: "0 0 20px", fontSize: 15 }}>Regra de bolso: escolha pela camada que domina o seu requisito.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {DECISIONS.map((d, i) => (
                <div key={i} style={{ display: "flex", gap: 16, alignItems: "center", background: d[0] === "hyb" ? "var(--cyan-dim)" : "var(--card)", border: "1px solid var(--line)", borderLeft: `6px solid var(--${d[0]})`, borderRadius: "var(--radius)", padding: "14px 18px", flexWrap: "wrap" }}>
                  <span style={{ flex: "0 0 220px", fontWeight: 700, fontSize: 14.5, color: d[0] === "hyb" ? "var(--cyan)" : "var(--fg-1)" }}>{d[1]}</span>
                  <span style={{ flex: 1, color: "var(--fg-2)", fontSize: 13, minWidth: 200 }}>{d[2]}</span>
                  <span style={{ flex: "0 0 290px", color: "var(--cyan)", fontWeight: 700, fontSize: 13.5 }}>{d[3]}</span>
                </div>
              ))}
            </div>
            <Card accent="cyan" style={{ marginTop: 20 }}>
              <b>Princípio-chave:</b> padronize o <b>contrato (MCP)</b>, não o framework — preserva a liberdade
              de trocar o "cérebro" sem reescrever as integrações.
            </Card>
          </div>
        </section>

        <footer style={{ borderTop: "1px solid var(--line-2)", padding: "24px 0", color: "var(--fg-3)", fontSize: 12.5 }}>
          <div className="st-wrap st-wrap--wide">Material de estudo · implementações de caráter educacional · dados sintéticos.</div>
        </footer>
      </div>
    );
  }

  const th = { padding: "10px 11px", textAlign: "center", color: "#fff", fontSize: 12, fontWeight: 600, borderBottom: "1px solid var(--line)" };
  const thLeft = { ...th, textAlign: "left", background: "#172046" };
  const td = { padding: "9px 11px", textAlign: "center", borderBottom: "1px solid var(--line)" };
  const tdLeft = { ...td, textAlign: "left", fontWeight: 600, color: "var(--fg-1)" };

  window.Comparativo = Comparativo;
})();