// Reusable hooks + animated SVG scenes for Homli
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ---------------- Hook: in-view ----------------
function useInView(options = {}) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) setInView(true);
}, { threshold: 0.2, ...options });
io.observe(ref.current);
return () => io.disconnect();
}, []);
return [ref, inView];
}
// ---------------- Hook: mouse parallax ----------------
function useMouseParallax(strength = 12) {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
// En táctil / pantallas pequeñas no se aplica: un tap genera un mousemove
// sintético que dejaría los elementos corridos sin posibilidad de reset.
if (window.matchMedia('(hover: none), (pointer: coarse), (max-width: 720px)').matches) return;
const handler = (e) => {
const x = (e.clientX / window.innerWidth - 0.5) * strength;
const y = (e.clientY / window.innerHeight - 0.5) * strength;
setPos({ x, y });
};
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, [strength]);
return pos;
}
// Detección de dispositivo táctil (sin hover real): para no aplicar efectos
// hover que un mousemove sintético dejaría "pegados" al tocar.
const IS_TOUCH = typeof window !== 'undefined' &&
window.matchMedia('(hover: none), (pointer: coarse)').matches;
// ---------------- Hook: global scroll progress (0..1 across whole page) ----------------
function usePageScroll() {
const [progress, setProgress] = useState(0);
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
let raf = null;
const update = () => {
const max = document.documentElement.scrollHeight - window.innerHeight;
const y = window.scrollY;
setScrollY(y);
setProgress(max > 0 ? Math.min(1, Math.max(0, y / max)) : 0);
raf = null;
};
const handler = () => { if (raf == null) raf = requestAnimationFrame(update); };
update();
window.addEventListener('scroll', handler, { passive: true });
window.addEventListener('resize', handler);
return () => {
window.removeEventListener('scroll', handler);
window.removeEventListener('resize', handler);
if (raf) cancelAnimationFrame(raf);
};
}, []);
return { progress, scrollY };
}
// ---------------- Hook: per-element scroll progress ----------------
// Returns 0 when element top hits viewport bottom, 1 when element bottom hits viewport top.
// Useful for scroll-driven animations tied to a specific section.
function useScrollProgress(opts = {}) {
const ref = useRef(null);
const [p, setP] = useState(0);
useEffect(() => {
if (!ref.current) return;
let raf = null;
const compute = () => {
const el = ref.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const vh = window.innerHeight;
const total = rect.height + vh;
const scrolled = vh - rect.top;
const next = Math.min(1, Math.max(0, scrolled / total));
setP(next);
raf = null;
};
const handler = () => { if (raf == null) raf = requestAnimationFrame(compute); };
compute();
window.addEventListener('scroll', handler, { passive: true });
window.addEventListener('resize', handler);
return () => {
window.removeEventListener('scroll', handler);
window.removeEventListener('resize', handler);
if (raf) cancelAnimationFrame(raf);
};
}, []);
return [ref, p];
}
// Map a value from one range to another, clamped
function lerp(a, b, t) { return a + (b - a) * Math.min(1, Math.max(0, t)); }
function mapRange(t, inMin, inMax, outMin, outMax) {
const k = (t - inMin) / (inMax - inMin);
return lerp(outMin, outMax, k);
}
// ---------------- Homli mark (real isotipo) ----------------
function HomliMark({ color = 'var(--coral)', size = 28 }) {
return (
);
}
// ---------------- Homli full logo (isotipo + wordmark con tipografía de marca) ----------------
function HomliLogo({ height = 28, isoColor = 'var(--coral)', wordColor = 'var(--ink)' }) {
return (
);
}
// ---------------- Common reduced-motion CSS injected once ----------------
const REDUCED_MOTION_CSS = `@media (prefers-reduced-motion: reduce) { .scene-anim, .scene-anim * { animation: none !important; transition: none !important; } }`;
// ============================================================
// SCENES
// ============================================================
// ---- BroomScene (Limpieza regular) ----
function BroomScene({ animate = true }) {
// Build a fan of bristles with center-aligned spread
const bristles = Array.from({ length: 13 }).map((_, i) => {
const t = (i - 6) / 6; // -1 to 1
const baseX = 60 + t * 16; // base spans x=44 to x=76
const tipX = 60 + t * 22; // tips spread wider for fan effect
const tipY = 104 + Math.cos(t * Math.PI / 2) * 4 - 4; // outer bristles slightly shorter (curved fan)
return { baseX, tipX, tipY };
});
return (
);
}
// ---- SparkleScene (Limpieza profunda): sponge with sparkles ----
function SparkleScene({ animate = true }) {
return (
);
}
// ---- CurtainScene (Lavado de cortinas) ----
function CurtainScene({ animate = true }) {
return (
);
}
// ---- TapScene (Fontanería) ----
function TapScene({ animate = true }) {
return (
);
}
// ---- KeyScene (Cerrajería) ----
function KeyScene({ animate = true }) {
return (
);
}
// ---- BoltScene (Electricidad, bombilla) ----
function BoltScene({ animate = true }) {
return (
);
}
// ---- HammerScene (Carpintería) ----
// Based on the svgrepo "hammer-tool" path. Splits the original single-color path
// into two sub-paths (handle + head) so we can apply brand gradients. Outer
// transform scales the 64-unit source into the shared 120 viewBox and centers it
// so the hammer matches the visual weight of the other service icons.
function HammerScene({ animate = true }) {
return (
);
}
// ---- TrowelScene (Obra civil, ladrillos) ----
function TrowelScene({ animate = true }) {
return (
);
}
// ---- FogScene (Fumigación) ----
function FogScene({ animate = true }) {
return (
);
}
// ---- PlantScene (Jardinería) ----
function PlantScene({ animate = true }) {
return (
);
}
// ---------------- Export ----------------
Object.assign(window, {
IS_TOUCH,
useInView, useMouseParallax, usePageScroll, useScrollProgress,
lerp, mapRange,
HomliMark, HomliLogo,
BroomScene, KeyScene, TapScene, CurtainScene,
HammerScene, SparkleScene, TrowelScene, BoltScene,
FogScene, PlantScene,
});