/* global React */
// =====================================================
// PIQUEL Landing — Icons (monoline 1.6, 24×24)
// =====================================================
const Icon = ({ name, size = 22, color = 'currentColor', stroke = 1.6, style }) => {
const paths = {
bolt: <>,
pin: <>,
target: <>,
play: <>,
users: <>,
trophy: <>,
chat: <>,
chev: <>,
chevR: <>,
chevD: <>,
check: <>,
arrow: <>,
plus: <>,
star: ,
sparkle: <>,
calendar:<>,
clock: <>,
chart: <>,
map: <>,
shield: <>,
paddle: <>,
globe: <>,
mail: <>,
x: <>,
menu: <>,
twitter: <>,
instagram: <>,
apple: <>,
google: <>,
eye: <>,
fire: <>,
sun: <>,
moon: <>,
};
return (
);
};
// =====================================================
// Shared reveal hook
// =====================================================
const useReveal = () => {
React.useEffect(() => {
if (typeof IntersectionObserver === 'undefined') return;
const els = document.querySelectorAll('.pq-reveal:not(.in)');
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 -40px 0px' });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
};
Object.assign(window, { Icon, useReveal });