// Main App — orchestrates scroll progress, theme transitions, sections, cart. const { useState, useEffect, useRef, useMemo } = React; function App() { const [theme, setTheme] = useState('onyx'); // committed theme const [hoverTheme, setHover] = useState(null); // preview theme const [view, setView] = useState('home'); // 'home' | 'product' const [activeProduct, setAP] = useState(null); const [cart, setCart] = useState([]); const [cartOpen, setCartOpen] = useState(false); const [scrollY, setScrollY] = useState(0); const [vh, setVh] = useState(typeof window !== 'undefined' ? window.innerHeight : 800); const [orderDone, setOrderDone] = useState(false); // Apply theme to const effectiveTheme = hoverTheme || theme; useEffect(() => { document.documentElement.setAttribute('data-theme', effectiveTheme); }, [effectiveTheme]); // Trigger flash animation on committed theme change useEffect(() => { const el = document.getElementById('themeFlash'); if (!el) return; el.classList.remove('active'); void el.offsetWidth; el.classList.add('active'); }, [theme]); // Track scroll useEffect(() => { const onScroll = () => setScrollY(window.scrollY); const onResize = () => setVh(window.innerHeight); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); }; }, []); // Section heights — landing 1vh, box-pin 4vh (long pin so the open box holds), then collection const landingH = vh; const boxPinH = vh * 4; // total scrollable for box section const landingProgress = Math.min(1, scrollY / (landingH * 0.8)); // box section starts at landingH and runs for boxPinH const boxRaw = (scrollY - landingH) / boxPinH; // Remap: video scrubs through in the first 65% of scroll, then HOLDS open for the last 35% const scrubWindow = 0.65; const boxProgress = Math.max(0, Math.min(1, boxRaw / scrubWindow)); const inBoxRange = scrollY >= landingH && scrollY < landingH + boxPinH; // Add to cart const addToCart = (p) => { setCart(prev => { const ex = prev.find(x => x.id === p.id); if (ex) return prev.map(x => x.id === p.id ? {...x, qty: x.qty+1} : x); return [...prev, { ...p, qty: 1 }]; }); setCartOpen(true); }; const removeFromCart = (id) => setCart(prev => prev.filter(x => x.id !== id)); const cartCount = cart.reduce((s, i) => s + i.qty, 0); // Selecting a product → commit theme + go to product view const selectProduct = (p) => { setAP(p); if (p.theme !== theme) setTheme(p.theme); setView('product'); setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 50); }; const backToHome = () => { setView('home'); setTimeout(() => { const el = document.getElementById('collection'); if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' }); }, 50); }; const onNav = (id) => { if (id === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; } if (view === 'product') setView('home'); setTimeout(() => { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' }); }, 50); }; const onComplete = () => { setOrderDone(true); setTimeout(() => { setCart([]); setOrderDone(false); setCartOpen(false); }, 2600); }; // Open cart should temporarily switch to onyx for the discreet checkout vibe const checkoutTheme = cartOpen ? 'onyx' : effectiveTheme; useEffect(() => { document.documentElement.setAttribute('data-theme', checkoutTheme); }, [checkoutTheme]); return ( <>