);
}
// ============================================================
// Reveal-on-scroll wrapper — adds .is-visible when in viewport
// ============================================================
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll(".reveal:not(.is-visible)");
if (!("IntersectionObserver" in window)) {
els.forEach((e) => e.classList.add("is-visible"));
return;
}
const io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("is-visible");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -60px 0px" }
);
els.forEach((e) => io.observe(e));
return () => io.disconnect();
});
}
// ============================================================
// Animated counter — counts up when visible
// ============================================================
function Counter({ value, prefix = "", suffix = "", duration = 1400 }) {
const [n, setN] = useState(0);
const ref = useRef(null);
const started = useRef(false);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !started.current) {
started.current = true;
const start = performance.now();
const step = (t) => {
const p = Math.min(1, (t - start) / duration);
// ease-out-quint
const eased = 1 - Math.pow(1 - p, 5);
setN(value * eased);
if (p < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
io.disconnect();
}
});
}, { threshold: 0.4 });
io.observe(el);
return () => io.disconnect();
}, [value, duration]);
const display = Math.round(n);
const fmt = (x) => `${prefix}${x.toLocaleString("es-MX")}${suffix}`;
// Reserve the final value's width with a hidden spacer so the number
// never changes the layout width as it counts up from 0 → value.
// Without this the growing digits widen the flex row mid-animation and
// tip the trust-metrics line into a wrap. The live value is overlaid in
// the same grid cell and stays centred inside the reserved box.
return (
{fmt(value)}{fmt(display)}
);
}
// ============================================================
// Footnote reference — small numbered superscript placed right
// after a claim that needs legal backing. Styling lives in
// styles.css (.fn-ref); line-height:0 keeps it from disturbing
// the text flow / line height on small screens.
// ============================================================
function Fn({ n }) {
return {n};
}
// Meta Pixel "Lead" conversion event — fired from the Apply now / Book a
// demo CTAs so ad campaigns can attribute clicks.
function trackLead() {
if (typeof window.fbq === "function") window.fbq("track", "Lead");
}
Object.assign(window, {
Icons, SVG, MagneticButton, SectionHeading, useReveal, Counter, Fn, trackLead,
});