// ---- SÉRÈNE — app shell, routing, cart state ------------------------- /* =================== HEADER =================== */ function Header({ go, current, count, onCartClick }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); const navItems = CATEGORIES.slice(0, 5); return ( <>
Livraison offerte dès 120 € · Emballage cadeau gratuit
{/* Left: nav (desktop) / menu (mobile) */} {/* Center: logo */} {/* Right: icons */}
{/* Mobile menu */} {menuOpen && (
SÉRÈNE
)} ); } const ic = { background: "none", border: "none", color: "var(--ink)", cursor: "pointer", display: "flex", padding: 2 }; const mNav = { background: "none", border: "none", textAlign: "left", fontFamily: "var(--font-display)", fontSize: 32, color: "var(--ink)", padding: "12px 0", borderBottom: "1px solid var(--line-soft)", cursor: "pointer" }; /* =================== CART DRAWER =================== */ function CartDrawer({ open, onClose, cart, setQty, removeItem, go }) { const sub = cart.reduce((s, i) => s + i.price * i.qty, 0); return ( <>
); } /* =================== TOAST =================== */ function Toast({ msg }) { return (
{msg}
); } /* =================== FOOTER =================== */ function Footer({ go }) { return ( ); } const FootCol = ({ title, links }) => (

{title}

); /* =================== APP =================== */ function App() { const [route, setRoute] = useState({ page: "home", params: {} }); const [cart, setCart] = useState(() => { try { return JSON.parse(localStorage.getItem("serene_cart")) || []; } catch (e) { return []; } }); const [drawer, setDrawer] = useState(false); const [toast, setToast] = useState(""); const [order, setOrder] = useState(null); const toastTimer = useRef(null); useEffect(() => { localStorage.setItem("serene_cart", JSON.stringify(cart)); }, [cart]); const go = (page, params = {}) => { setRoute({ page, params }); window.scrollTo(0, 0); }; const showToast = (msg) => { setToast(msg); clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setToast(""), 2400); }; const addToCart = (p, qty = 1, color = null) => { const key = p.id + (color || ""); setCart((c) => { const ex = c.find((i) => i.key === key); if (ex) return c.map((i) => (i.key === key ? { ...i, qty: i.qty + qty } : i)); return [...c, { key, id: p.id, name: p.name, price: p.price, tone: p.tone, catName: p.catName, color, qty }]; }); showToast(`${p.name} ajouté au panier`); }; const setQty = (key, qty) => setCart((c) => c.map((i) => (i.key === key ? { ...i, qty } : i))); const removeItem = (key) => setCart((c) => c.filter((i) => i.key !== key)); const count = cart.reduce((s, i) => s + i.qty, 0); const placeOrder = (data) => { const num = "SR-" + Math.floor(10000 + Math.random() * 89999); setOrder({ ...data, num }); setCart([]); go("confirmation"); }; let view; if (route.page === "home") view = ; else if (route.page === "category") view = ; else if (route.page === "product") view = ; else if (route.page === "cart") view = ; else if (route.page === "checkout") view = ; else if (route.page === "confirmation") view = ; return ( <>
setDrawer(true)} />
{view}