// Cocoa Empire — app shell (nav, footer, screen routing, tweaks) const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": ["#3D1C08", "#F8F5F1", "#B8945A"], "density": "regular", "showPodMotifs": true, "accent": "#B8945A" }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [screen, setScreen] = React.useState("overview"); const [prevScreen, setPrevScreen] = React.useState("overview"); const [prevScroll, setPrevScroll] = React.useState(0); const [lotFocus, setLotFocus] = React.useState(null); const [splashKey, setSplashKey] = React.useState(0); const go = (next, lotId) => { setPrevScreen(screen); setPrevScroll(window.scrollY); setScreen(next); if (lotId) setLotFocus(lotId); if (next === "overview") setSplashKey((k) => k + 1); window.scrollTo({ top: 0, behavior: "instant" }); }; const goBack = () => { const target = prevScreen && prevScreen !== screen ? prevScreen : "overview"; const restoreY = prevScroll; setPrevScreen(screen); setPrevScroll(window.scrollY); setScreen(target); requestAnimationFrame(() => { requestAnimationFrame(() => { window.scrollTo({ top: restoreY, behavior: "instant" }); }); }); }; const goToCalc = () => { setScreen("financing"); window.scrollTo({ top: 0, behavior: "instant" }); requestAnimationFrame(() => { requestAnimationFrame(() => { const el = document.querySelector(".calc"); if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: "smooth" }); } }); }); }; // Smooth-scroll to an anchor on the current screen. If the screen does // not contain the anchor (e.g. clicking Impact while on the Origin // screen), it first navigates to Overview, then scrolls. const goAnchor = (id, screenName = "overview") => { const doScroll = () => { const el = document.getElementById(id); if (!el) return; const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: "smooth" }); }; if (screen !== screenName) { setScreen(screenName); requestAnimationFrame(() => requestAnimationFrame(doScroll)); } else { doScroll(); } }; // Apply tweaks via CSS variables on React.useEffect(() => { const [cocoa, cream, gold] = t.palette || ["#3D1C08", "#F8F5F1", "#B8945A"]; document.documentElement.style.setProperty("--cocoa", cocoa); document.documentElement.style.setProperty("--cream", cream); document.documentElement.style.setProperty("--gold", t.accent || gold); document.body.dataset.density = t.density; document.body.dataset.podMotifs = t.showPodMotifs ? "1" : "0"; }, [t]); // Pod motif visibility — hide via CSS when toggled off React.useEffect(() => { const styleId = "pod-vis"; let el = document.getElementById(styleId); if (!el) { el = document.createElement("style"); el.id = styleId; document.head.appendChild(el); } el.textContent = t.showPodMotifs ? "" : `.hero-pods, .pod-corner { display: none !important; }`; }, [t.showPodMotifs]); const onDark = screen === "overview"; // hero is dark on overview; topbar overlays it const [modal, setModal] = React.useState(null); // "capital" | "origin" | "signin" | null // Cross-link from sign-in modal -> apply (capital application). const closeModal = (next) => { setModal(null); if (next === "apply") { setTimeout(() => setModal("capital"), 220); } }; return (
{screen === "overview" && }
go("overview")}>
{screen === "overview" && setModal(k)} />} {screen === "origin" && ( setModal("signin")} onApply={() => setModal("capital")} go={go}> )} {screen === "supply" && } {screen === "buyers" && } {screen === "impact" && } {screen === "financing" && ( setModal("signin")} onApply={() => setModal("capital")} go={go}> )} {screen === "track" && } {screen === "calc" && ( setModal("signin")} onApply={() => setModal("capital")} go={go}> )} {screen === "control" && } {screen === "team" && } {screen === "legal" && } {screen === "privacy" && } {screen === "disclosures" && }
); } function SplashIntro() { const [phase, setPhase] = React.useState("in"); React.useEffect(() => { // Replays on every mount — caller controls re-mount via `key`. const t1 = setTimeout(() => setPhase("hold"), 1000); const t2 = setTimeout(() => setPhase("out"), 2400); const t3 = setTimeout(() => setPhase("gone"), 3800); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, []); if (phase === "gone") return null; return (