// Shared primitives & icons
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Intersection observer hook for scroll reveal
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
el.classList.add('in');
io.unobserve(el);
}
});
}, { threshold: 0.12 });
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
// Count-up hook
function useCountUp(target, { duration = 1800, start = 0, decimals = 0 } = {}) {
const [v, setV] = useState(start);
const ref = useRef(null);
const started = useRef(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && !started.current) {
started.current = true;
const t0 = performance.now();
const tick = (now) => {
const p = Math.min(1, (now - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setV(start + (target - start) * eased);
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.3 });
io.observe(el);
return () => io.disconnect();
}, [target]);
return [ref, decimals ? v.toFixed(decimals) : Math.round(v)];
}
// Tiny inline icon set (stroke, 20px)
const Icon = ({ name, size = 18, stroke = 1.5, className = '' }) => {
const common = {
width: size, height: size, viewBox: '0 0 24 24',
fill: 'none', stroke: 'currentColor', strokeWidth: stroke,
strokeLinecap: 'round', strokeLinejoin: 'round', className
};
const paths = {
arrow: ,
arrowup: ,
arrowdown: ,
plus: ,
minus: ,
check: ,
chev: ,
globe: <>,
search: <>,
target: <>,
megaphone: ,
code: ,
server: <>,
spark: ,
device: <>,
browser: <>,
pen: ,
mail: <>,
phone: ,
play: ,
sparkles: <>,
chart: ,
zap: ,
ext: ,
close:
};
return ;
};
// Noise-free SVG sparkline
const Sparkline = ({ data = [], width = 120, height = 32, color = 'var(--accent)' }) => {
if (!data.length) return null;
const max = Math.max(...data), min = Math.min(...data);
const range = max - min || 1;
const step = width / (data.length - 1);
const pts = data.map((v, i) => [i * step, height - ((v - min) / range) * height]);
const d = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
const fill = d + ` L ${width} ${height} L 0 ${height} Z`;
return (
);
};
// Logo mark — wordmark only (icon hidden)
const Logo = ({ size = 28 }) => (
);
// Media query hook — subscribes to viewport changes, returns boolean match.
function useMediaQuery(query) {
const get = () => typeof window !== 'undefined' && window.matchMedia(query).matches;
const [matches, setMatches] = useState(get);
useEffect(() => {
const mql = window.matchMedia(query);
const onChange = () => setMatches(mql.matches);
onChange();
mql.addEventListener('change', onChange);
return () => mql.removeEventListener('change', onChange);
}, [query]);
return matches;
}
const useIsMobile = () => useMediaQuery('(max-width: 640px)');
const useIsTablet = () => useMediaQuery('(max-width: 1024px)');
Object.assign(window, { useReveal, useCountUp, Icon, Sparkline, Logo, useMediaQuery, useIsMobile, useIsTablet });