/* Shared components - reveal-on-scroll, animated counter, striped placeholder, eyebrow */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ============ Reveal on scroll ============
function Reveal({ children, delay = 0, as = "div", className = "" }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
if (!ref.current) return;
if (typeof IntersectionObserver === "undefined") {
setShown(true);
return;
}
// Immediate fallback: if element is already in viewport on mount, show right away.
const rect = ref.current.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
const id = setTimeout(() => setShown(true), delay);
return () => clearTimeout(id);
}
const obs = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(() => setShown(true), delay);
obs.disconnect();
}
});
},
{ threshold: 0.05, rootMargin: "0px 0px -8% 0px" }
);
obs.observe(ref.current);
return () => obs.disconnect();
}, [delay]);
const Tag = as;
return (
{children}
);
}
// ============ Animated counter ============
function AnimatedCounter({ to, suffix = "", duration = 1400, prefix = "", format }) {
const ref = useRef(null);
const [val, setVal] = useState(0);
const [started, setStarted] = useState(false);
useEffect(() => {
if (!ref.current) return;
// Immediate fallback if already visible
const rect = ref.current.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
setStarted(true);
return;
}
const obs = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting && !started) {
setStarted(true);
obs.disconnect();
}
});
},
{ threshold: 0.3 }
);
obs.observe(ref.current);
return () => obs.disconnect();
}, [started]);
useEffect(() => {
if (!started) return;
let raf;
const start = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3);
setVal(Math.round(to * eased));
if (t < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [started, to, duration]);
const display = format ? format(val) : val.toLocaleString();
return (
{prefix}
{display}
{suffix}
);
}
// ============ Striped SVG placeholder ============
function Placeholder({ label, sub, aspectRatio = "16 / 9", glyph = "Q", height }) {
return (
{label}
{sub && {sub}}
{sub || "1920 x 1080"}
);
}
// ============ Small icons (inline SVG, no library) ============
const I = {
arrow: (props) => (
),
arrowUR: (props) => (
),
sun: (props) => (
),
moon: (props) => (
),
download: (props) => (
),
inbox: (props) => (
),
user: (props) => (
),
bar: (props) => (
),
book: (props) => (
),
cog: (props) => (
),
shield: (props) => (
),
send: (props) => (
),
mail: (props) => (
),
};
Object.assign(window, {
Reveal,
AnimatedCounter,
Placeholder,
Icons: I,
});