/* HEY!BEAR — app root */
const { useState: useS, useEffect: useE } = React;

const ALL = {};
HB.products.forEach((p) => (ALL[p.id] = p));
ALL[HB.pack.id] = { ...HB.pack, flavor: "Kit completo", photo: HB.products[0].photo, phColors: ["#FFD0E6", "#FFB6D9"] };

function App() {
  const [route, setRoute] = useS("home");
  const [cartOpen, setCartOpen] = useS(false);
  const [menuOpen, setMenuOpen] = useS(false);
  const [cart, setCart] = useS(() => {
    try { return JSON.parse(localStorage.getItem("hb_cart") || "[]"); } catch { return []; }
  });
  const [toast, setToast] = useS(null);

  useE(() => { localStorage.setItem("hb_cart", JSON.stringify(cart)); }, [cart]);

  const nav = (r) => { setRoute(r); setMenuOpen(false); window.scrollTo({ top: 0, behavior: "instant" }); };

  const add = (id, qty = 1) => {
    setCart((c) => {
      const ex = c.find((x) => x.id === id);
      if (ex) return c.map((x) => (x.id === id ? { ...x, qty: x.qty + qty } : x));
      return [...c, { id, qty }];
    });
    const prod = ALL[id];
    setToast(prod ? prod.name + " na bolsinha!" : "Adicionado!");
    setTimeout(() => setToast(null), 2200);
    setCartOpen(true);
  };
  const setQty = (id, q) => setCart((c) => q <= 0 ? c.filter((x) => x.id !== id) : c.map((x) => (x.id === id ? { ...x, qty: q } : x)));
  const remove = (id) => setCart((c) => c.filter((x) => x.id !== id));

  const items = cart.map((x) => ({ ...ALL[x.id], qty: x.qty })).filter((x) => x.id);
  const count = cart.reduce((s, x) => s + x.qty, 0);
  const total = items.reduce((s, x) => s + x.price * x.qty, 0);

  let page;
  if (route === "home") page = <Home nav={nav} add={add} />;
  else if (route === "shop") page = <Shop nav={nav} add={add} />;
  else if (route === "sobre") page = <Sobre nav={nav} />;
  else if (route === "feedbacks") page = <Feedbacks nav={nav} add={add} />;
  else if (route === "contato") page = <Contato />;
  else if (ALL[route] && ALL[route].bullets) page = <PDP p={ALL[route]} nav={nav} add={add} />;
  else page = <Home nav={nav} add={add} />;

  return (
    <div>
      <Header nav={nav} route={route} count={count} onCart={() => setCartOpen(true)} onMenu={() => setMenuOpen(true)} />
      {page}
      <Footer nav={nav} />
      <CartDrawer open={cartOpen} items={items} onClose={() => setCartOpen(false)} setQty={setQty} remove={remove} total={total} nav={nav} />

      {/* Mobile menu */}
      <div className={"scrim" + (menuOpen ? " show" : "")} onClick={() => setMenuOpen(false)} />
      <aside className={"drawer" + (menuOpen ? " show" : "")} style={{ left: 0, right: "auto", transform: menuOpen ? "none" : "translateX(-100%)", width: 300 }}>
        <div className="drawer-head"><Logo size="sm" /><button className="icon-btn" onClick={() => setMenuOpen(false)}>✕</button></div>
        <div className="drawer-body">
          {[["shop", "Shop"], ["creatina", "Creatina"], ["glow", "Glow"], ["sleep", "Sleep"], ["cravings", "Cravings"], ["feedbacks", "Feedbacks"], ["sobre", "Sobre"], ["contato", "Contato"]].map(([id, l]) => (
            <a key={id} onClick={() => nav(id)} style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, padding: "10px 0", color: route === id ? "var(--pink)" : "var(--ink)", cursor: "pointer" }}>{l}</a>
          ))}
        </div>
      </aside>

      <div className={"toast" + (toast ? " show" : "")}><span className="tdot" />{toast}</div>
    </div>
  );
}

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