);
}
// ---------------- How it works (static, 3-step reveal) ----------------
function HowItWorks() {
const steps = [
{ n: '01', title: 'Escríbenos por WhatsApp',
copy: 'Cuéntanos qué necesitas. Una foto o un audio bastan. Sin formularios largos.',
time: 'En 1 minuto' },
{ n: '02', title: 'Cotización en minutos',
copy: 'Te enviamos precio cerrado con técnico asignado y ventana horaria. Tú confirmas.',
time: 'Respuesta en 15 min' },
{ n: '03', title: 'Servicio en tu hogar',
copy: 'Técnico verificado, uniformado y con ID. Llega, trabaja limpio y se va.',
time: 'Mismo día o agendado' },
];
return (
Cómo funciona
Del mensaje al técnico en tu puerta, en tres pasos.
);
}
function HowToSteps({ steps }) {
const [inViewRef, inView] = useInView();
const parallax = useMouseParallax(18);
const containerRef = uR2(null);
const [mouseX, setMouseX] = uS2(0);
uE2(() => {
const el = containerRef.current;
if (!el) return;
const onMove = (e) => {
const rect = el.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
setMouseX(Math.min(1, Math.max(0, x)));
};
const onLeave = () => setMouseX(0);
el.addEventListener('mousemove', onMove);
el.addEventListener('mouseleave', onLeave);
return () => {
el.removeEventListener('mousemove', onMove);
el.removeEventListener('mouseleave', onLeave);
};
}, []);
// Map mouse X (0..1 across grid) to fill width along the line span (16.67%..83.33%)
const fillProgress = Math.min(1, Math.max(0, (mouseX - 0.1667) / 0.6666));
const setRefs = (node) => { containerRef.current = node; if (typeof inViewRef === 'function') inViewRef(node); else if (inViewRef) inViewRef.current = node; };
return (
{/* Background track: from circle 1 center (16.67%) to circle 3 center (83.33%) */}
{/* Coral fill that follows the mouse X position across the line */}
{steps.map((s, i) => (
{s.n}
{s.time}
{s.title}
{s.copy}
))}
);
}
function ChatPreview() {
const [ref, inView] = useInView();
const messages = [
{ side: 'user', text: 'Hola, tengo una fuga en el baño', delay: 600 },
{ side: 'user', text: '[foto]', delay: 1100 },
{ side: 'homli', text: '¡Hola! Vemos una fuga en el sifón del lavamanos. Enviamos a Carlos hoy entre 2 y 4 pm. Precio cerrado $85.000.', delay: 2400 },
{ side: 'user', text: 'Perfecto, confirmado', delay: 3700 },
{ side: 'homli', text: 'Carlos va en camino. Llega en 20 min.', delay: 4900 },
];
// Loop counter: each tick re-mounts bubbles using a key, restarting the staggered fade-in
const [tick, setTick] = uS2(0);
uE2(() => {
if (!inView) return;
const cycleMs = 7200;
const id = setInterval(() => setTick(t => t + 1), cycleMs);
return () => clearInterval(id);
}, [inView]);
return (
H
Homli
en línea
{messages.map((m, i) => (
{m.text}
))}
);
}
function ChatBubble({ side, show, delay = 0, children }) {
const isUser = side === 'user';
return (
{children}
);
}
function ChatBubbleLoop({ side, show, delay = 0, children }) {
const isUser = side === 'user';
if (!show) return null;
return (