// App shell — routing + cart state
const { useState: useSt, useEffect: useEf } = React;

function App() {
  const [route, setRoute] = useSt(() => {
    try {
      const saved = JSON.parse(localStorage.getItem("tf_route") || "null");
      return saved || { page: "home", id: null };
    } catch { return { page: "home", id: null }; }
  });
  const [cart, setCart] = useSt(() => {
    try { return JSON.parse(localStorage.getItem("tf_cart") || "[]"); } catch { return []; }
  });
  const [cartOpen, setCartOpen] = useSt(false);

  useEf(() => { localStorage.setItem("tf_cart", JSON.stringify(cart)); }, [cart]);
  useEf(() => { localStorage.setItem("tf_route", JSON.stringify(route)); }, [route]);
  useEf(() => { window.scrollTo({ top: 0 }); }, [route.page, route.id]);

  const go = (page, id = null) => {
    if (page === "home" && typeof id === "string" && id.startsWith("#")) {
      setRoute({ page: "home", id: null });
      setTimeout(() => {
        const el = document.querySelector(id);
        if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
      }, 100);
      return;
    }
    setRoute({ page, id });
  };

  const addToCart = (item) => {
    const qty = item.qty || 1;
    setCart(c => {
      const existing = c.find(i => i.id === item.id);
      if (existing) return c.map(i => i.id === item.id ? { ...i, qty: i.qty + qty } : i);
      return [...c, { ...item, qty }];
    });
    // subtle feedback: open cart briefly
    setCartOpen(true);
    setTimeout(() => { /* leave open */ }, 10);
  };

  return (
    <>
      <Header page={route.page} go={go} cart={cart} openCart={() => setCartOpen(true)} />
      <main>
        {route.page === "home" && <HomePage go={go} addToCart={addToCart} />}
        {route.page === "shop" && <ShopPage go={go} addToCart={addToCart} />}
        {route.page === "pocket" && <PocketPage go={go} addToCart={addToCart} />}
        {route.page === "product" && <ProductPage id={route.id} go={go} addToCart={addToCart} openCart={() => setCartOpen(true)} />}
        {route.page === "checkout" && <CheckoutPage cart={cart} setCart={setCart} go={go} />}
      </main>
      <Footer go={go} />
      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} cart={cart} setCart={setCart} go={go} />
    </>
  );
}

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