// Shared UI primitives + icons + hooks
const { useState, useEffect, useRef, useMemo } = React;
// ------- Reveal on scroll hook -------
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
// Mark document so CSS knows to hide unrevealed items
document.documentElement.classList.add('js-reveal-ready');
const rect = el.getBoundingClientRect();
// If already in viewport when mounted, reveal immediately
if (rect.top < window.innerHeight && rect.bottom > 0) {
requestAnimationFrame(() => {
requestAnimationFrame(() => el.classList.add('in'));
});
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0, rootMargin: '0px 0px -10% 0px' });
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
// ------- Icons (simple inline SVG) -------
const Icon = {
Arrow: (p) => (
),
ArrowDown: (p) => (
),
ArrowUpRight: (p) => (
),
Play: (p) => (
),
Clock: (p) => (
),
Pin: (p) => (
),
Shield: (p) => (
),
Trophy: (p) => (
),
Lock: (p) => (
),
Spark: (p) => (
),
Camera: (p) => (
),
TimerIcon: (p) => (
),
Chip: (p) => (
),
Users: (p) => (
),
Eye: (p) => (
),
Calendar: (p) => (
),
Question: (p) => (
),
Chevron: (p) => (
),
Menu: (p) => (
),
};
// ------- Logo component -------
function Logo({ size = 'md' }) {
return (
);
}
// ------- Striped placeholder for images -------
function Placeholder({ label, ratio = '16/9', style = {} }) {
return (
{label}
);
}
function LazyVideo({ src, style, className }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) {
el.src = src;
el.load();
el.play().catch(() => {});
io.disconnect();
}
}, { threshold: 0, rootMargin: '200px' });
io.observe(el);
return () => io.disconnect();
}, [src]);
return