// PELSKIN — App entry, routing & state
const { useState: useStateA, useEffect: useEffectA, useCallback } = React;

function App() {
  const [route, setRoute] = useStateA("home");
  const [mode, setMode] = useStateA("live"); // "waitlist" | "live" — live: Shop + Paystack-Checkout aktiv
  const [cart, setCart] = useStateA([]);
  const [menuOpen, setMenuOpen] = useStateA(false);
  const [cartOpen, setCartOpen] = useStateA(false);
  const [toastMsg, setToastMsg] = useStateA("");

  // persist mode + cart
  useEffectA(() => {
    try {
      const m = localStorage.getItem("pelskin-mode");
      if (m === "live" || m === "waitlist") setMode(m);
      const c = localStorage.getItem("pelskin-cart");
      if (c) setCart(JSON.parse(c));
    } catch {}
  }, []);
  useEffectA(() => { try { localStorage.setItem("pelskin-mode", mode); } catch {} }, [mode]);
  useEffectA(() => { try { localStorage.setItem("pelskin-cart", JSON.stringify(cart)); } catch {} }, [cart]);

  // scroll to top on route change
  useEffectA(() => { window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" }); }, [route]);

  const navigate = useCallback((r) => {
    // waitlist mode redirects shop & checkout to home
    if (mode === "waitlist" && (r === "shop" || r.startsWith("product:") || r === "checkout-success")) {
      setRoute("home"); return;
    }
    setRoute(r);
  }, [mode]);

  const addToCart = useCallback((slug, qty = 1) => {
    setCart(prev => {
      const existing = prev.find(i => i.slug === slug);
      if (existing) return prev.map(i => i.slug === slug ? { ...i, qty: i.qty + qty } : i);
      return [...prev, { slug, qty }];
    });
  }, []);
  const updateQty = useCallback((slug, qty) => {
    if (qty <= 0) { setCart(prev => prev.filter(i => i.slug !== slug)); return; }
    setCart(prev => prev.map(i => i.slug === slug ? { ...i, qty } : i));
  }, []);
  const removeItem = useCallback((slug) => setCart(prev => prev.filter(i => i.slug !== slug)), []);
  const clearCart = useCallback(() => setCart([]), []);

  const toast = useCallback((msg) => {
    setToastMsg(msg);
    setTimeout(() => setToastMsg(""), 2400);
  }, []);

  const openWaitlist = () => navigate("waitlist");

  let page;
  if (route === "home") page = <HomePage />;
  else if (route === "system") page = <SystemPage />;
  else if (route === "shop") page = <ShopPage />;
  else if (route.startsWith("product:")) page = <ProductPage slug={route.split(":")[1]} />;
  else if (route === "quiz") page = <QuizPage />;
  else if (route === "about") page = <AboutPage />;
  else if (route === "journal") page = <JournalPage />;
  else if (route.startsWith("journal:")) page = <JournalPostPage slug={route.split(":")[1]} />;
  else if (route === "waitlist") page = <WaitlistPage />;
  else if (route === "faq") page = <FaqPage />;
  else if (route === "checkout-success") page = <CheckoutSuccessPage />;
  else if (route === "shipping") page = <LegalPage title="Shipping" />;
  else if (route === "privacy") page = <LegalPage title="Privacy" />;
  else if (route === "terms") page = <LegalPage title="Terms" />;
  else if (route === "imprint") page = <LegalPage title="Imprint" />;
  else page = <HomePage />;

  const openCart = useCallback(() => setCartOpen(true), []);

  const ctx = { route, navigate, mode, setMode, cart, addToCart, updateQty, removeItem, clearCart, toast, openCart };

  return (
    <AppCtx.Provider value={ctx}>
      <Header
        onOpenMenu={() => setMenuOpen(true)}
        onOpenCart={() => setCartOpen(true)}
        onOpenWaitlist={openWaitlist}
      />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
      <CartSheet open={cartOpen} onClose={() => setCartOpen(false)} />
      <div key={route}>{page}</div>
      <Footer />
      <Toast message={toastMsg} />
      <ModeToggle />
    </AppCtx.Provider>
  );
}

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