apps/web_comercial/src/components/layout/Topbar.tsx

"use client";

import { usePathname } from "next/navigation";
import { SpaceRuntimeBanner } from "./SpaceRuntimeBanner";

const routeConfig: Record<
  string,
  { title: string; subtitle: string; validity: string }
> = {
  "/": {
    title: "Simulador imobiliário",
    subtitle: "Montagem de proposta com leitura operacional em formato workbook.",
    validity: "Vigência 31/10/2026",
  },
  "/mercado-secundario": {
    title: "Mercado secundário",
    subtitle: "Análise de fluxo, portabilidade, spread e retorno por cliente SCP.",
    validity: "Ciclo março/2026",
  },
  "/comparador": {
    title: "Comparador de cenários",
    subtitle: "Confronto entre planos, prazo, lance e impacto de parcela.",
    validity: "Revisão diária",
  },
  "/proposta": {
    title: "Proposta personalizada",
    subtitle: "Documento executivo orientado a PDF e apresentação ao cliente.",
    validity: "Validade 15 dias",
  },
  "/premissas": {
    title: "Premissas operacionais",
    subtitle: "Hipóteses, gatilhos e regras que sustentam o cálculo determinístico.",
    validity: "Baseline homologada",
  },
  "/configuracoes": {
    title: "Configurações",
    subtitle: "Modos de leitura, densidade e visibilidade de memória de cálculo.",
    validity: "Perfil operacional",
  },
};

export function Topbar() {
  const pathname = usePathname();
  const config =
    routeConfig[pathname ?? "/"] ?? routeConfig["/"];

  return (
    <header className="app-topbar">
      <div className="topbar-heading">
        <span className="topbar-kicker">Consórcio imobiliário Rodobens</span>
        <h1 className="topbar-title">{config.title}</h1>
        <p className="topbar-subtitle">{config.subtitle}</p>
      </div>

      <div style={{ display: "grid", gap: "10px", justifyItems: "end" }}>
        <SpaceRuntimeBanner />
        <div className="topbar-context">
          <span className="context-pill">Parceiro Apex</span>
          <span className="context-pill">Modo operacional</span>
          <span className="context-pill highlight">BTG + Rodobens</span>
          <span className="context-pill">{config.validity}</span>
        </div>
        <div className="topbar-actions">
          <button className="btn btn-secondary">Visualizar layout</button>
          <button className="btn btn-primary">Imprimir proposta</button>
        </div>
      </div>
    </header>
  );
}