/* =========================================================================
ui.jsx — shared primitives, icons, strategy-notes, scroll reveal
Exposes everything on window for the other babel scripts.
========================================================================= */
const { useState, useEffect, useRef, useCallback } = React;
/* ---------- Scroll reveal (robust: shows in-view immediately, safety net) ---------- */
function useReveal() {
useEffect(() => {
const reveal = (el) => el && el.classList.add('in');
const els = Array.from(document.querySelectorAll('.reveal'));
if (!('IntersectionObserver' in window)) {els.forEach(reveal);return;}
const io = new IntersectionObserver((entries) => {
entries.forEach((en) => {if (en.isIntersecting) {reveal(en.target);io.unobserve(en.target);}});
}, { threshold: 0.08, rootMargin: '0px 0px -5% 0px' });
const vh = window.innerHeight || 800;
els.forEach((el) => {
const r = el.getBoundingClientRect();
if (r.top < vh * 0.95) reveal(el); // already on/near screen → reveal now
else io.observe(el);
});
// safety: never leave content hidden if the observer misbehaves
const t = setTimeout(() => els.forEach(reveal), 2200);
return () => {io.disconnect();clearTimeout(t);};
}, []);
}
/* ---------- Strategy notes ---------- */
function Note({ tag, why, copy, cro, mobile, dark }) {
return (
✦ Strategy · {tag}
{why && - Why this section
- {why}
}
{cro && - CRO trigger
- {cro}
}
{copy && - Copy direction
- {copy}
}
{mobile && - Mobile UX
- {mobile}
}
);
}
function NotesToggle() {
const [on, setOn] = useState(false);
useEffect(() => {
document.body.classList.toggle('notes-on', on);
}, [on]);
return (
);
}
/* ---------- Section heading ---------- */
function SecHead({ eyebrow, title, lede, center, dark, children }) {
return (
{eyebrow &&
{eyebrow}}
{title}
{lede &&
{lede}
}
{children}