// Hub — the launcher. Recreates the studio index in the unified identity.
(function () {
  const I = window.SIcon || {};

  function Hub({ onOpenApp, onOpenComparativo }) {
    const NS = window.StudioDesignSystemUsegallSandbox_0c6109 || {};
    const { Dots, AppCard, Button } = NS;
    return (
      <div>
        {/* hero */}
        <header className="st-hero">
          <div className="st-wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
            <div>
              <Dots size="lg" style={{ marginBottom: 14 }} />
              <div className="st-kicker">usegall-sandbox · studio</div>
              <h1 style={{ fontSize: 32, margin: "8px 0" }}>Protótipos de Orquestração Multiagêntica</h1>
              <p style={{ color: "var(--fg-2)", maxWidth: 760, fontSize: 15.5, margin: 0 }}>
                Hub privado dos cinco protótipos de cash management corporativo. Cinco arquiteturas de agentes
                sobre o mesmo caso de tesouraria. Dados sintéticos · caráter educacional.
              </p>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--fg-2)", background: "#16203f", border: "1px solid var(--line)", borderRadius: 10, padding: "10px 14px", display: "flex", flexDirection: "column", gap: 6 }}>
              <span className="st-badge st-badge--done">{I.lock && <I.lock size={12} />} acesso autenticado</span>
              <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
                helena.vasquez@meridional.com
                <a href="#" onClick={(e) => e.preventDefault()} style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>{I.logout && <I.logout size={13} />} Sair</a>
              </span>
            </div>
          </div>
        </header>

        {/* apps */}
        <section style={{ padding: "30px 0" }}>
          <div className="st-wrap">
            <h2 style={{ fontSize: 24, margin: "0 0 4px" }}>Protótipos</h2>
            <p style={{ color: "var(--fg-2)", margin: "0 0 20px", fontSize: 15 }}>
              Abra um app, ou compare as cinco arquiteturas no estudo comparativo.
            </p>
            <div style={{ display: "grid", gap: 16, gridTemplateColumns: "1fr 1fr" }}>
              <AppCard accent="claude" tag="Claude / Anthropic SDK" name="claude-cash-management"
                description="Loop agêntico explícito + cascade Opus→Sonnet→Haiku."
                stack="Railway · FastAPI · anthropic SDK" href="#" onClick={onOpenApp} />
              <AppCard accent="openai" tag="OpenAI Agents SDK" name="openai-cash-management"
                description="Agentes como objetos + saída estruturada (Zod / strict)."
                stack="Railway · Next.js · @openai/agents" href="#" onClick={onOpenApp} />
              <AppCard accent="lang" tag="LangGraph" name="langgraph-cash-management" status="offline"
                description="Modelo mental do grafo. Time-travel, HITL e Send() no conceito."
                stack="React + Express · protótipo mock" />
              <AppCard accent="cf" tag="Cloudflare Agents SDK" name="cloudflare-cash-management"
                description="Runtime-first: Durable Objects, edge, WebSocket."
                stack="Cloudflare Workers · Durable Objects" href="#" onClick={onOpenApp} />
              <div style={{ gridColumn: "1 / -1" }}>
                <AppCard accent="hyb" tag="Híbrido · Cloudflare ⊕ LangGraph via MCP" recommended
                  name="agents-cash-management"
                  description="A tese: runtime de borda + cérebro de planejamento, colados por MCP. Routing factual/planning, HITL nativo, time-travel."
                  stack="Cloudflare Workers (edge) + LangGraph no Railway (brain)" href="#" onClick={onOpenApp} />
              </div>
            </div>
          </div>
        </section>

        {/* comparativo */}
        <section style={{ borderTop: "1px solid var(--line-2)", padding: "30px 0" }}>
          <div className="st-wrap">
            <h2 style={{ fontSize: 24, margin: "0 0 4px" }}>Estudo comparativo</h2>
            <p style={{ color: "var(--fg-2)", margin: "0 0 20px", fontSize: 15 }}>
              A matriz dos cinco SDKs, o eixo de decisão e a camada de negócio.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <Button variant="primary" iconRight={I.arrow && <I.arrow size={15} />} onClick={onOpenComparativo}>
                Abrir dashboard comparativo
              </Button>
              <Button variant="secondary">Repositórios (privados)</Button>
            </div>
          </div>
        </section>

        <footer style={{ borderTop: "1px solid var(--line-2)", padding: "24px 0", color: "var(--fg-3)", fontSize: 12.5 }}>
          <div className="st-wrap">
            © usegall-sandbox · studio — material de estudo, dados sintéticos, sem transações reais.
            Página protegida por Cloudflare Access; não indexável.
          </div>
        </footer>
      </div>
    );
  }
  window.Hub = Hub;
})();