/* Motion primitives & microinteractions */
const { useState, useEffect, useRef, useCallback, useMemo } = React;
/* ── SCROLL REVEAL ──────────────────────────────────────────────────── */
const Reveal = ({ children, delay = 0, y = 24, x = 0, dur = 600, once = true, scale = 1, style }) => {
const ref = useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
if (!ref.current) return;
const obs = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setVisible(true);
if (once) obs.disconnect();
} else if (!once) setVisible(false);
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
obs.observe(ref.current);
return () => obs.disconnect();
}, [once]);
return (
{children}
);
};
/* Stagger children */
const Stagger = ({ children, baseDelay = 0, step = 80, ...props }) => (
<>
{React.Children.map(children, (c, i) => (
{c}
))}
);
/* ── COUNT UP ───────────────────────────────────────────────────────── */
const CountUp = ({ to, from = 0, dur = 1400, prefix = '', suffix = '', sep = ',', decimals = 0, style }) => {
const ref = useRef(null);
const [value, setValue] = useState(from);
const started = useRef(false);
useEffect(() => {
if (!ref.current) return;
const obs = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting && !started.current) {
started.current = true;
const t0 = performance.now();
const animate = (t) => {
const p = Math.min(1, (t - t0) / dur);
const eased = 1 - Math.pow(1 - p, 3);
setValue(from + (to - from) * eased);
if (p < 1) requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
}
}, { threshold: 0.4 });
obs.observe(ref.current);
return () => obs.disconnect();
}, [to, from, dur]);
const fmt = (n) => {
const fixed = decimals > 0 ? n.toFixed(decimals) : Math.round(n).toString();
const [intPart, decPart] = fixed.split('.');
const withSep = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, sep);
return decPart ? `${withSep}.${decPart}` : withSep;
};
return {prefix}{fmt(value)}{suffix};
};
/* ── TILT ───────────────────────────────────────────────────────────── */
const Tilt = ({ children, max = 8, scale = 1.02, glare = false, style }) => {
const ref = useRef(null);
const onMove = (e) => {
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const cx = (e.clientX - r.left) / r.width - 0.5;
const cy = (e.clientY - r.top) / r.height - 0.5;
el.style.transform = `perspective(1000px) rotateY(${cx * max}deg) rotateX(${-cy * max}deg) scale(${scale})`;
if (glare) {
const glareEl = el.querySelector('.tilt-glare');
if (glareEl) {
glareEl.style.background = `linear-gradient(${135 + cx * 90}deg, rgba(255,255,255,${0.15 + Math.abs(cx) * 0.2}), transparent 60%)`;
}
}
};
const onLeave = () => {
if (!ref.current) return;
ref.current.style.transform = '';
};
return (
);
};
/* ── MAGNETIC BUTTON ────────────────────────────────────────────────── */
const Magnetic = ({ children, strength = 0.3, style }) => {
const ref = useRef(null);
const onMove = (e) => {
const r = ref.current.getBoundingClientRect();
const dx = (e.clientX - (r.left + r.width / 2)) * strength;
const dy = (e.clientY - (r.top + r.height / 2)) * strength;
ref.current.style.transform = `translate(${dx}px, ${dy}px)`;
};
const onLeave = () => { if (ref.current) ref.current.style.transform = ''; };
return (
{children}
);
};
/* ── RIPPLE on click ────────────────────────────────────────────────── */
const useRipple = () => {
return useCallback((e) => {
const btn = e.currentTarget;
const rect = btn.getBoundingClientRect();
const r = document.createElement('span');
const size = Math.max(rect.width, rect.height);
r.style.cssText = `
position:absolute;width:${size}px;height:${size}px;border-radius:50%;
left:${e.clientX - rect.left - size / 2}px;top:${e.clientY - rect.top - size / 2}px;
background:rgba(255,255,255,0.4);pointer-events:none;transform:scale(0);
animation:ripple .6s ease-out;
`;
if (getComputedStyle(btn).position === 'static') btn.style.position = 'relative';
btn.style.overflow = 'hidden';
btn.appendChild(r);
setTimeout(() => r.remove(), 600);
}, []);
};
/* ── CONFETTI ───────────────────────────────────────────────────────── */
const Confetti = ({ trigger, colors }) => {
const [pieces, setPieces] = useState([]);
useEffect(() => {
if (!trigger) return;
const cs = colors || ['#1e90ff', '#22d3ee', '#22c55e', '#f59e0b', '#a855f7', '#ef4444'];
const list = Array.from({ length: 60 }, (_, i) => ({
id: Date.now() + i,
left: 40 + Math.random() * 20,
vx: (Math.random() - 0.5) * 200,
vy: -150 - Math.random() * 200,
color: cs[i % cs.length],
size: 6 + Math.random() * 6,
rot: Math.random() * 360,
delay: Math.random() * 100,
}));
setPieces(list);
const t = setTimeout(() => setPieces([]), 2400);
return () => clearTimeout(t);
}, [trigger]);
if (!pieces.length) return null;
return (
);
};
/* ── TOAST ──────────────────────────────────────────────────────────── */
const ToastCtx = React.createContext({ push: () => {} });
const ToastProvider = ({ children }) => {
const [toasts, setToasts] = useState([]);
const push = useCallback((toast) => {
const id = Date.now() + Math.random();
setToasts(t => [...t, { id, ...toast }]);
setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), toast.duration || 3500);
}, []);
return (
{children}
{toasts.map(t => )}
);
};
const ToastItem = ({ kind = 'info', title, body, theme }) => {
const colors = { info: '#3b82f6', success: '#22c55e', warning: '#f59e0b', danger: '#ef4444', wa: '#25d366' };
const icons = { info: 'info', success: 'check', warning: 'warning', danger: 'warning', wa: 'wa' };
const c = colors[kind];
return (
);
};
const useToast = () => React.useContext(ToastCtx);
/* ── SKELETON ───────────────────────────────────────────────────────── */
const Skeleton = ({ w = '100%', h = 14, r = 6, style }) => (
);
/* ── PULSE DOT (live indicator) ─────────────────────────────────────── */
const PulseDot = ({ color = '#22c55e', size = 8 }) => (
);
/* ── ANIMATED WHATSAPP SEND ─────────────────────────────────────────── */
const SendAnimation = ({ trigger, color = '#25d366' }) => {
const [active, setActive] = useState(false);
useEffect(() => {
if (trigger) {
setActive(true);
const t = setTimeout(() => setActive(false), 1200);
return () => clearTimeout(t);
}
}, [trigger]);
if (!active) return null;
return (
);
};
/* ── TYPING DOTS ────────────────────────────────────────────────────── */
const TypingDots = ({ color = 'currentColor' }) => (
{[0, 1, 2].map(i => (
))}
);
/* ── PROGRESS BAR (animated) ────────────────────────────────────────── */
const ProgressBar = ({ value, max = 100, color, bg, height = 8, animated = true }) => {
const pct = Math.min(100, (value / max) * 100);
return (
);
};
/* Inject keyframes for these animations into