const { useState: useStateApp, useEffect: useEffectApp } = React;

const ROUTES = {
  '/': HomePage,
  '/servicios': ServiciosPage,
  '/automatizaciones': AutomatizacionesPage,
  '/precios': PreciosPage,
  '/portafolio': PortafolioPage,
  '/portafolio/manumoreno': CasoManuMoreno,
  '/portafolio/orden-seguridad': CasoOrdenSeguridad,
  '/proceso': ProcesoPage,
  '/contacto': ContactoPage,
  '/blog': BlogIndexPage,
  '/privacidad': PrivacidadPage,
  '/terminos': TerminosPage,
};

function PageOutlet() {
  const { path } = useRouter();
  if (path.startsWith('/blog/') && path.length > 6) {
    const slug = path.slice(6);
    return <div key={path}><BlogPostPage slug={slug}/></div>;
  }
  const Component = ROUTES[path] || NotFound;
  return <div key={path}><Component/></div>;
}

function App() {
  return (
    <ThemeProvider>
      <RouterProvider>
        <Navbar/>
        <PageOutlet/>
        <Footer/>
      </RouterProvider>
    </ThemeProvider>
  );
}

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