// shared.jsx — hooks, icons, small reusable bits. Exported to window.
const { useState, useEffect, useRef, useCallback } = React;
/* ---------- Scroll reveal ---------- */
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }),
{ threshold: 0.18 }
);
el.querySelectorAll(".reveal").forEach((n) => io.observe(el));
el.querySelectorAll(".reveal").forEach((n) => io.observe(n));
if (el.classList.contains("reveal")) io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
/* ---------- Count up on view ---------- */
function useCountUp(target, { duration = 1600, decimals = 0 } = {}) {
const [val, setVal] = useState(0);
const ref = useRef(null);
const started = useRef(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && !started.current) {
started.current = true;
const t0 = performance.now();
const tick = (now) => {
const p = Math.min(1, (now - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(target * eased);
if (p < 1) requestAnimationFrame(tick);
else setVal(target);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.4 });
io.observe(el);
return () => io.disconnect();
}, [target, duration]);
const display = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toLocaleString();
return [display, ref];
}
/* ---------- Sparkline path generator ---------- */
function sparkPath(points, w, h, pad = 4) {
const min = Math.min(...points), max = Math.max(...points);
const range = max - min || 1;
const step = (w - pad * 2) / (points.length - 1);
const pts = points.map((p, i) => [pad + i * step, h - pad - ((p - min) / range) * (h - pad * 2)]);
// smooth-ish line
let d = `M ${pts[0][0]},${pts[0][1]}`;
for (let i = 1; i < pts.length; i++) {
const [x0, y0] = pts[i - 1], [x1, y1] = pts[i];
const cx = (x0 + x1) / 2;
d += ` C ${cx},${y0} ${cx},${y1} ${x1},${y1}`;
}
return { d, pts, area: d + ` L ${pts[pts.length-1][0]},${h} L ${pts[0][0]},${h} Z` };
}
function randomWalk(n, start, vol) {
const out = [start];
for (let i = 1; i < n; i++) {
out.push(Math.max(1, out[i - 1] + (Math.random() - 0.48) * vol));
}
return out;
}
/* ---------- Icons (simple stroked glyphs, brand-consistent) ---------- */
const Icon = ({ name, size = 22, stroke = 1.8, color = "currentColor" }) => {
const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
const paths = {
book: <>,
flask: <>,
chart: <>,
trophy: <>,
coin: <>,
spark: <>,
target: <>,
shield: <>,
bolt: <>,
rocket: <>,
grid: <>,
play: <>,
arrow: <>,
check: <>,
store: <>,
users: <>,
lock: <>,
cap: <>,
doc: <>,
};
return ;
};
const fmt = (n, d = 2) => Number(n).toLocaleString("en-US", { minimumFractionDigits: d, maximumFractionDigits: d });
Object.assign(window, { useReveal, useCountUp, sparkPath, randomWalk, Icon, fmt });