// components.jsx — Shared Carflix LP Components
// ───────── ICON (inline SVG to avoid Phosphor flicker) ─────────
function Icon({ name, size = 20, color = 'currentColor', stroke = 1.6 }) {
const paths = {
check: ,
arrowRight: <>,
arrowLeft: <>,
calendar: <>,
clock: <>,
shield: ,
star: ,
lock: <>,
chat: ,
car: <>,
pin: <>,
phone: ,
plus: <>,
minus: ,
close: <>,
whatsapp: ,
sparkle: <>,
money: <>,
handshake: ,
eye: <>,
mail: <>,
instagram: <>,
};
return (
);
}
// ───────── PHONE MASK ─────────
function maskPhone(v) {
const d = v.replace(/\D/g, '').slice(0, 11);
if (d.length <= 2) return d;
if (d.length <= 7) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
}
function digits(v) { return (v || '').replace(/\D/g, ''); }
// ───────── SCROLL REVEAL ─────────
function useReveal(delay = 0) {
const ref = React.useRef(null);
const [on, setOn] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el || !window.IntersectionObserver) { setOn(true); return; }
const io = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } },
{ threshold: 0.1 }
);
io.observe(el);
return () => io.disconnect();
}, []);
return [ref, {
opacity: on ? 1 : 0,
transform: on ? 'none' : 'translateY(22px)',
transition: `opacity 0.55s ease ${delay}ms, transform 0.55s ease ${delay}ms`,
}];
}
Object.assign(window, { Icon, maskPhone, digits, useReveal });