/* global React, window */
const { useEffect, useRef, useState } = React;
// ============ icons (inline SVG, stroke-based) ============
const Icon = ({ name, size = 20, stroke = 1.6 }) => {
const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
switch (name) {
case "palette": return ;
case "pen": return ;
case "megaphone": return ;
case "compass": return ;
case "target": return ;
case "crown": return ;
case "message": return ;
case "settings": return ;
case "arrow": return ;
case "arrow-ur": return ;
case "plus": return ;
case "whatsapp": return ;
case "instagram": return ;
default: return null;
}
};
// ============ reveal-on-scroll hook ============
const useReveal = () => {
useEffect(() => {
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
}, { rootMargin: "0px 0px -8% 0px" });
const observed = new WeakSet();
const scan = () => {
document.querySelectorAll(".reveal").forEach((el) => {
if (observed.has(el)) return;
observed.add(el);
// if already in viewport on first paint, mark it immediately so
// above-the-fold content never waits for a scroll event
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh * 0.95) {
el.classList.add("in");
} else {
io.observe(el);
}
});
};
// section divider lines
const sio = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("line-in"); sio.unobserve(e.target); } });
}, { rootMargin: "0px 0px -10% 0px" });
document.querySelectorAll(".section").forEach((s) => sio.observe(s));
// run a few times to catch components that mount after useEffect fires
scan();
const t1 = setTimeout(scan, 50);
const t2 = setTimeout(scan, 200);
const t3 = setTimeout(scan, 600);
// and watch for future DOM additions
const mo = new MutationObserver(scan);
mo.observe(document.body, { childList: true, subtree: true });
return () => { io.disconnect(); sio.disconnect(); mo.disconnect(); clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
}, []);
};
// ============ cursor glow ============
const CursorGlow = () => {
const ref = useRef(null);
useEffect(() => {
const INTERACTIVE = "a:not(.nav-logo):not(.nav-link):not(.nav-cta),button:not(.nav-burger),[role='button'],.team-card,.bento-card,.case-row,.gem-phase,.faq-item";
const move = (e) => {
if (!ref.current) return;
ref.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
};
const over = (e) => {
if (!ref.current) return;
if (e.target.closest(INTERACTIVE)) {
ref.current.style.width = "180px";
ref.current.style.height = "180px";
ref.current.style.opacity = ".18";
ref.current.style.mixBlendMode = "screen";
}
};
const out = (e) => {
if (!ref.current) return;
if (e.target.closest(INTERACTIVE)) {
ref.current.style.width = "";
ref.current.style.height = "";
ref.current.style.opacity = "";
ref.current.style.mixBlendMode = "";
}
};
window.addEventListener("pointermove", move);
document.addEventListener("pointerover", over);
document.addEventListener("pointerout", out);
return () => {
window.removeEventListener("pointermove", move);
document.removeEventListener("pointerover", over);
document.removeEventListener("pointerout", out);
};
}, []);
return ;
};
// ============ count-up ============
const CountUp = ({ to, prefix = "", suffix = "", duration = 1200 }) => {
const [val, setVal] = useState(0);
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(([entry]) => {
if (!entry.isIntersecting) return;
io.disconnect();
const start = performance.now();
const tick = (now) => {
const p = Math.min((now - start) / duration, 1);
const ease = 1 - Math.pow(1 - p, 3);
setVal(Math.round(ease * to));
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}, { threshold: 0.5 });
io.observe(el);
return () => io.disconnect();
}, [to, duration]);
return {prefix}{val}{suffix};
};
// ============ floating WhatsApp ============
const FloatingWhatsApp = () => (
);
// ============ section header ============
const SectionHead = ({ tag, title, kicker, right }) => (
{right &&
{right}
}
{!right && kicker &&
{kicker}
}
);
Object.assign(window, { Icon, useReveal, CursorGlow, CountUp, FloatingWhatsApp, SectionHead });