/* WalletLab — FX & helpers: icons, cursor, reveal, count-up */
const { useState, useEffect, useRef, useCallback } = React;
// ── Icons ──────────────────────────────────────────────────────────
const ICONS = {
wallet: "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z",
scan: "M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5ZM13.5 13.5h7.5M13.5 17.25h7.5M13.5 21h7.5",
users: "M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z",
bell: "M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5",
grid: "M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z",
paint: "M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42",
arrow: "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3",
play: "M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z",
plus: "M12 4.5v15m7.5-7.5h-15",
rotate: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99",
check: "m4.5 12.75 6 6 9-13.5",
coffee: "M6.75 7.5v9.75a2.25 2.25 0 0 0 2.25 2.25h6.75A2.25 2.25 0 0 0 18 17.25v-3a2.25 2.25 0 0 0-2.25-2.25H15M9.75 4.5v3M14.25 4.5v3M6.75 7.5h11.25",
fork: "M21 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z",
scissors: "M7.848 8.25l1.536.887M7.848 8.25a3 3 0 1 1-5.196-3 3 3 0 0 1 5.196 3zm1.536.887a2.165 2.165 0 0 1 1.083 1.839c.005.351.054.695.14 1.024M9.384 9.137l2.077 1.199M7.848 15.75l1.536-.887m-1.536.887a3 3 0 1 1-5.196 3 3 3 0 0 1 5.196-3zm1.536-.887a2.165 2.165 0 0 0 1.083-1.838c.005-.352.054-.695.14-1.025m-1.223 2.863 2.077-1.199m0-3.328a4.323 4.323 0 0 1 2.068-1.379l5.325-1.628a4.5 4.5 0 0 1 2.48-.044l.803.215-7.794 4.5m-2.882-1.664A4.331 4.331 0 0 0 10.607 12m3.736 0 7.794 4.5-.802.215a4.5 4.5 0 0 1-2.48-.043l-5.326-1.629a4.324 4.324 0 0 1-2.068-1.379M14.343 12l-2.882 1.664",
bread: "M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z",
shirt: "M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88",
dumbbell: "m6.115 5.19.319 1.913A6 6 0 0 0 8.11 10.36L9.75 12l-.387.387c-.467.467-1.027.832-1.642 1.07l-.81.31a4.5 4.5 0 0 0-1.625 1.041l-1.07 1.07M22.5 12 18 16.5l-3-3M3 16.5l-1.5 1.5m1.5-1.5L7.5 12l3 3-4.5 4.5",
bag: "M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007Z",
yoga: "M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25",
flower: "M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25a2.25 2.25 0 0 1-2.25 2.25H15M2.25 3v16.5m0 0l3.75-3.75M9 19.5h6",
spa: "M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z",
icecream: "M3.75 3h16.5v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V3Zm2.25 4.5h12l-1.5 13.5h-9L6 7.5Z",
car: "M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9-1.5h12c.621 0 1.125-.504 1.125-1.125v-3.375c0-.621-.504-1.125-1.125-1.125h-12a1.125 1.125 0 0 0-1.125 1.125v3.375c0 .621.504 1.125 1.125 1.125Zm12 0a1.5 1.5 0 0 0 3 0m-3 0a1.5 1.5 0 0 1 3 0m0 0h.375c.621 0 1.125-.504 1.125-1.125V14.25m-17.25 4.5H4.875a1.125 1.125 0 0 1-1.125-1.125V14.25",
menu: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5",
close: "M6 18 18 6M6 6l12 12",
chevron: "m8.25 4.5 7.5 7.5-7.5 7.5",
bolt: "M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z",
shield: "M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z",
};
function Icon({ name, size = 22, sw = 1.7, style }) {
const d = ICONS[name];
return (
);
}
function useRevealRoot() {
useEffect(() => {
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 -8% 0px' });
const scan = () => document.querySelectorAll('.reveal:not(.in)').forEach(el => io.observe(el));
scan();
const t = setTimeout(scan, 300);
return () => { clearTimeout(t); io.disconnect(); };
}, []);
}
function CountUp({ to, suffix = "", decimals = 0, dur = 1600 }) {
const ref = useRef(null);
const [val, setVal] = useState(to);
const done = useRef(false);
useEffect(() => {
const el = ref.current;
const io = new IntersectionObserver((es) => {
es.forEach(e => {
if (e.isIntersecting && !done.current) {
done.current = true;
setVal(0);
const start = performance.now();
const tick = (now) => {
const p = Math.min(1, (now - start) / dur);
const eased = 1 - Math.pow(1 - p, 3);
setVal(to * eased);
if (p < 1) requestAnimationFrame(tick);
else setVal(to);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.5 });
if (el) io.observe(el);
return () => io.disconnect();
}, [to, dur]);
const shown = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toString();
return {shown}{suffix};
}
function Cursor() {
const dot = useRef(null), ring = useRef(null);
useEffect(() => {
if (window.matchMedia('(pointer: coarse)').matches) return;
let mx = innerWidth / 2, my = innerHeight / 2;
let rx = mx, ry = my;
let raf;
const onMove = (e) => {
mx = e.clientX; my = e.clientY;
if (dot.current) dot.current.style.transform = `translate(${mx}px,${my}px)`;
const hot = e.target.closest('a, button, .btn, [data-hot], .faq-q, input, .case, .feat, .step, .marquee span');
if (ring.current) ring.current.classList.toggle('hot', !!hot);
const mag = e.target.closest('[data-mag]');
document.querySelectorAll('[data-mag]').forEach(el => { el.style.transform = ''; });
if (mag) {
const r = mag.getBoundingClientRect();
const dx = mx - (r.left + r.width / 2);
const dy = my - (r.top + r.height / 2);
mag.style.transform = `translate(${dx * 0.28}px, ${dy * 0.4}px)`;
}
};
const loop = () => {
rx += (mx - rx) * 0.18; ry += (my - ry) * 0.18;
if (ring.current) ring.current.style.transform = `translate(${rx}px,${ry}px)`;
raf = requestAnimationFrame(loop);
};
window.addEventListener('mousemove', onMove);
loop();
return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); };
}, []);
return (
<>
);
}
function ParticleBG() {
const ref = useRef(null);
useEffect(() => {
const cv = ref.current; if (!cv) return;
const ctx = cv.getContext('2d');
let w, h, parts, raf;
const DPR = Math.min(2, window.devicePixelRatio || 1);
const resize = () => {
w = cv.width = innerWidth * DPR; h = cv.height = innerHeight * DPR;
cv.style.width = innerWidth + 'px'; cv.style.height = innerHeight + 'px';
const n = Math.min(56, Math.floor(innerWidth / 28));
parts = Array.from({ length: n }, () => ({
x: Math.random() * w, y: Math.random() * h,
vx: (Math.random() - 0.5) * 0.16 * DPR, vy: (Math.random() - 0.5) * 0.16 * DPR,
r: (Math.random() * 1.6 + 0.6) * DPR, a: Math.random() * 0.5 + 0.2,
}));
};
const draw = () => {
ctx.clearRect(0, 0, w, h);
for (const p of parts) {
p.x += p.vx; p.y += p.vy;
if (p.x < 0 || p.x > w) p.vx *= -1;
if (p.y < 0 || p.y > h) p.vy *= -1;
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = `rgba(14, 157, 92, ${p.a * 0.5})`;
ctx.fill();
}
for (let i = 0; i < parts.length; i++) {
for (let j = i + 1; j < parts.length; j++) {
const a = parts[i], b = parts[j];
const dx = a.x - b.x, dy = a.y - b.y;
const dist = Math.hypot(dx, dy);
const max = 130 * DPR;
if (dist < max) {
ctx.beginPath();
ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y);
ctx.strokeStyle = `rgba(47, 212, 106, ${(1 - dist / max) * 0.12})`;
ctx.lineWidth = DPR * 0.7;
ctx.stroke();
}
}
}
raf = requestAnimationFrame(draw);
};
resize(); draw();
window.addEventListener('resize', resize);
return () => { window.removeEventListener('resize', resize); cancelAnimationFrame(raf); };
}, []);
return ;
}
Object.assign(window, { Icon, useRevealRoot, CountUp, Cursor, ParticleBG });