function App() {
  function normalize(path) {
    // Compatibilité ascendante avec les anciennes clés de navigation
    const map = {
      home: '/',
      catalog: '/catalog',
      login: '/login',
      cart: '/cart',
      'admin:dashboard': '/admin',
      'admin:products': '/admin/products',
      'admin:orders': '/admin/orders',
    };
    if (path in map) return map[path];
  // S'assure qu'il y a un slash initial
    if (!path || path === '#') return '/';
    if (path[0] !== '/') return '/' + path;
    return path;
  }

  function getPathFromHash() {
    const h = String(window.location.hash || '').replace(/^#/, '');
    return h ? (h[0] === '/' ? h : '/' + h) : '/';
  }

  const [path, setPath] = React.useState(getPathFromHash());
  React.useEffect(() => {
    const onHash = () => setPath(getPathFromHash());
    window.addEventListener('hashchange', onHash);
  // Définit une route par défaut si le hash est vide
    if (!window.location.hash) window.location.hash = '#/';
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = React.useCallback((p) => {
    const to = normalize(p);
    if (('#' + to) !== window.location.hash) {
      window.location.hash = '#' + to;
    } else {
      // Force un rafraîchissement si on navigue vers la même route
      setPath(to);
    }
  }, []);
  // Expose la fonction navigate globalement (utilisée par des composants non montés via props)
  React.useEffect(() => { window.navigate = navigate; }, [navigate]);

  const routes = {
    '/': window.Pages.Home,
    '/catalog': window.Pages.Catalog,
    '/login': window.Pages.Login,
    '/forgot': window.Pages.Forgot,
    '/reset': window.Pages.Reset,
    '/profile': window.Pages.Profile,
    '/register': window.Pages.Register,
    '/cart': window.Pages.Cart,
    '/custom': window.Pages.CustomOrder,
    '/admin': window.Pages.AdminDashboard,
    '/admin/products': window.Pages.AdminProducts,
  '/admin/orders': window.Pages.AdminOrders,
  '/admin/users': window.Pages.AdminUsers,
    '/admin/custom-prices': window.Pages.AdminCustomPrices,
    '/admin/bundles': window.Pages.AdminBundles,
  };

  // On ignore la query (après '?') dans la résolution du composant de page
  const basePath = path.split('?')[0];
  const PageComp = routes[basePath] || window.Pages.Home;

  return (
    <div>
      <window.Components.Navbar currentPage={path} navigate={navigate} />
      <main>
        <PageComp navigate={navigate} />
      </main>
      <window.Components.Footer />
    </div>
  );
}