/* ============================================================
   ZERO — App shell + router. Mounts everything.
   ============================================================ */
(function () {
  const { useState } = React;
  const { Sidebar, Topbar } = window.UI;
  const S = window.Screens;

  const META = {
    dashboard: ['Dashboard', 'Sua empresa num relance · sincronizado há 12s'],
    command: ['Central de Comando da IA', '6 agentes · modo autônomo'],
    roadmap: ['Roadmap & Produto', 'O que sua equipe está construindo'],
    marketing: ['Automação de Marketing', 'Growth, anúncios e conteúdo — no automático'],
    sales: ['Pipeline de Vendas', 'Negócios que seus agentes estão fechando'],
    support: ['Suporte ao Cliente', 'Conversas conduzidas pela Echo'],
    settings: ['Configurações', 'Configure sua equipe de IA'],
    agentbuilder: ['Criar Agente', 'Construa um novo membro da sua equipe de IA'],
    teambuilder: ['Montar Equipe', 'Monte e orquestre sua equipe de IA'],
    marketplace: ['Marketplace', 'Instale agentes prontos e use templates'],
  };

  // command & support & builders are full-bleed (own internal scroll)
  const FULL = { command: true, support: true, agentbuilder: true, teambuilder: true };

  function App() {
    const [view, setView] = useState('landing'); // 'landing' | 'app'
    const [screen, setScreen] = useState('dashboard');

    if (view === 'landing') {
      return <S.Landing onEnter={() => setView('app')} />;
    }

    const [title, sub] = META[screen];
    const Screen = S[screen.charAt(0).toUpperCase() + screen.slice(1)] || S.Dashboard;
    const full = FULL[screen];

    return (
      <div className="app">
        <div className="app-aurora" />
        <Sidebar active={screen} onNav={setScreen} onLanding={() => setView('landing')} />
        <div className="main">
          <Topbar title={title} sub={sub} />
          {full
            ? <div style={{ flex: 1, minHeight: 0 }}><Screen /></div>
            : <div className="scroll"><Screen /></div>}
        </div>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
})();