// Shared UI components
const { useState, useEffect, useRef } = React;
const ROUTES = ['home', 'services', 'cases', 'about', 'insights', 'contact'];
function useHashRoute() {
const [route, setRoute] = useState(() => (window.location.hash.replace('#/', '') || 'home'));
useEffect(() => {
const onHash = () => {
const r = window.location.hash.replace('#/', '') || 'home';
setRoute(r);
window.scrollTo({top: 0, behavior: 'instant'});
};
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
const navigate = (r) => { window.location.hash = '#/' + r; };
return [route, navigate];
}
function useScrolled(threshold = 80) {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > threshold);
window.addEventListener('scroll', onScroll);
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, [threshold]);
return scrolled;
}
function FadeUp({children, delay = 0, className = ''}) {
const ref = useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setTimeout(() => setVisible(true), delay); obs.disconnect(); }
}, {threshold: 0.1});
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, [delay]);
return {children}
;
}
function CountUp({value, suffix = '', duration = 1800}) {
const ref = useRef(null);
const [n, setN] = useState(0);
useEffect(() => {
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) {
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const ease = 1 - Math.pow(1 - p, 3);
setN(Math.floor(value * ease));
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
obs.disconnect();
}
}, {threshold: 0.5});
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, [value, duration]);
return {n}{suffix};
}
function Logo({onDark = false}) {
return (
MANTAGA
);
}
function Nav({route, navigate, dark = false}) {
const scrolled = useScrolled(60);
const [open, setOpen] = useState(false);
const navClass = dark
? (scrolled ? 'nav nav-dark-solid' : 'nav nav-transparent')
: (scrolled ? 'nav nav-solid' : 'nav nav-transparent');
const onDark = dark && !scrolled;
const linkColor = onDark ? 'rgba(255,255,255,0.85)' : 'var(--dark-text)';
const links = [
['services', 'Services'],
['cases', 'Case Studies'],
['about', 'About'],
['insights', 'Insights'],
['contact', 'Contact'],
];
React.useEffect(() => {
document.body.style.overflow = open ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [open]);
return (
);
}
function Footer() {
return (
);
}
// SVG icon set
const Icon = {
rocket: () => ,
file: () => ,
chart: () => ,
package: () => ,
pie: () => ,
briefcase: () => ,
target: () => ,
arrow: () => ,
};
// Hero abstract visual
function HeroVisual() {
return (
);
}
Object.assign(window, {useHashRoute, useScrolled, FadeUp, CountUp, Nav, Footer, Logo, Icon, HeroVisual});