/* ============================================================
Shared primitives, hooks, icons, logo
============================================================ */
const { useState, useEffect, useRef, useCallback } = React;
/* --- reveal on scroll (rect-based; reliable across environments) --- */
function useInView(opts = {}) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
let done = false;
const reveal = () => { if (!done) { done = true; setSeen(true); cleanup(); } };
const check = () => {
if (done) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh * 0.92 && r.bottom > 0) reveal();
};
const cleanup = () => {
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
};
window.addEventListener("scroll", check, { passive: true });
window.addEventListener("resize", check);
const raf = requestAnimationFrame(check);
// failsafe: never leave content hidden
const fs = setTimeout(reveal, 1600);
return () => { cleanup(); cancelAnimationFrame(raf); clearTimeout(fs); };
}, []);
return [ref, seen];
}
/* a section wrapper that reveals children */
function Reveal({ as: Tag = "div", className = "", delay = "", children, ...rest }) {
const [ref, seen] = useInView();
return (
{children}
);
}
/* count-up number when in view (falls back to final value if rAF is paused) */
function CountUp({ to, dur = 1100, suffix = "", className = "" }) {
const [ref, seen] = useInView({ threshold: 0.5 });
const [v, setV] = useState(to);
useEffect(() => {
if (!seen) return;
if (document.visibilityState !== "visible") { setV(to); return; }
let raf, start;
setV(0);
const step = (t) => {
if (!start) start = t;
const p = Math.min((t - start) / dur, 1);
const eased = 1 - Math.pow(1 - p, 3);
setV(Math.round(eased * to));
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [seen]);
return {v}{suffix};
}
/* --- logo --- */
function Logo({ light = false }) {
const ink = light ? "#fff" : "var(--ink)";
return (
Sanddo
);
}
/* --- inline icons --- */
const Icon = {
arrow: (p) => ,
check: (p) => ,
shield: (p) => ,
eye: (p) => ,
spark: (p) => ,
book: (p) => ,
users: (p) => ,
bolt: (p) => ,
lock: (p) => ,
};
/* circular trust-score gauge */
function Gauge({ value = 92, size = 64, stroke = 6, color = "var(--auto)", label }) {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const [ref, seen] = useInView({ threshold: 0.6 });
const [shown, setShown] = useState(value);
useEffect(() => {
if (!seen) return;
if (document.visibilityState !== "visible") { setShown(value); return; }
let raf, start;
setShown(0);
const step = (t) => { if (!start) start = t; const p = Math.min((t - start) / 900, 1);
setShown(Math.round((1 - Math.pow(1 - p, 3)) * value)); if (p < 1) raf = requestAnimationFrame(step); };
raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf);
}, [seen, value]);
return (
);
}
Object.assign(window, { useInView, Reveal, CountUp, Logo, Icon, Gauge,
useState, useEffect, useRef, useCallback });