// Buttons, StatCounter, PostCard, FeaturedCard, LedgerRow, MandateBlock, Watermark, ScoringBar. const PrimaryBtn = ({ children, onClick, href }) => ( e.currentTarget.style.background = "var(--gold-light)"} onMouseLeave={(e) => e.currentTarget.style.background = "var(--gold)"} >{children} ); const SecondaryBtn = ({ children, onClick, href }) => ( { e.currentTarget.style.background = "var(--gold-tint-08)"; e.currentTarget.style.borderColor = "var(--gold)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "var(--gold-tint-40)"; }} >{children} ); const LinkBtn = ({ children, onClick, href }) => ( { e.currentTarget.style.borderColor = "var(--gold)"; e.currentTarget.style.gap = "14px"; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--gold-tint-30)"; e.currentTarget.style.gap = "8px"; }} >{children} ); function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); } const StatCounter = ({ value, label, context, large = false }) => { const ref = React.useRef(null); const [text, setText] = React.useState(value); const animated = React.useRef(false); React.useEffect(() => { const m = String(value).match(/^([~]?)(\d[\d,]*)([%]?)$/); if (!m) return; const pre = m[1] || ""; const target = parseFloat(m[2].replace(/,/g, "")); const suf = m[3] || ""; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; setText(`${pre}0${suf}`); const root = document.querySelector(".app-scroll"); const obs = new IntersectionObserver(([entry]) => { if (!entry.isIntersecting || animated.current) return; animated.current = true; const dur = 1400; const start = performance.now(); const tick = (now) => { const t = Math.min((now - start) / dur, 1); const n = Math.round(easeOutCubic(t) * target); if (t < 1) { setText(`${pre}${n.toLocaleString()}${suf}`); requestAnimationFrame(tick); } else setText(value); }; requestAnimationFrame(tick); }, { threshold: 0.3, root: root || null }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, [value]); const numSize = large ? "clamp(56px, 7vw, 88px)" : "clamp(40px, 5vw, 64px)"; return (
{text} {context && {context}}
); }; // ── PostCard — improved hover: left border wipe instead of box-shadow lift ─ const PostCard = ({ post, onClick }) => { const [hover, setHover] = React.useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} >

{post.title}

{post.excerpt}

Read on Substack ); }; const FeaturedCard = ({ label, title, body, footer, accent = true, height }) => (
{label && }

{title}

{body &&

{body}

} {footer &&
{footer}
}
); // ── LedgerRow — tabular / manifest style for program components ─────────── // Replaces the generic 2×2 card grid for the ASRP flagship preview. const LedgerRow = ({ number, title, description, isLast = false, onAction, actionLabel }) => { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "grid", gridTemplateColumns: "48px 1fr auto", gap: "0 32px", alignItems: "start", padding: "24px 0", borderBottom: isLast ? "none" : "1px solid var(--border)", cursor: onAction ? "pointer" : "default", borderLeft: hover && onAction ? "2px solid var(--gold)" : "2px solid transparent", paddingLeft: hover && onAction ? 14 : 0, transition: "border-color 250ms ease, padding-left 250ms ease", }} onClick={onAction} > {/* Number */} {number} {/* Content */}

{title}

{description}

{/* Action */} {onAction && (
)}
); }; const PullQuote = ({ children, attribution }) => (
“{children}”
{attribution &&

{attribution}

}
); const Watermark = ({ size = "70vw", opacity = 0.04, style }) => (
); // HeroDotGrid kept for backward compat on non-home pages const HeroDotGrid = ({ opacity = 1 }) => (
); // ── Section wrapper ───────────────────────────────────────────────────── const Section = ({ children, alt = false, padded = true, style, id, screenLabel }) => (
{children}
); // ── Page-hero used across detail pages ───────────────────────────────── const PageHero = ({ eyebrow, title, lead, children }) => (

{title}

 {lead && (

{lead}

 )} {children &&
{children}
}
); // ── CTA strip — scoping call ──────────────────────────────────────────── const ScopingStrip = ({ onEnquire, headline, body }) => (

{headline || "The Diagnostic is the starting point."}

{body || "A 30-minute scoping call to establish whether the Diagnostic is the right entry point for your organisation, and what the engagement would look like."}

Book a scoping call andrew@systemsthatdecide.io
); Object.assign(window, { PrimaryBtn, SecondaryBtn, LinkBtn, StatCounter, PostCard, FeaturedCard, LedgerRow, PullQuote, Watermark, HeroDotGrid, Section, PageHero, ScopingStrip, });