/* shared hooks + small utilities for pgpilot landing */
const { useState, useEffect, useRef, useCallback } = React;
// IntersectionObserver-based reveal — adds .in when element enters viewport
function useReveal(threshold = 0.15) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
// immediate check: if already in/near viewport, reveal on next frame
const checkInView = () => {
const rect = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (rect.top < vh * 0.95 && rect.bottom > 0) {
el.classList.add('in');
return true;
}
return false;
};
requestAnimationFrame(() => {
if (checkInView()) return;
});
let io = null;
let scrollFallback = null;
if (typeof IntersectionObserver !== 'undefined') {
io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
},
{ threshold, rootMargin: '0px 0px -10% 0px' }
);
io.observe(el);
}
// scroll-listener fallback for environments where IO never fires
const onScroll = () => {
if (el.classList.contains('in')) return;
if (checkInView()) {
window.removeEventListener('scroll', onScroll);
}
};
window.addEventListener('scroll', onScroll, { passive: true });
scrollFallback = onScroll;
// last-resort: after 1.5s, reveal anyway so nothing stays hidden
const safety = setTimeout(() => {
if (!el.classList.contains('in')) el.classList.add('in');
}, 1500);
return () => {
io && io.disconnect();
scrollFallback && window.removeEventListener('scroll', scrollFallback);
clearTimeout(safety);
};
}, [threshold]);
return ref;
}
// Mouse tracking for spotlight + card glow
function useMouseTrack(ref) {
useEffect(() => {
const el = ref.current;
if (!el) return;
const handler = (e) => {
const rect = el.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
el.style.setProperty('--mx', `${x}%`);
el.style.setProperty('--my', `${y}%`);
el.style.setProperty('--fx', `${e.clientX - rect.left}px`);
el.style.setProperty('--fy', `${e.clientY - rect.top}px`);
};
el.addEventListener('mousemove', handler);
return () => el.removeEventListener('mousemove', handler);
}, [ref]);
}
// Reveal wrapper component
function Reveal({ children, className = '', stagger = false, threshold }) {
const ref = useReveal(threshold);
const cls = (stagger ? 'reveal-stagger ' : 'reveal ') + className;
return (
{children}
);
}
// Icons (minimalist line) — never overload, just a few key ones
const Icon = {
Scan: () => (
),
Profile: () => (
),
Cloud: () => (
),
Restore: () => (
),
Observe: () => (
),
Encrypt: () => (
),
Github: () => (
),
Arrow: () => (
),
};
Object.assign(window, {
useReveal,
useMouseTrack,
Reveal,
Icon,
});