const { useState, useEffect, useRef } = React; // ─── Reveal hook ────────────────────────────────────────── function useReveal() { useEffect(() => { const obs = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('visible');obs.unobserve(e.target);}}); }, { threshold: 0, rootMargin: '0px 0px -8% 0px' }); document.querySelectorAll('.fade-up').forEach((el) => obs.observe(el)); return () => obs.disconnect(); }, []); } // ─── Counter animation ──────────────────────────────────── function Counter({ value, prefix = '', suffix = '', duration = 2000, decimals = 0 }) { const [n, setN] = useState(0); const ref = useRef(null); const started = useRef(false); useEffect(() => { const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started.current) { started.current = true; const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setN(value * eased); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); } }); }, { threshold: 0.4 }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, [value, duration]); const display = decimals > 0 ? n.toFixed(decimals) : Math.round(n).toLocaleString(); return {prefix}{display}{suffix}; } // ─── Scroll progress ────────────────────────────────────── function ScrollBar() { const [w, setW] = useState(0); useEffect(() => { const onScroll = () => { const h = document.documentElement.scrollHeight - window.innerHeight; setW(h > 0 ? window.scrollY / h * 100 : 0); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); return
; } // ─── Navigation ─────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const [active, setActive] = useState(''); useEffect(() => { const onS = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', onS, { passive: true }); return () => window.removeEventListener('scroll', onS); }, []); useEffect(() => { const ids = ['how-it-works', 'the-opportunity', 'our-process', 'the-terminal', 'invest']; const obs = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) setActive(e.target.id);}); }, { rootMargin: '-40% 0px -55% 0px' }); ids.forEach((id) => {const el = document.getElementById(id);if (el) obs.observe(el);}); return () => obs.disconnect(); }, []); const links = [ { id: 'how-it-works', label: 'How It Works' }, { id: 'the-opportunity', label: 'The Opportunity' }, { id: 'our-process', label: 'Our Process' }, { id: 'the-terminal', label: 'The Terminal' }, { id: 'invest', label: 'Invest' }]; return ( ); } // ─── Hero ───────────────────────────────────────────────── function HeroVideo() { const ref = useRef(null); const [videoReady, setVideoReady] = useState(false); useEffect(() => { const v = ref.current; if (!v) return; const src = 'https://stream.mux.com/26MgMTFdAPfoK9klfmXbZIzM006OQVvmeRk6OKTRqIrk.m3u8'; let hls; const tryPlay = () => {v.play().catch(() => {});}; const markReady = () => setVideoReady(true); v.addEventListener('canplaythrough', markReady); v.addEventListener('playing', markReady); v.addEventListener('loadeddata', markReady); const fallback = setTimeout(markReady, 4000); if (v.canPlayType('application/vnd.apple.mpegurl')) { v.src = src; v.addEventListener('loadedmetadata', tryPlay, { once: true }); } else if (window.Hls && window.Hls.isSupported()) { hls = new window.Hls({ capLevelToPlayerSize: false, maxBufferLength: 30, maxMaxBufferLength: 60, abrEwmaDefaultEstimate: 5000000, }); hls.loadSource(src); hls.attachMedia(v); hls.on(window.Hls.Events.MANIFEST_PARSED, () => { if (hls.levels && hls.levels.length) { const top = hls.levels.length - 1; hls.startLevel = top; hls.currentLevel = top; } tryPlay(); }); } // Also try on first user interaction in case autoplay is blocked const onAny = () => {tryPlay();}; document.addEventListener('click', onAny, { once: true }); document.addEventListener('scroll', onAny, { once: true, passive: true }); document.addEventListener('mousemove', onAny, { once: true }); return () => { clearTimeout(fallback); v.removeEventListener('canplaythrough', markReady); v.removeEventListener('playing', markReady); v.removeEventListener('loadeddata', markReady); if (hls) hls.destroy(); document.removeEventListener('click', onAny); document.removeEventListener('scroll', onAny); document.removeEventListener('mousemove', onAny); }; }, []); return ( <>