// ====================== APP ======================
const SAMPLE = {
  hero:  { id: "audax5l", name: "Álcool 70% Audax Profissional 5L", price: 38.9, cat: "Álcool" },
  copa:  { id: "cafe", name: "Café Santa Clara Extraforte 250g", price: 12.5, cat: "Copa e cozinha" },
};

function App() {
  const [cart, setCart] = usePersistentCart();
  const [cartOpen, setCartOpen] = React.useState(false);
  const toast = useToast();
  const count = cart.reduce((a, b) => a + b.qty, 0);

  const addToCart = (p) => {
    setCart((c) => {
      const ex = c.find((x) => x.id === p.id);
      if (ex) return c.map((x) => x.id === p.id ? { ...x, qty: x.qty + 1 } : x);
      return [...c, { ...p, qty: 1 }];
    });
    toast(`${p.name} adicionado ao carrinho`);
  };
  const removeFromCart = (id) => setCart((c) => c.filter((x) => x.id !== id));

  const handleNav = (id) => {
    if (PAGE_URLS[id]) { window.location.href = PAGE_URLS[id]; return; }
    const c = CATEGORIES.find((x) => x.id === id);
    toast(`Abrindo categoria: ${c ? c.label : id}`);
  };
  const handleSearch = (q, cat) => {
    if (!q || !q.trim()) { toast("Digite o que você procura"); return; }
    window.location.href = "Produtos de Limpeza.html?q=" + encodeURIComponent(q.trim());
  };

  return (
    <div style={{ minHeight: "100vh", background: "var(--soft)" }}>
      <div className="jgf-desktop-chrome">
        <TopBar />
        <MainHeader
          cartCount={count}
          onCart={() => setCartOpen(true)}
          onSearch={handleSearch}
        />
        <CategoryNav onNav={handleNav} />
      </div>
      <MobileChrome
        cartCount={count}
        onCart={() => setCartOpen(true)}
        onSearch={handleSearch}
        onNav={handleNav}
      />

      <Hero onCta={() => { window.location.href = "Produtos de Limpeza.html"; }} />
      <TrustBar />
      <CategoryGrid onNav={handleNav} />
      <InstitutionalCards
        onContact={() => toast("Conectando você com um consultor JGF…")}
      />
      <Diferenciais />
      <ReviewsCarousel />
      <ContactSection onToast={toast} />
      <LocationMap />
      <Footer />

      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} items={cart} onRemove={removeFromCart} onClear={() => setCart([])} />
      <CartFAB count={count} onClick={() => setCartOpen(true)} />
      <WhatsAppFAB />
      <MobileOrderBar count={count} onCart={() => setCartOpen(true)} />
    </div>
  );
}

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