// Main app — ties acts together, custom cursor, intro, lang toggle const { ActHero, ActCraft, ActColors, ActMaalem, ActPackaging, ActContact, ActFooter, ProductPage } = window; const PRODUCT_ROUTE_SLUGS = ['fes', 'chefchaouen', 'marrakech']; function CustomCursor() { const { isTouch } = useResponsive(); const dotRef = useRef(null); const ringRef = useRef(null); const targetRef = useRef({ x: 0, y: 0 }); const ringRef2 = useRef({ x: 0, y: 0 }); useEffect(() => { if (isTouch) return; const onMove = e => { targetRef.current = { x: e.clientX, y: e.clientY }; if (dotRef.current) { dotRef.current.style.left = e.clientX + 'px'; dotRef.current.style.top = e.clientY + 'px'; } }; const onHoverIn = e => { if (e.target.closest('a, button, [data-cursor="hover"]')) { ringRef.current?.classList.add('hover'); } }; const onHoverOut = e => { if (e.target.closest('a, button, [data-cursor="hover"]')) { ringRef.current?.classList.remove('hover'); } }; let raf; const animate = () => { ringRef2.current.x += (targetRef.current.x - ringRef2.current.x) * 0.15; ringRef2.current.y += (targetRef.current.y - ringRef2.current.y) * 0.15; if (ringRef.current) { ringRef.current.style.left = ringRef2.current.x + 'px'; ringRef.current.style.top = ringRef2.current.y + 'px'; } raf = requestAnimationFrame(animate); }; animate(); window.addEventListener('mousemove', onMove); document.addEventListener('mouseover', onHoverIn); document.addEventListener('mouseout', onHoverOut); return () => { window.removeEventListener('mousemove', onMove); document.removeEventListener('mouseover', onHoverIn); document.removeEventListener('mouseout', onHoverOut); cancelAnimationFrame(raf); }; }, [isTouch]); // Bind existing DOM elements useEffect(() => { dotRef.current = document.getElementById('cursor-dot'); ringRef.current = document.getElementById('cursor-ring'); }, []); return null; } function Intro({ lang }) { const [done, setDone] = useState(false); const [phase, setPhase] = useState(0); useEffect(() => { const t1 = setTimeout(() => setPhase(1), 300); const t2 = setTimeout(() => setPhase(2), 1100); const t3 = setTimeout(() => setDone(true), 2400); return () => [t1,t2,t3].forEach(clearTimeout); }, []); const isAR = lang === 'ar'; return (
= 1 ? 1 : 0, transition: 'opacity 0.8s' }}> {isAR ? 'المدينة القديمة، فاس — المغرب' : 'EST. MMXXIV — MÉDINA DE FÈS'}
= 2 ? 1 : 0, transform: phase >= 2 ? 'translateY(0) scale(1)' : 'translateY(20px) scale(0.95)', transition: 'opacity 1s, transform 1.2s cubic-bezier(0.22,0.61,0.36,1)' }} />
= 2 ? 1 : 0, transform: phase >= 2 ? 'translateY(0)' : 'translateY(14px)', transition: 'opacity 1s 0.18s, transform 1.2s 0.18s cubic-bezier(0.22,0.61,0.36,1)' }}> Belgham
); } function Progress() { return null; } const WAITLIST_JOINED_KEY = 'belgham-waitlist-joined'; const WAITLIST_DISMISSED_KEY = 'belgham-waitlist-dismissed'; function WaitlistForm({ lang, source, variant = 'modal', onDone }) { const content = window.CONTENT[lang].waitlist; const isRTL = lang === 'ar'; const isSection = variant === 'section'; const [email, setEmail] = useState(''); const [status, setStatus] = useState('idle'); const [joined, setJoined] = useState(false); const [message, setMessage] = useState(''); useEffect(() => { const syncJoined = () => { setJoined(!!localStorage.getItem(WAITLIST_JOINED_KEY)); }; syncJoined(); window.addEventListener('belgham:waitlist-joined', syncJoined); window.addEventListener('storage', syncJoined); return () => { window.removeEventListener('belgham:waitlist-joined', syncJoined); window.removeEventListener('storage', syncJoined); }; }, []); const submit = async event => { event.preventDefault(); const normalized = email.trim().toLowerCase(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalized)) { setMessage(content.error); return; } setStatus('submitting'); setMessage(''); try { const response = await fetch('/api/waitlist', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: normalized, lang, source }) }); if (!response.ok) throw new Error('waitlist failed'); localStorage.setItem(WAITLIST_JOINED_KEY, normalized); localStorage.removeItem(WAITLIST_DISMISSED_KEY); window.dispatchEvent(new CustomEvent('belgham:waitlist-joined')); setJoined(true); setStatus('success'); if (onDone) onDone(); } catch (error) { setStatus('idle'); setMessage(content.serverError); } }; if (joined || status === 'success') { return (
{content.eyebrow}

{content.successTitle}

{content.successBody}

); } return (
{message && (
{message}
)}
); } function WaitlistModal({ lang, suppressAutoOpen = false }) { const content = window.CONTENT[lang].waitlist; const { isPhone, isTablet } = useResponsive(); const isRTL = lang === 'ar'; const [open, setOpen] = useState(false); const [joined, setJoined] = useState(false); useEffect(() => { const show = () => { setJoined(!!localStorage.getItem(WAITLIST_JOINED_KEY)); setOpen(true); }; const hasJoined = localStorage.getItem(WAITLIST_JOINED_KEY); const hasDismissed = localStorage.getItem(WAITLIST_DISMISSED_KEY); const timer = suppressAutoOpen ? null : setTimeout(() => { if (!hasJoined && !hasDismissed) show(); }, 2900); window.addEventListener('belgham:open-waitlist', show); return () => { if (timer) clearTimeout(timer); window.removeEventListener('belgham:open-waitlist', show); }; }, [suppressAutoOpen]); useEffect(() => { if (!open) return; const onKey = event => { if (event.key === 'Escape') close(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); const close = () => { localStorage.setItem(WAITLIST_DISMISSED_KEY, '1'); setOpen(false); }; if (!open) return null; return (
{ if (event.target === event.currentTarget) close(); }} >
{isPhone && (
{isRTL ? 'أصفر فاس' : 'FÈS YELLOW'} {isRTL ? 'الإصدار ٠١' : 'DROP 01'}
)}
{joined ? (
{content.eyebrow}

{content.successTitle}

{content.successBody}

) : ( <>
{content.eyebrow}

{content.title}

{content.body}

setJoined(true)} />
{content.privacy}
)}
{!isPhone && (
{isRTL ? 'رابط خاص' : 'PRIVATE LINK'} {isRTL ? 'إصدار محدود' : 'LIMITED DROP'}
)}
); } function WaitlistSection({ lang }) { const content = window.CONTENT[lang].waitlist; const { isPhone, isTablet } = useResponsive(); const isRTL = lang === 'ar'; return (
{content.sectionEyebrow}

{content.sectionTitle}

{content.sectionBody}

{content.privacy}
{content.sectionNote}
); } function Nav({ lang, setLang }) { const content = window.CONTENT[lang]; const { isPhone, isTablet } = useResponsive(); const openWaitlist = () => { window.dispatchEvent(new CustomEvent('belgham:open-waitlist')); }; return ( ); } function App() { const [tweaks, setTweak] = window.useTweaks({ motionIntensity: 'standard', heroColorway: 'fes', showCallouts: true, cursorStyle: 'minimal' }); const [lang, setLang] = useState('en'); const [productIndex, setProductIndex] = useState(null); useEffect(() => { document.documentElement.lang = lang; document.documentElement.classList.toggle('rtl', lang === 'ar'); document.body.style.direction = lang === 'ar' ? 'rtl' : 'ltr'; }, [lang]); useEffect(() => { const syncProductRoute = () => { const slug = window.location.hash.replace(/^#product-/, ''); const index = PRODUCT_ROUTE_SLUGS.indexOf(slug); setProductIndex(window.location.hash.startsWith('#product-') && index >= 0 ? index : null); }; syncProductRoute(); window.addEventListener('hashchange', syncProductRoute); window.addEventListener('popstate', syncProductRoute); return () => { window.removeEventListener('hashchange', syncProductRoute); window.removeEventListener('popstate', syncProductRoute); }; }, []); const openProduct = useCallback(index => { const slug = PRODUCT_ROUTE_SLUGS[index] || PRODUCT_ROUTE_SLUGS[0]; window.history.pushState(null, '', `#product-${slug}`); setProductIndex(index); }, []); const closeProduct = useCallback(() => { window.history.pushState(null, '', '#collection'); setProductIndex(null); }, []); // Remove original HTML placeholder intro overlay useEffect(() => { const intro = document.getElementById('intro'); if (intro) intro.remove(); const nav = document.querySelector('nav.nav'); if (nav) nav.remove(); }, []); return ( <>