// ───────────────────────────────────────────────────────────────────────── // components.jsx — page-section components for the blockscanner site. // // All sections read their copy from window.{SITE,NAV,HERO,STATS,PRODUCTS,CONTACT,RESEARCH} // (see content.jsx). Page templates (landing.html, research.html) just // compose these and don't carry copy directly. // ───────────────────────────────────────────────────────────────────────── async function submitForm(endpoint, body, opts = {}) { const url = `${window.__bs_api || ""}${endpoint}`; const headers = { "x-csrf-token": window.__bs_csrf }; if (!opts.multipart) headers["content-type"] = "application/json"; const fingerprint = await window.__bs_fingerprint; const enriched = { ...body, _hp: body._hp ?? "", form_token: window.__bs_form_token, fingerprint, hcaptcha_token: window.hcaptcha?.getResponse?.() ?? "", }; const payload = opts.multipart ? body : JSON.stringify(enriched); const res = await fetch(url, { method: "POST", credentials: "include", headers, body: payload, }); if (!res.ok) { let errMsg = `${res.status}`; try { const j = await res.json(); if (j.error) errMsg = j.error; } catch {} throw new Error(errMsg); } } // Adds a `is-revealed` class to every [data-reveal] element as it scrolls // into view. Used for subtle entrance animations across the page. function useReveal() { React.useEffect(() => { const els = document.querySelectorAll("[data-reveal]"); if (!("IntersectionObserver" in window) || matchMedia("(prefers-reduced-motion: reduce)").matches) { els.forEach((el) => el.classList.add("is-revealed")); return; } const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("is-revealed"); io.unobserve(e.target); } }); }, { threshold: 0.04, rootMargin: "0px 0px -8% 0px" } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } // Smoothly scrolls anchor links inside the page so jumping between sections // isn't a hard cut. function useAnchorScroll() { React.useEffect(() => { const onClick = (e) => { const a = e.target.closest("a[href^='#']"); if (!a) return; const href = a.getAttribute("href"); if (!href || href === "#") return; const el = document.querySelector(href); if (!el) return; e.preventDefault(); el.scrollIntoView({ behavior: "smooth", block: "start" }); }; document.addEventListener("click", onClick); return () => document.removeEventListener("click", onClick); }, []); } // ───────────────────────────────────────────────────────── Header / footer function BSHeader({ theme, onToggle }) { const features = window.FEATURES || {}; return (
{SITE.name}
{features.auth ? (
Sign in Get on the platform
) : ( Embargoed research index )}
); } // Mega-menu for the Products nav item; gated by FEATURES.dropdownNav. function BSNavProductsDropdown({ item }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onEsc = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("click", onDoc); document.addEventListener("keydown", onEsc); return () => { document.removeEventListener("click", onDoc); document.removeEventListener("keydown", onEsc); }; }, []); return (
setOpen(true)} onMouseLeave={() => setOpen(false)}> { e.preventDefault(); setOpen((v) => !v); }}> {item.label}
{PRODUCTS.map((p, i) => ( § {String(i + 1).padStart(2, "0")} {p.short} {p.eyebrow} ))}
All products · overview → Research index →
); } function BSFooter() { const features = window.FEATURES || {}; return ( ); } // ───────────────────────────────────────────────────────── Landing sections function BSHero() { return (

{HERO.eyebrow}

{HERO.headline.split("\n").map((line, i, arr) => ( {line} {i < arr.length - 1 &&
} ))}

{HERO.lede}

{HERO.ctas && (
{HERO.ctas.map((c, i) => ( {c.label} ))}
)}
Established
{SITE.established}
Domains
{SITE.domains}
Index
{SITE.domain}
); } function BSStatBand() { if (!STATS || !STATS.length) return null; const [openIdx, setOpenIdx] = React.useState(null); // The index whose content is currently rendered in the detail panel. Lags // behind openIdx by one animation when switching tiles so the panel can // close, swap content, and re-open — never instantly replacing. const [renderIdx, setRenderIdx] = React.useState(null); const timeoutRef = React.useRef(null); React.useEffect(() => { clearTimeout(timeoutRef.current); if (openIdx === null) { // closing — keep current content rendered until the close animation // finishes so users see what they had. timeoutRef.current = setTimeout(() => setRenderIdx(null), 420); } else if (renderIdx === null) { // opening fresh setRenderIdx(openIdx); } else if (renderIdx !== openIdx) { // switching: close first, then swap + open after the animation const prev = openIdx; setOpenIdx(null); timeoutRef.current = setTimeout(() => { setRenderIdx(prev); setOpenIdx(prev); }, 280); } return () => clearTimeout(timeoutRef.current); // eslint-disable-next-line react-hooks/exhaustive-deps }, [openIdx]); React.useEffect(() => { if (openIdx === null) return; const onKey = (e) => { if (e.key === "Escape") setOpenIdx(null); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [openIdx]); const toggle = (i) => setOpenIdx((cur) => (cur === i ? null : i)); const isPanelOpen = openIdx !== null && renderIdx === openIdx; const rendered = renderIdx !== null ? STATS[renderIdx] : null; return (
{STATS.map((s, i) => ( ))}
{rendered && rendered.detail && (
{rendered.value}

{rendered.detail.title}

{rendered.detail.body}

{rendered.detail.cta && ( {rendered.detail.cta.label} )}
{rendered.detail.facts.map(([k, v]) => (
{k}
{v}
))}
)}
); } function BSProductTOC() { return (
§ 01 — 05

Five engines.
One pipeline.

    {PRODUCTS.map((p, i) => (
  1. § {String(i + 1).padStart(2, "0")} {p.short} {p.eyebrow}
    2. ))}
); } function BSProduct({ product, index }) { const Figure = FIGURES[product.figureKey]; const isFeatured = !!product.featureNumber; return (
§ {String(index + 1).padStart(2, "0")}
{product.eyebrow}

{product.title}

{product.body}

{product.footnote && (

{product.footnote}

)}
{product.facts.map(([k, v]) => (
{k}
{v}
))}
{isFeatured ? (
{product.featureNumber}
{product.featureLabel.split("\n").map((line, i, arr) => ( {line}{i < arr.length - 1 &&
} ))}
{Figure ?
: null}
) : (
{Figure ?
: null}
)}
Fig. {index + 1} {product.caption}
); } function BSProducts() { return (
{PRODUCTS.map((p, i) => ( ))}
); } function BSContact() { const [submitted, setSubmitted] = React.useState(false); const [error, setError] = React.useState(null); const onSubmit = async (e) => { e.preventDefault(); setError(null); try { const form = new FormData(e.currentTarget); await submitForm("/api/contact", Object.fromEntries(form.entries())); setSubmitted(true); } catch (err) { setError(err.message); } }; return (
§ 06

{CONTACT.eyebrow}

{CONTACT.headline}

{CONTACT.lede}

{submitted ? (
Thanks — we'll be in touch within two business days.
For anything time-sensitive, write to {SITE.email}.
) : (