// primitives.jsx — shared building blocks (exported to window)
const { useRef, useEffect, useState, useCallback } = React;
/* IntersectionObserver: add .in once when element enters view */
function useInView(opts = {}) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;if (!el) return;
if (typeof IntersectionObserver === "undefined") {setSeen(true);return;}
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) {setSeen(true);io.disconnect();}
}, { threshold: opts.threshold ?? 0.18, rootMargin: opts.rootMargin ?? "0px 0px -8% 0px" });
io.observe(el);return () => io.disconnect();
}, []);
return [ref, seen];
}
/* generic reveal-on-scroll */
function Reveal({ children, as = "div", delay = 0, className = "", style = {}, ...rest }) {
const [ref, seen] = useInView();
const As = as;
return {children};
}
/* headline that wipes up line-by-line. Pass an array of lines. */
function ClipLines({ lines, className = "", delay = 0, step = 90, style = {} }) {
const [ref, seen] = useInView({ threshold: 0.3 });
return (
{lines.map((l, i) =>
{l}
)}
);
}
/* count-up number when in view */
function Counter({ to, prefix = "", suffix = "", decimals = 0, dur = 1600, className = "", style = {} }) {
const [ref, seen] = useInView({ threshold: 0.5 });
const [val, setVal] = useState(0);
useEffect(() => {
if (!seen) return;
let raf, start;
const ease = (t) => 1 - Math.pow(1 - t, 3);
const tick = (ts) => {
if (!start) start = ts;
const p = Math.min((ts - start) / dur, 1);
setVal(to * ease(p));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [seen, to, dur]);
const fmt = (v) => v.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
return {prefix}{fmt(val)}{suffix};
}
/* lightweight parallax — translateY based on scroll progress through viewport */
function useParallax(strength = 0.12) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;if (!el) return;
let raf = 0;
const onScroll = () => {
if (raf) return;
raf = requestAnimationFrame(() => {
raf = 0;
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
const prog = (r.top + r.height / 2 - vh / 2) / vh; // -1..1 around center
const m = getComputedStyle(document.documentElement).getPropertyValue("--motion") || 1;
el.style.transform = `translate3d(0,${(-prog * strength * 100 * parseFloat(m)).toFixed(2)}px,0)`;
});
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {window.removeEventListener("scroll", onScroll);window.removeEventListener("resize", onScroll);};
}, [strength]);
return ref;
}
/* brand mark + wordmark */
function Logo({ on = "light", size = 30, wordmark = true }) {
const inv = on === "dark";
return (
{wordmark && SopiSafe}
);
}
function Arrow({ d = "ur" }) {
// up-right arrow glyph
return ;
}
function Btn({ variant = "primary", children, href, arrow = true, onClick }) {
const isButton = onClick && (!href || href === "#");
const Tag = isButton ? "button" : "a";
const props = isButton
? { type: "button", onClick }
: { href: href || "#" };
return (
{children}{arrow && }
);
}
function Mono({ children, style = {} }) {
return {children};
}
/* hamburger toggle — hidden on wide screens, shown via media query (.nav-burger),
except `always` instances (e.g. the close button inside MobileMenu) */
function NavBurger({ open, onClick, color = "var(--ink)", border = "var(--line)", always = false }) {
return (
);
}
/* full-screen menu for narrow viewports */
function MobileMenu({ open, onClose, links, ctaLabel, onAudit, signinLabel, langSwitch }) {
useEffect(() => {
document.body.style.overflow = open ? "hidden" : "";
return () => { document.body.style.overflow = ""; };
}, [open]);
useEffect(() => {
if (!open) return;
const onKey = e => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
return (
{langSwitch}
{ onClose(); if (onAudit) onAudit(); }}>{ctaLabel}
{signinLabel &&
{signinLabel}}
);
}
/* ---------------------------------------------------------------- LANG CONTEXT */
const LangContext = React.createContext({ lang: "en", setLang: () => {}, t: (k) => k });
function useLang() { return React.useContext(LangContext); }
Object.assign(window, { useInView, Reveal, ClipLines, Counter, useParallax, Logo, Arrow, Btn, Mono, NavBurger, MobileMenu, LangContext, useLang });