/* ============================================================
3DAX — shared UI primitives & hooks -> window globals
============================================================ */
const { useState, useEffect, useRef, useCallback } = React;
/* money */
function eur(n){ return "€" + n.toFixed(2).replace(".", ","); }
/* reveal-on-scroll hook: attach ref, returns inView bool */
function useReveal(opts){
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const el = ref.current; if(!el) return;
const io = new IntersectionObserver(
(entries) => { entries.forEach(e => { if(e.isIntersecting){ setInView(true); io.unobserve(e.target); } }); },
{ threshold: opts?.threshold ?? 0.18, rootMargin: opts?.rootMargin ?? "0px 0px -8% 0px" }
);
io.observe(el);
return () => io.disconnect();
}, []);
return [ref, inView];
}
/* Reveal wrapper component */
function Reveal({ children, className="", delay=0, as="div", style }){
const [ref, inView] = useReveal();
const Tag = as;
return (
{children}
);
}
/* star rating */
function Stars({ value=5, size=14, gold="var(--gold)", dim="rgba(251,242,225,.22)" }){
return (
{[0,1,2,3,4].map(i => (
))}
);
}
/* striped product placeholder (for designs without a render yet) */
function ProductPlaceholder({ label="render en camino", from="#cda14e", to="#822614", ratio=1 }){
return (
);
}
/* placeholder slot for future animated assets (360° loops, video) */
function AnimSlot({ label="animación 360° · próximamente", sub="suelta aquí tu vídeo/loop", ratio=1, style }){
return (
);
}
// expose React hooks globally so every separately-compiled babel file can use them
Object.assign(window, {
useState: React.useState, useEffect: React.useEffect,
useRef: React.useRef, useCallback: React.useCallback, useMemo: React.useMemo,
});
Object.assign(window, { eur, useReveal, Reveal, Stars, ProductPlaceholder, AnimSlot });