/* global React */
// ── Shared building blocks for the Drought Board ──────────────
// Language context, the count-up hero number, CRT/pitch texture
// wrappers, and the two-flag relationship piece.
const LangCtx = React.createContext({ lang: "en", replay: 0 });
const useLang = () => React.useContext(LangCtx);
// easing for the arcade count-up
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
// ── Count-up hero number ──────────────────────────────────────
// Animates 0 → value when it first scrolls into view, and again
// whenever `replay` changes. Space Mono bold, huge, crisp, hard drop.
function YearsNumber({ value, size = 300, color, shadow, style = {}, duration = 1100 }) {
const { replay } = useLang();
const ref = React.useRef(null);
const [n, setN] = React.useState(0);
const seen = React.useRef(false);
const run = React.useCallback(() => {
const start = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - start) / duration);
setN(Math.round(easeOutCubic(t) * value));
if (t < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}, [value, duration]);
// fire when visible
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((es) => {
es.forEach((e) => {
if (e.isIntersecting && !seen.current) { seen.current = true; run(); }
});
}, { threshold: 0.4 });
io.observe(el);
return () => io.disconnect();
}, [run]);
// replay on global trigger
React.useEffect(() => { if (replay > 0) { setN(0); run(); } }, [replay, run]);
return (
{n}
);
}
// ── CRT scanline veil ─────────────────────────────────────────
function Scanlines({ opacity = 0.5, radius = 0 }) {
return (
);
}
// ── A short chalk-lined pitch band (mowed stripes) ────────────
function PitchBand({ height = 64, lines = true, style = {} }) {
return (
{lines && (
{/* center spot + halfway hint as chalk */}
)}