// Pyrovolt — Utilities: reveal-on-scroll, count-up, useInView
function useInView(ref, options = {}) {
const [inView, setInView] = React.useState(false);
React.useEffect(() => {
if (!ref.current) return;
const el = ref.current;
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); obs.unobserve(el); }
}, { threshold: 0.15, rootMargin: '0px 0px -80px 0px', ...options });
obs.observe(el);
return () => obs.disconnect();
}, []);
return inView;
}
function Reveal({ children, stagger = false, split = false, as: Tag = 'div', style, className = '', ...rest }) {
const ref = React.useRef(null);
const inView = useInView(ref);
const cls = `${split ? 'split' : (stagger ? 'reveal-stagger' : 'reveal')} ${inView ? 'in' : ''} ${className}`;
return {children};
}
// Split a text into line-wrapped elements for line reveal
function SplitText({ lines, className = '', style }) {
const ref = React.useRef(null);
const inView = useInView(ref);
return (
{lines.map((l, i) => (
{l}
))}
);
}
// Count-up number
function CountUp({ to, from = 0, duration = 1400, decimals = 0, suffix = '', prefix = '' }) {
const ref = React.useRef(null);
const inView = useInView(ref);
const [v, setV] = React.useState(from);
React.useEffect(() => {
if (!inView) return;
let raf, start;
const anim = (t) => {
if (!start) start = t;
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setV(from + (to - from) * eased);
if (p < 1) raf = requestAnimationFrame(anim);
};
raf = requestAnimationFrame(anim);
return () => cancelAnimationFrame(raf);
}, [inView, to, from, duration]);
return {prefix}{v.toFixed(decimals)}{suffix};
}
// Parallax (translateY based on scroll offset relative to viewport)
function useParallax(speed = 0.3) {
const ref = React.useRef(null);
const [offset, setOffset] = React.useState(0);
React.useEffect(() => {
const onScroll = () => {
if (!ref.current) return;
const rect = ref.current.getBoundingClientRect();
const viewH = window.innerHeight;
const center = rect.top + rect.height/2 - viewH/2;
setOffset(center * speed * -0.1);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, [speed]);
return [ref, offset];
}
// Blueprint visual replacing the IMAGEN placeholder. Style varies by tag.
function BlueprintTile({ tag, height = 180, dark = false }) {
const fg = dark ? 'rgba(244,242,237,0.7)' : 'rgba(14,14,14,0.7)';
const fgDim = dark ? 'rgba(244,242,237,0.18)' : 'rgba(14,14,14,0.18)';
const fgGrid = dark ? 'rgba(244,242,237,0.06)' : 'rgba(14,14,14,0.06)';
const bg = dark ? 'var(--dark-bg-soft)' : 'var(--bg-soft)';
const t = (tag || '').toLowerCase();
let body;
if (t.startsWith('proy')) {
// Site / map layout
body = (
<>
{/* roads */}
{/* plot */}
{/* chargers icons */}
{[0,1,2,3].map(i => (
))}
{/* compass */}
N
PROYECTO
);
} else if (t.startsWith('prod')) {
// Product wireframe — DC charger silhouette
body = (
<>
{/* dimension lines */}
PRODUCTO
);
} else {
// Network / org pattern
body = (
<>
{/* central */}
{/* satellites */}
{[
['25%', '30%'], ['75%', '30%'], ['20%', '70%'], ['80%', '70%'], ['50%', '15%'], ['50%', '85%'],
].map(([x, y], i) => (
))}
EMPRESA
);
}
return (
{/* grid background */}