// app.jsx — top-level App. Client routing + bag state.

const App = () => {
  const [page, setPage] = useState("home");
  const [openProduct, setOpenProduct] = useState(null);
  const [bagOpen, setBagOpen] = useState(false);
  const [items, setItems] = useState([]);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Re-init lucide whenever the UI changes
  useEffect(() => {
    if (window.lucide) lucide.createIcons({ attrs: { "stroke-width": 1.25 } });
  });

  useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [page, openProduct]);

  const onNav = (target) => {
    setOpenProduct(null);
    if (target === "shop") setPage("shop");
    else setPage("home");
  };

  const onOpenProduct = (p) => { setOpenProduct(p); setPage("product"); };

  const onAdd = (p) => {
    setItems(prev => {
      const found = prev.find(it => it.product.id === p.id);
      if (found) return prev.map(it => it.product.id === p.id ? { ...it, qty: it.qty + 1 } : it);
      return [...prev, { product: p, qty: 1 }];
    });
    setBagOpen(true);
  };

  const onRemove = (id) => setItems(prev => prev.filter(it => it.product.id !== id));

  const bagCount = items.reduce((s, it) => s + it.qty, 0);

  return (
    <div className="kit-root">
      <Nav onNav={onNav} onOpenBag={() => setBagOpen(true)} bagCount={bagCount} scrolled={scrolled} current={page} />
      {page === "home"    && <Home onNav={onNav} onOpenProduct={onOpenProduct} onAdd={onAdd} />}
      {page === "shop"    && <Shop onOpenProduct={onOpenProduct} onAdd={onAdd} />}
      {page === "product" && <Product product={openProduct} onAdd={onAdd} onOpenProduct={onOpenProduct} />}
      <Footer onNav={onNav} />
      <BagDrawer open={bagOpen} items={items} onClose={() => setBagOpen(false)} onRemove={onRemove} />
    </div>
  );
};

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