// ============================================================================
// App — orquestra rotas e overlay
// ============================================================================

function App() {
  const [route, setRoute] = useState('home');
  const [search, setSearch] = useState('');
  const [open, setOpen] = useState(null);

  const go = (r) => { setRoute(r); window.scrollTo({ top: 0 }); };
  const handleOpen = (item) => setOpen(item);

  const handleOpenWithScroll = (item) => { setOpen(item); window.scrollTo({ top: 0 }); };
  const handleClose = () => { setOpen(null); window.scrollTo({ top: 0 }); };

  const page = (() => {
    if (open) return <DetailView item={open} onClose={handleClose}/>;
    switch (route) {
      case 'home':        return <PageHome go={go} open={handleOpenWithScroll}/>;
      case 'playbooks':   return <PagePlaybooks open={handleOpenWithScroll}/>;
      case 'manuais':     return <PageManuais open={handleOpenWithScroll}/>;
      case 'trilhas':     return <PageTrilhas go={go} open={handleOpenWithScroll}/>;
      case 'pilulas':     return <PagePilulas/>;
      case 'ferramentas': return <PageFerramentas/>;
      case 'modelos':     return <PageModelos/>;
      case 'politicas':   return <PagePoliticas/>;
      case 'favoritos':   return <PageFavoritos/>;
      case 'agenda':      return <PageAgenda/>;
      default:            return <PageHome go={go} open={handleOpenWithScroll}/>;
    }
  })();

  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: 'var(--bg)' }}>
      <Sidebar route={route} setRoute={(r) => { setOpen(null); setRoute(r); }}/>
      <main style={{ flex: 1, minWidth: 0 }}>
        <Topbar route={route} setRoute={(r) => { setOpen(null); setRoute(r); }} search={search} setSearch={setSearch}/>
        <div data-screen-label={open ? `Detalhe · ${open.title || ''}` : routeLabel(route)}>
          {page}
        </div>
      </main>
    </div>
  );
}

function routeLabel(r) {
  return {
    home: '01 Início', playbooks: '02 Playbooks', manuais: '03 Manuais',
    trilhas: '04 Trilhas', pilulas: '05 Pílulas', ferramentas: '06 Ferramentas',
    modelos: '07 Modelos', politicas: '08 Políticas', favoritos: '09 Favoritos', agenda: '10 Agenda',
  }[r] || r;
}

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