/* ProTGen site — shared primitives, chrome, motifs, router */ /* ============================================================ ROUTER (hash-based) + reveal hook ============================================================ */ const ROUTES = ["home","platform","program","investors","about","resources","contact","article"]; function useRoute() { const parse = () => { const h = (window.location.hash || "#/home").replace(/^#\/?/, ""); const [path, q] = h.split("?"); const seg = path.split("/").filter(Boolean); const page = ROUTES.includes(seg[0]) ? seg[0] : "home"; return { page, sub: seg[1] || null, raw: h }; }; const [route, setRoute] = React.useState(parse()); React.useEffect(() => { const fn = () => { setRoute(parse()); window.scrollTo({ top: 0, behavior: "auto" }); }; window.addEventListener("hashchange", fn); return () => window.removeEventListener("hashchange", fn); }, []); return route; } function go(page, sub) { window.location.hash = "#/" + page + (sub ? "/" + sub : ""); } function useReveal() { const ref = React.useRef(null); React.useEffect(() => { const els = ref.current ? ref.current.querySelectorAll(".reveal") : []; if (!els.length) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12 }); els.forEach((el, i) => { el.style.transitionDelay = Math.min(i * 60, 360) + "ms"; io.observe(el); }); return () => io.disconnect(); }); return ref; } /* ============================================================ PRIMITIVES ============================================================ */ function Mark({ size = 30, dark = false }) { const ring = dark ? "#46CAD3" : "#0F7C80"; const node = dark ? "#2A9498" : "#0F7C80"; const sig = dark ? "#F7F2E8" : "#46CAD3"; return ( ); } function Logo({ dark = false }) { return ( go("home")} style={{ cursor: "pointer" }}> ProTGen ); } function Eyebrow({ children, tone }) { return {children}; } function Icon({ name, size = 18 }) { const p = { arrow: <>, arrowDown: <>, target: <>, check: , branch: <>, shield: <>, layers: <>, flask: <>, milestone: <>, dot: , commit: <>, activity: , plus: <>, download: <>, mail: <>, file: <>, menu: <>, sliders: <>, pin: <>, clock: <>, }[name]; return ( ); } /* ============================================================ MOTIFS — signal architecture vocabulary ============================================================ */ /* Repertoire constellation: sparse left → ordered right, gate in middle */ function ConstellationMotif({ animate = true }) { return ( {[26,40,54,68].map((y,i)=>)} {[26,40,54,68].map((y,i)=>)} ); } /* Restoration gradient field with sparse→dense node lattice */ function RestorationField() { return ( {Array.from({length:6}).map((_,r)=>Array.from({length:9}).map((_,c)=>{ const x=12+c*12.4, y=14+r*16; const t=c/8; const show = Math.random() < (0.25 + t*0.7); const big = t>0.7 && r%2===0; return show ? 50?y+8:y} r={big?2.6:1.9} fill={t>0.85?"#46CAD3":t>0.5?"#0F7C80":"#3A535B"} className="c-ord" style={{ "--d": (t*500)+"ms" }}/> : null; }))} ); } /* Signal gate — large centered aperture */ function GateMotif({ size = 360, open = true }) { return ( ); } /* Thymic architecture — nested simplified curves */ function ThymicArch({ size = 360 }) { return ( {[0,1,2,3].map(i=>( ))} ); } /* ============================================================ HEADER / FOOTER / MODAL ============================================================ */ const NAV_ITEMS = [ ["platform","Platform"], ["program","ProT‑096"], ["investors","Investors & partners"], ["resources","Resources"], ["about","About"], ]; function Header({ page, onRequest }) { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const fn = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", fn); fn(); return () => window.removeEventListener("scroll", fn); }, []); React.useEffect(() => { setOpen(false); }, [page]); const nav = (p) => (e) => { e.preventDefault(); go(p); }; return (
{NAV_ITEMS.map(([p,l]) => {l})} Contact [ StoryLab ] — internal
); } function Footer({ onRequest }) { const nav = (p) => (e) => { e.preventDefault(); go(p); }; return ( ); } function RequestModal({ open, onClose, preset }) { const [sent, setSent] = React.useState(false); const [type, setType] = React.useState(preset || "Investor"); React.useEffect(() => { if (open) { setSent(false); setType(preset || "Investor"); } }, [open, preset]); if (!open) return null; return (
e.stopPropagation()}>
Request a briefing

{sent ? "Request received." : "Start a conversation"}

{sent ? (

Thank you. The ProTGen team will follow up with briefing materials tailored to your interest. (Demo form — no data is sent.)

) : (
)}
); } /* Section header helper */ function SectionHead({ label, tone, title, lead, center, maxw }) { return (
{label} {title &&

{title}

} {lead &&

{lead}

}
); } Object.assign(window, { useRoute, go, useReveal, Mark, Logo, Eyebrow, Icon, ConstellationMotif, RestorationField, GateMotif, ThymicArch, Header, Footer, RequestModal, SectionHead, });