// Main app - top nav + screen routing // Read a hash like "#plant=puls-pat" or "#screen=adopt" into a route object. const routeFromHash = () => { if (typeof window === "undefined") return null; const hash = window.location.hash || ""; const m = hash.match(/#(?:.*&)?plant=([^&]+)/); if (m) return { screen: "plant", plantId: decodeURIComponent(m[1]) }; const s = hash.match(/#(?:.*&)?screen=([^&]+)/); if (s) return { screen: decodeURIComponent(s[1]) }; return null; }; const App = () => { const [route, setRoute] = React.useState(() => routeFromHash() || { screen: "discover" }); const [lang, setLang] = React.useState("EN"); const [openMenu, setOpenMenu] = React.useState(null); // "notif" | "account" | "a11y" | null const [a11y, setA11y] = React.useState(() => { if (typeof window === "undefined" || !window.localStorage) return { largerText: false, highContrast: false, reducedMotion: false }; try { return JSON.parse(localStorage.getItem("bloom_a11y") || "{}"); } catch { return {}; } }); const t = React.useCallback((s) => translate(s, lang), [lang]); // Apply accessibility settings to classes React.useEffect(() => { if (typeof document === "undefined") return; document.body.classList.toggle("bloom-larger-text", !!a11y.largerText); document.body.classList.toggle("bloom-high-contrast", !!a11y.highContrast); document.body.classList.toggle("bloom-reduced-motion", !!a11y.reducedMotion); if (window.localStorage) localStorage.setItem("bloom_a11y", JSON.stringify(a11y)); }, [a11y]); const nav = (screen, ...args) => { if (screen === "plant") setRoute({ screen, plantId: args[0] }); else if (screen === "adopt") setRoute({ screen, plantId: args[0], intent: args[1] }); else if (screen === "ask") setRoute({ screen, askPlantId: args[1] || null }); else setRoute({ screen }); setOpenMenu(null); // Update URL hash so the page is shareable and reload-safe (the // kiosk QR points at the same hash). if (typeof window !== "undefined") { let newHash = ""; if (screen === "plant") newHash = `#plant=${encodeURIComponent(args[0])}`; else if (screen !== "discover") newHash = `#screen=${encodeURIComponent(screen)}`; if (newHash !== window.location.hash) { history.replaceState(null, "", newHash || window.location.pathname); } } window.scrollTo({ top: 0, behavior: "instant" }); }; // Listen to back/forward and external hash changes (e.g. user pastes a deep link) React.useEffect(() => { const handle = () => { const r = routeFromHash(); if (r) setRoute(r); }; window.addEventListener("hashchange", handle); window.addEventListener("popstate", handle); return () => { window.removeEventListener("hashchange", handle); window.removeEventListener("popstate", handle); }; }, []); // Close dropdowns on click-outside or Escape React.useEffect(() => { if (!openMenu) return; const close = (e) => { if (e.type === "keydown" && e.key !== "Escape") return; if (e.type === "click" && e.target.closest("[data-menu-root]")) return; setOpenMenu(null); }; document.addEventListener("click", close); document.addEventListener("keydown", close); return () => { document.removeEventListener("click", close); document.removeEventListener("keydown", close); }; }, [openMenu]); const notifications = [ { icon: "flower", color: "var(--rust)", title: t("Pulsatilla patens is blooming"), time: t("3 hours ago"), unread: true }, { icon: "gift", color: "var(--sage)", title: t("Your gift to Aino was opened"), time: t("Yesterday · 14:22"), unread: true }, { icon: "leaf", color: "var(--teal)", title: t("Quarterly batch update posted"), time: t("May 1, 2026") }, { icon: "bell", color: "var(--amber)", title: t("Renewal upcoming - Campanula uniflora"), time: t("8 June") } ]; const unreadCount = notifications.filter(n => n.unread).length; const navItems = [ { id: "discover", label: t("Discover"), icon: "leaf" }, { id: "ask", label: t("AskTheGarden"), icon: "bot" }, { id: "adopt", label: t("Adopt"), icon: "seedling" }, { id: "garden", label: t("My Garden"), icon: "user" }, { id: "kiosk", label: t("Kiosk"), icon: "building" } ]; const isFullBleed = route.screen === "ask" || route.screen === "kiosk"; return (

{/* Skip to main content link (WCAG 2.4.1 Bypass Blocks) */} {t("Skip to main content")}

{route.screen === "discover" && nav("plant", id)} onNav={nav}/>} {route.screen === "plant" && nav("discover")} onNav={nav} onAdopt={(id, intent) => nav("adopt", id, intent)}/>} {route.screen === "adopt" && } {route.screen === "ask" && nav("plant", id)} presetPlantId={route.askPlantId}/>} {route.screen === "garden" && nav("plant", id)} onNav={nav}/>} {route.screen === "kiosk" && }

{/* Live toast announcer */} {/* Global funds-flow disclosure modal */} {/* Global sources & references modal */} {/* Accessibility settings floating button + panel */} {openMenu === "a11y" && ( )} {/* Mobile bottom tab bar - shown via CSS at <=768px */} {/* Footer - hide on full-bleed screens */} {!isFullBleed && ( )}

); }; // Toaster: listens for "bloom_toast" CustomEvents and renders them. const Toaster = () => { const [toasts, setToasts] = React.useState([]); React.useEffect(() => { const handler = (e) => { const id = Math.random().toString(36).slice(2); const message = e.detail?.message || ""; setToasts(t => [...t, { id, message }]); setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3000); }; window.addEventListener("bloom_toast", handler); return () => window.removeEventListener("bloom_toast", handler); }, []); if (!toasts.length) return null; return (

{toasts.map(t =>

{t.message}

)}

); }; window.Toaster = Toaster; // Shared dropdown styling const dropdownStyle = { position: "absolute", top: "calc(100% + 8px)", right: 0, width: 320, maxWidth: "calc(100vw - 32px)", background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 12, boxShadow: "var(--shadow-deep)", zIndex: 200, overflow: "hidden" }; const dropdownHeaderStyle = { padding: "14px 16px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }; const dropdownFooterStyle = { display: "flex", alignItems: "center", justifyContent: "center", gap: 6, width: "100%", padding: "12px", borderTop: "1px solid var(--line)", background: "rgba(31,58,44,0.03)", fontSize: 13, color: "var(--forest-deep)", fontWeight: 500, cursor: "pointer", border: 0 }; ReactDOM.createRoot(document.getElementById("root")).render();