/* global React */ const { useState, useEffect, useRef, useMemo } = React; // =============== TWEAKS DEFAULTS =============== const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "paper", "weight": "regular", "showBadges": true }/*EDITMODE-END*/; // =============== BRAND =============== function Monogram({ size = 22, className = "" }) { // "II." — custom paired bars with a dot return ( II. ); } function Nav({ onCta }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } function Arrow({ size = 14 }) { return ( ); } // =============== REVEAL HOOK =============== function useReveal() { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { if (!ref.current) return; const obs = new IntersectionObserver( (entries) => { entries.forEach(e => { if (e.isIntersecting) { setShown(true); obs.disconnect(); } }); }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' } ); obs.observe(ref.current); return () => obs.disconnect(); }, []); return [ref, shown]; } function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style = {} }) { const [ref, shown] = useReveal(); return ( {children} ); } // =============== SECTION NUMBER WHEEL =============== function NumberWheel() { const [sections, setSections] = useState([]); const [activeIndex, setActiveIndex] = useState(0); useEffect(() => { const collect = () => { const els = Array.from(document.querySelectorAll('[data-screen-label]')); return els .map(el => { const label = el.dataset.screenLabel || ''; const m = label.match(/^(\d+)\s+(.+)$/); return m ? { num: m[1].padStart(2, '0'), title: m[2], el } : null; }) .filter(Boolean); }; const init = collect(); setSections(init); let raf = 0; const compute = () => { raf = 0; const trigger = window.innerHeight * 0.45; let active = 0; for (let i = 0; i < init.length; i++) { const r = init[i].el.getBoundingClientRect(); if (r.top <= trigger) active = i; else break; } setActiveIndex(active); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(compute); }; compute(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); if (!sections.length) return null; const ARC_STEP = 9; const RADIUS = 340; const rotation = -activeIndex * ARC_STEP; return ( ); } // =============== SCENE SHAPES (scroll-bound parallax) =============== function Scene({ shapes }) { const ref = useRef(null); useEffect(() => { const wrap = ref.current; if (!wrap) return; const parent = wrap.parentElement; const els = wrap.querySelectorAll('.scene-shape'); let raf = 0; const compute = () => { raf = 0; const rect = parent.getBoundingClientRect(); const center = rect.top + rect.height / 2; const offset = center - window.innerHeight / 2; els.forEach(el => { const speed = parseFloat(el.dataset.speed || '0.18'); el.style.setProperty('--sy', (-offset * speed).toFixed(1)); }); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(compute); }; compute(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); return (