// App entry: router resolves which page to render
const App = () => {
  const { route } = useRouter();
  const [main, sub] = route.split('/');

  let header = 'dark';
  if (main === 'shop' || main === 'product' || main === 'come' || main === 'gluten' || main === 'faq' || main === 'about' || main === 'varianti') header = 'dark';

  let content;
  switch (main) {
    case 'home':       content = <HomePage/>; break;
    case 'shop':       content = <ShopPage/>; break;
    case 'product':    content = <ProductPage slug={sub || 'tonkotsu'}/>; break;
    case 'le':         content = <LimitedEditionPage/>; break;
    case 'come':       content = <HowItWorksPage/>; break;
    case 'gluten':     content = <GlutenFreePage/>; break;
    case 'about':      content = <AboutPage/>; break;
    case 'faq':        content = <FAQPage/>; break;
    case 'varianti':   content = <VariantiPage/>; break;
    case 'checkout':   content = <CheckoutPage sub={sub}/>; break;
    default:           content = <HomePage/>;
  }

  return (
    <div className="min-h-screen flex flex-col">
      <ScrollProgress/>
      <CustomCursor/>
      <Header variant={header}/>
      <div className="flex-1">{content}</div>
      <Footer/>
      <CartDrawer/>
    </div>
  );
};

const Root = () => (
  <RouterProvider>
    <CartProvider>
      <App/>
    </CartProvider>
  </RouterProvider>
);

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