// === Reusable components === const { useEffect, useState, useRef } = React; // Inject HTML safely function HTML({ tag = 'span', html, className, ...rest }) { return React.createElement(tag, { className, dangerouslySetInnerHTML: { __html: html }, ...rest }); } function Eyebrow({ children, dark }) { return {children}; } function SectionHead({ number, eyebrow, headingHtml }) { return (
{eyebrow} {number}
); } // Scroll progress bar function ScrollProgress() { const [p, setP] = useState(0); useEffect(() => { const onScroll = () => { const h = document.documentElement; const max = h.scrollHeight - h.clientHeight; setP(max > 0 ? h.scrollTop / max : 0); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); return
; } // Reveal-on-scroll function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } // Lightbox function Lightbox({ open, item, onClose }) { useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; if (open) window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, onClose]); return (
{item && (
e.stopPropagation()}> {item.t}
{item.n} · {item.t} {item.tag}
)}
); } // Marquee function Marquee({ items }) { const repeated = [...items, ...items, ...items, ...items]; return (
{repeated.map((it, i) => ( {it} ))}
); } Object.assign(window, { HTML, Eyebrow, SectionHead, ScrollProgress, useReveal, Lightbox, Marquee });