const { useState: useStateApp1 } = React;

function App1() {
  const [cartOpen, setCartOpen] = useStateApp1(false);
  const [cart, setCart] = useStateApp1([]);

  const addToCart = (p) => {
    setCart(prev => {
      const ex = prev.find(i => i.id === p.id);
      if (ex) return prev.map(i => i.id === p.id ? { ...i, qty: i.qty + 1 } : i);
      return [...prev, { ...p, qty: 1 }];
    });
    setCartOpen(true);
  };

  const changeQty = (id, delta) => {
    setCart(prev => prev.flatMap(i => {
      if (i.id !== id) return [i];
      const q = i.qty + delta;
      return q <= 0 ? [] : [{ ...i, qty: q }];
    }));
  };

  const removeItem = (id) => setCart(prev => prev.filter(i => i.id !== id));

  const total     = cart.reduce((a, i) => a + i.price * i.qty, 0);
  const cartCount = cart.reduce((a, i) => a + i.qty, 0);

  return (
    <>
      <Topbar />
      <Navbar1 cartCount={cartCount} onOpenCart={() => setCartOpen(true)} />
      <Hero1 />
      <Categories1 />
      <Products1 onAdd={addToCart} />
      <Benefits1 />
      <Footer1 />
      <CartDrawer1
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        items={cart}
        onQty={changeQty}
        onRemove={removeItem}
        total={total}
      />
    </>
  );
}

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