/* global React */ const { useState, useEffect, useRef, useCallback, useMemo } = React; /* ============================================================ Router — history API, supports back/forward ============================================================ */ function useHashRoute() { const [route, setRoute] = useState(() => window.location.pathname || '/'); useEffect(() => { const onPop = () => { const r = window.location.pathname || '/'; setRoute(r); window.scrollTo({ top: 0, behavior: 'instant' }); }; window.addEventListener('popstate', onPop); return () => window.removeEventListener('popstate', onPop); }, []); const navigate = useCallback((path) => { history.pushState(null, '', path); window.dispatchEvent(new PopStateEvent('popstate')); }, []); return [route, navigate]; } function Link({ to, children, className, ...rest }) { const onClick = (e) => { e.preventDefault(); history.pushState(null, '', to); window.dispatchEvent(new PopStateEvent('popstate')); }; return {children}; } /* ============================================================ Reveal on scroll ============================================================ */ function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal:not(.in)'); const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('in'); io.unobserve(entry.target); } }); }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }); } /* ============================================================ Animated counter ============================================================ */ function Counter({ value, suffix = '', prefix = '', duration = 1600, decimals = 0 }) { const [n, setN] = useState(0); const ref = useRef(null); const startedRef = useRef(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !startedRef.current) { startedRef.current = true; const start = performance.now(); const tick = (now) => { const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); setN(value * eased); if (t < 1) requestAnimationFrame(tick); else setN(value); }; requestAnimationFrame(tick); } }); }, { threshold: 0.4 }); io.observe(ref.current); return () => io.disconnect(); }, [value, duration]); const formatted = decimals > 0 ? n.toFixed(decimals) : Math.round(n).toLocaleString(); return {prefix}{formatted}{suffix}; } /* ============================================================ Icons (inline SVG) ============================================================ */ const Icon = { Arrow: ({ size = 16 }) => ( ), ArrowUpRight: ({ size = 14 }) => ( ), Plus: ({ size = 14 }) => ( ), X: ({ size = 14 }) => ( ), Linkedin: ({ size = 16 }) => ( ), Mail: ({ size = 16 }) => ( ), Voice: () => ( ), Chat: () => ( ), Mesh: () => ( ), Shield: () => ( ), Diagram: () => ( ), Spark: () => ( ), Layers: () => ( ), Bank: () => ( ), Plane: () => ( ), Truck: () => ( ), Headphones: () => ( ), Globe: () => ( ), Lock: () => ( ), Check: ({ size = 14 }) => ( ), }; /* ============================================================ Top Nav ============================================================ */ function Nav({ route }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ { to: '/', label: 'Home' }, { to: '/about', label: 'About' }, { to: '/services', label: 'Services' }, { to: '/use-cases', label: 'Use Cases' }, { to: '/contact', label: 'Contact' }, ]; const active = (to) => to === '/' ? route === '/' : route.startsWith(to); return (

Start a conversation

); } /* ============================================================ Footer ============================================================ */ function Footer() { return ( ); } /* Expose */ Object.assign(window, { useHashRoute, Link, useReveal, Counter, Icon, Nav, Footer, });