// Shared hooks & utilities — exported to window for all section files
const useInView = (threshold = 0.12) => {
const ref = React.useRef(null);
const [inView, setInView] = React.useState(false);
React.useEffect(() => {
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); obs.disconnect(); }
}, { threshold });
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, []);
return [ref, inView];
};
const useCounter = (target, inView, duration = 1400) => {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
if (!inView) return;
let current = 0;
const step = target / (duration / 16);
const timer = setInterval(() => {
current += step;
if (current >= target) { setCount(target); clearInterval(timer); }
else setCount(Math.floor(current));
}, 16);
return () => clearInterval(timer);
}, [inView, target]);
return count;
};
const scrollToSection = (id) => {
const el = document.getElementById(id);
if (!el) return;
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
const SectionLabel = ({ children }) => (
{children}
);
const SectionTitle = ({ children, light = false }) => (
{children}
);
const RedLine = ({ width = 48, style = {} }) => (
);
const Placeholder = ({ label = 'Image placeholder', width = '100%', height = 280, style = {} }) => (
);
Object.assign(window, { useInView, useCounter, scrollToSection, SectionLabel, SectionTitle, RedLine, Placeholder });