// Gaussia — shared UI components & helpers
const { useEffect, useRef, useState } = React;
// Logo mark — recreated as SVG (compass + diamond) to scale crisply on dark bg
function GaussiaMark({ size = 28, color = 'var(--accent)' }) {
return (
);
}
function Logo({ size = 24 }) {
return (
Gaussia
);
}
// Reveal-on-scroll observer
function useReveal() {
useEffect(() => {
document.body.classList.add('js-reveal-on');
const els = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
}
// Arrow icon
function Arrow({ size = 14 }) {
return (
);
}
// Plus icon for FAQ
function Plus({ open }) {
return (
);
}
// Numbered counter
function StepNum({ n }) {
return (
{String(n).padStart(2, '0')}
);
}
// Responsive hooks
function useMediaQuery(breakpoint = 768) {
const [matches, setMatches] = useState(() => window.innerWidth <= breakpoint);
useEffect(() => {
const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
const handler = (e) => setMatches(e.matches);
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, [breakpoint]);
return matches;
}
function useResponsive() {
const isMobile = useMediaQuery(480);
const isTablet = useMediaQuery(768);
const isSmallDesktop = useMediaQuery(1024);
return { isMobile, isTablet, isSmallDesktop };
}
// Mobile menu overlay
function MobileMenu({ open, onClose, links }) {
// Prevent body scroll when open
useEffect(() => {
if (open) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
return () => { document.body.style.overflow = ''; };
}, [open]);
return (
);
}
Object.assign(window, { GaussiaMark, Logo, useReveal, Arrow, Plus, StepNum, useMediaQuery, useResponsive, MobileMenu });