/* ============================================================
   APP — router + mount
   ============================================================ */
function Page(){
  const { path } = useRoute();
  if(path==="/") return <HomePage/>;
  if(path==="/about") return <AboutPage/>;
  if(path==="/story") return <StoryPage/>;
  if(path==="/recipes") return <RecipesPage/>;
  if(path.startsWith("/recipes/")) return <RecipeDetail id={path.split("/")[2]}/>;
  if(path==="/reviews") return <ReviewsPage/>;
  if(path==="/wholesale") return <WholesalePage/>;
  if(path==="/faq") return <FaqPage/>;
  if(path==="/checkout") return <CheckoutPage/>;
  if(path.startsWith("/legal/")) return <LegalPage slug={path.split("/")[2]}/>;
  return <HomePage/>;
}

function Shell(){
  const { path } = useRoute();
  const isCheckout = path==="/checkout";
  return (
    <React.Fragment>
      {!isCheckout && <Header/>}
      <main>{<Page/>}</main>
      {!isCheckout && <Footer/>}
      <CartDrawer/>
      {!isCheckout && <StickyCTA/>}
    </React.Fragment>
  );
}

function App(){
  return (
    <RouterProvider>
      <CartProvider>
        <Shell/>
      </CartProvider>
    </RouterProvider>
  );
}

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