// Shared utilities + SVG placeholder art components
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Hook: reveal on scroll
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.15, rootMargin: '0px 0px -80px 0px' });
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
// Hook: counter (animated)
function useCountUp(target, { duration = 1600, when = true } = {}) {
const [v, setV] = useState(0);
const started = useRef(false);
useEffect(() => {
if (!when || started.current) return;
started.current = true;
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setV(target * eased);
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}, [when, target, duration]);
return v;
}
// Formats
const fmt = {
money: (n) => `$${n.toFixed(0)}B`,
int: (n) => Math.round(n).toLocaleString(),
};
// Reveal wrapper
function Reveal({ children, delay = 0, as = 'div', className = '', ...rest }) {
const r = useReveal();
const Tag = as;
const dClass = delay ? ` r-${delay}` : '';
return {children};
}
// Logo mark
function LogoMark({ size = 22, color = 'var(--ink)' }) {
return (
);
}
// Arrow
const ArrowRight = ({ size = 16 }) => (
);
// Site identity — single source of truth, set in index.html before this
// script loads. Components interpolate from window.__site rather than
// hardcoding project/place names.
const SITE = (typeof window !== 'undefined' && window.__site) || {
park: 'Technology Park', county: 'the county', state: '', sponsor: 'the project sponsor', locationLine: '',
};
// jumpToSection — reusable smooth-scroll-with-offset + pulse-ring highlight.
// Extracted from the old CompareStrip's goTo() so the Hero CTA and the
// Elephants panels' "see the full story" links can reuse the exact same
// mechanism. Uses history.replaceState (not location.hash=) so it doesn't
// fire a hashchange event and double-trigger App's own scrollIntoView
// handler.
function jumpToSection(id) {
if (typeof window === 'undefined' || typeof document === 'undefined') return;
const el = document.getElementById(id);
if (!el) return;
const yOffset = -100; // account for fixed nav
const y = el.getBoundingClientRect().top + window.scrollY + yOffset;
const reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
window.scrollTo({ top: y, behavior: reduceMotion ? 'auto' : 'smooth' });
if (window.history && window.history.replaceState) {
window.history.replaceState(null, '', `#${id}`);
}
el.classList.add('js-target-pulse');
window.setTimeout(() => el.classList.remove('js-target-pulse'), 2200);
}
// Status badge — shared grammar used identically in Elephants, Water,
// Power, Regulations, and the Hero stat rail. Three states only:
// illustrative (demo figure), sourced (has a receipt), commitment (what a
// real deployment would bind to).
const STATUS_LABEL = { illustrative: 'Illustrative', sourced: 'Sourced', commitment: 'Commitment' };
function StatusBadge({ status = 'illustrative', className = '', style }) {
const label = STATUS_LABEL[status] || STATUS_LABEL.illustrative;
return (
{label}
);
}
// Source receipt — dense, single-row citation for Elephants' "how you
// check" beat (2026-08-02 roundtable redesign: was a 3-line padded card,
// now one compact row per source so a panel with 3 receipts doesn't run
// long). title = headline of the source; body = one-line plain-English
// claim/description (what it actually says); issuer/date = who + when;
// checked = the site's own verification stamp, defaults to "Aug 2026".
function SourceReceipt({ title, body, issuer, date, url, checked = 'Aug 2026' }) {
return (
{title}
{body && {body}}
{issuer}{issuer && date ? ' · ' : ''}{date}{(issuer || date) ? ' · ' : ''}Checked {checked}
);
}
// Icon set
const Icons = {
Drop: ({ size = 24 }) => (
),
Leaf: ({ size = 24 }) => (
),
Wave: ({ size = 24 }) => (
),
Bolt: ({ size = 24 }) => (
),
Shield: ({ size = 24 }) => (
),
Truck: ({ size = 24 }) => (
),
Briefcase: ({ size = 24 }) => (
),
School: ({ size = 24 }) => (
),
Home: ({ size = 24 }) => (
),
Speaker: ({ size = 24 }) => (
),
Moon: ({ size = 24 }) => (
),
Sun: ({ size = 24 }) => (
),
Chat: ({ size = 24 }) => (
),
Plus: ({ size = 16 }) => (
),
// Added 2026-08-03 (design pass) — generator/backup-power topic icon for
// the hero's nine question cards. A simple genset silhouette: housing +
// exhaust stack, not a literal engine diagram.
Generator: ({ size = 24 }) => (
),
// Added 2026-08-03 (design pass) — "the process" topic icon (decision /
// public vote), a checked ballot rather than a literal gavel.
Ballot: ({ size = 24 }) => (
),
};
// ---------------------------------------------------------------------
// Signature texture system (2026-08-03 design pass) — Prairie Gate's
// landscape identity uses prairie-grass line art + topographic contour
// lines as its ownable motif. Inline SVG only,
// restrained: a quiet corner/edge backdrop, never behind body text, never
// stock photography. Both accept a `color` prop so they inherit the
// current tone (wheat on paper, on-ink-line on the dark band).
function TextureGrass({ width = 260, height = 130, color = 'currentColor', opacity = .5, className = '' }) {
// Hand-set blade paths (not a repeating tile) — a natural, uneven prairie
// silhouette growing up from a baseline. Heights vary; a few blades bend.
const blades = [
'M4,130 C2,108 10,84 6,58',
'M14,130 C17,104 9,80 15,50',
'M24,130 C22,100 30,70 25,36',
'M35,130 C38,106 30,86 36,64',
'M46,130 C44,98 53,66 47,30',
'M58,130 C61,110 52,90 59,68',
'M70,130 C67,96 77,60 71,22',
'M82,130 C85,108 76,88 83,66',
'M94,130 C91,100 101,68 95,34',
'M106,130 C109,112 100,92 107,72',
'M118,130 C115,94 126,56 119,18',
'M130,130 C133,110 124,88 131,64',
'M142,130 C139,98 150,64 143,28',
'M154,130 C157,112 148,92 155,70',
'M166,130 C163,96 174,58 167,20',
'M178,130 C181,108 172,86 179,62',
'M190,130 C187,100 197,68 191,32',
'M202,130 C205,112 196,92 203,70',
];
return (
);
}
function TextureTopo({ width = 320, height = 320, color = 'currentColor', opacity = .5, className = '' }) {
// Irregular concentric contour rings, like an elevation map — the
// topographic half of the site's two-part motif.
const rings = [
'M160,34 C226,40 280,90 277,154 C274,222 214,280 148,277 C82,274 30,216 33,152 C36,88 94,28 160,34 Z',
'M160,66 C210,71 253,110 250,158 C247,210 202,251 154,248 C104,245 65,204 68,156 C71,108 118,61 160,66 Z',
'M160,98 C196,101 227,128 225,160 C223,196 192,225 156,223 C118,221 90,192 92,160 C94,128 132,95 160,98 Z',
'M160,128 C182,130 200,145 199,163 C198,184 180,200 158,198 C136,196 120,180 121,162 C122,144 142,126 160,128 Z',
];
return (
);
}
// Thin horizontal topo-line divider — used sparingly at 2-3 band
// transitions (not on every section) as the "signature texture" ornament.
function DividerTopo({ className = 'divider-topo' }) {
return (
);
}
const Textures = { Grass: TextureGrass, Topo: TextureTopo, DividerTopo };
Object.assign(window, {
useReveal, useCountUp, Reveal, LogoMark, ArrowRight, Icons, fmt,
SITE, jumpToSection, StatusBadge, SourceReceipt, Textures,
});