// App principale Monsieur Rod

const App = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [openProduct, setOpenProduct] = React.useState(null);
  const [detailOpen, setDetailOpen] = React.useState(false);
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [ageOK, setAgeOK] = React.useState(() => {
    try { return localStorage.getItem("mr-age-ok") === "1"; } catch (e) { return false; }
  });
  const [toast, setToast] = React.useState({ show: false, msg: "" });
  const toastTimer = React.useRef(null);

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

  // Restore cart
  React.useEffect(() => {
    try {
      const saved = localStorage.getItem("mr-cart");
      if (saved) setCart(JSON.parse(saved));
    } catch (e) {}
  }, []);
  React.useEffect(() => {
    try { localStorage.setItem("mr-cart", JSON.stringify(cart)); } catch (e) {}
  }, [cart]);

  // Global reveal observer
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("reveal--in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -80px 0px" });
    document.querySelectorAll(".reveal:not(.reveal--in)").forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [ageOK]);

  const showToast = (msg) => {
    setToast({ show: true, msg });
    if (toastTimer.current) clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(prev => ({ ...prev, show: false })), 2600);
  };

  const handleOpenProduct = (product) => {
    setOpenProduct(product);
    setDetailOpen(true);
  };
  const handleCloseDetail = () => {
    setDetailOpen(false);
    setTimeout(() => setOpenProduct(null), 600);
  };

  const handleAdd = (product, weight, qty) => {
    const price = product.prices[weight];
    setCart(prev => {
      const idx = prev.findIndex(it => it.id === product.id && it.weight === weight);
      if (idx >= 0) {
        const next = [...prev];
        next[idx] = { ...next[idx], qty: next[idx].qty + qty };
        return next;
      }
      return [...prev, {
        id: product.id,
        name: product.name,
        type: product.typeFull,
        weight,
        price,
        qty,
        emoji: product.emoji,
        image: product.image,
      }];
    });
    showToast(`${qty}× ${product.name} (${weight}) ajouté`);
  };

  const handleUpdateCart = (i, qty) => {
    setCart(prev => prev.map((it, idx) => idx === i ? { ...it, qty } : it));
  };
  const handleRemoveCart = (i) => {
    setCart(prev => prev.filter((_, idx) => idx !== i));
  };

  const cartCount = cart.reduce((s, it) => s + it.qty, 0);

  const handleAgeOK = () => {
    try { localStorage.setItem("mr-age-ok", "1"); } catch (e) {}
    setAgeOK(true);
  };
  const handleAgeNo = () => {
    window.location.href = "https://www.gouvernement.fr/";
  };

  const scrollToShop = () => {
    document.querySelector("#shop")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      {!ageOK && <AgeGate onConfirm={handleAgeOK} onDeny={handleAgeNo} />}
      <Nav scrolled={scrolled} cartCount={cartCount} onOpenCart={() => setCartOpen(true)} />
      <Hero onShop={scrollToShop} />
      <Shop onOpenProduct={handleOpenProduct} />
      <Manifesto />
      <Culture />
      <Trust />
      <CapFrehel />
      <FAQ />
      <Footer />
      <ProductDetail
        product={openProduct}
        open={detailOpen}
        onClose={handleCloseDetail}
        onAdd={(p, w, q) => { handleAdd(p, w, q); setCartOpen(true); }}
      />
      <Cart
        items={cart}
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        onUpdate={handleUpdateCart}
        onRemove={handleRemoveCart}
      />
    </>
  );
};

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