// Topbar.jsx — global header
function Topbar({ env, onShadowRadar }) {
  const titles = {
    chat: { title: "General Chat", sub: "Autonomous routing · Ephemeral session", env: "L3 · CHAT" },
    notebook: { title: "Research Notebook", sub: "Bounded to pod-legal-eu · Persistent", env: "L3 · NOTEBOOK" },
    vertical: { title: "Compliance Memo Generator", sub: "App Vertical · Transactional · Write-capable", env: "L3 · VERTICAL" },
  };
  const t = titles[env];
  return (
    <header className="ask-topbar">
      <div className="ask-topbar__left">
        <span className="ask-topbar__eyebrow">{t.env}</span>
        <h1 className="ask-topbar__title">{t.title}</h1>
        <span className="ask-topbar__sub">{t.sub}</span>
      </div>
      <div className="ask-topbar__right">
        <div className="ask-topbar__status">
          <span className="ask-topbar__dot ask-topbar__dot--ok"></span>
          <span>L0 guardrails healthy</span>
        </div>
        <button className="btn btn-secondary btn-sm" onClick={onShadowRadar}>
          <Icon name="radar" size={14}/> Shadow Radar
        </button>
        <button className="btn btn-primary btn-sm">
          <Icon name="plus" size={14}/> New session
        </button>
      </div>
    </header>
  );
}

window.Topbar = Topbar;