); const RarityBadge = ({ rarity, label, compact = false }) => { const { t } = (window.useT ? window.useT() : { t: s => s }); const cls = { CR: "badge-cr", EN: "badge-en", VU: "badge-vu", NT: "badge-nt", LC: "badge-lc", NA: "badge-na" }[rarity] || "badge-na"; return {compact ? rarity : <>{rarity} · {t(label)}}; }; // Plant image with graceful fallback to the Botanical SVG. // Real images come from Wikimedia Commons (CC-licensed) per plant in data.jsx; // if no image URL exists or the image fails to load, the stylised SVG renders. const PlantImage = ({ plant, style = {}, alt }) => { const [errored, setErrored] = React.useState(false); if (!plant) return null; const hasImage = plant.image && !errored; if (hasImage) { return ( {alt

setErrored(true)} style={{ objectFit: "cover", display: "block", ...style }} /> ); } return ; }; // Live weather from Open-Meteo (free, no API key). Cached at module scope so // every screen shares one HTTP call per page load. Returns null while loading // or on error; otherwise { temp:number, labelKey:string, icon:string }. let __weatherCache = null; let __weatherPromise = null; const __wmoMap = { 0: ["Clear", "sun"], 1: ["Mostly clear", "sun"], 2: ["Partly cloudy", "sun"], 3: ["Overcast", "sun"], 45: ["Foggy", "sun"], 48: ["Foggy", "sun"], 51: ["Light drizzle", "sun"], 53: ["Drizzle", "sun"], 55: ["Drizzle", "sun"], 61: ["Light rain", "sun"], 63: ["Rain", "sun"], 65: ["Heavy rain", "sun"], 66: ["Freezing rain", "snow"], 67: ["Freezing rain", "snow"], 71: ["Light snow", "snow"], 73: ["Snow", "snow"], 75: ["Heavy snow", "snow"], 77: ["Snow grains", "snow"], 80: ["Rain showers", "sun"], 81: ["Rain showers", "sun"], 82: ["Heavy showers", "sun"], 85: ["Snow showers", "snow"], 86: ["Snow showers", "snow"], 95: ["Thunderstorm", "sun"], 96: ["Thunderstorm", "sun"], 99: ["Thunderstorm", "sun"] }; const fetchWeather = () => { if (__weatherCache && Date.now() - __weatherCache.fetchedAt < 10 * 60 * 1000) { return Promise.resolve(__weatherCache); } if (__weatherPromise) return __weatherPromise; // Oulu Botanical Garden: 65.0617°N, 25.4661°E const url = "https://api.open-meteo.com/v1/forecast?latitude=65.0617&longitude=25.4661¤t=temperature_2m,weather_code&timezone=Europe%2FHelsinki"; __weatherPromise = fetch(url) .then(r => r.json()) .then(d => { const code = d && d.current ? d.current.weather_code : 0; const [labelKey, icon] = __wmoMap[code] || ["Clear", "sun"]; __weatherCache = { temp: Math.round((d && d.current ? d.current.temperature_2m : 0)), labelKey, icon, fetchedAt: Date.now() }; __weatherPromise = null; return __weatherCache; }) .catch(() => { __weatherPromise = null; return null; }); return __weatherPromise; }; const useWeather = () => { const [w, setW] = React.useState(__weatherCache); React.useEffect(() => { let cancelled = false; fetchWeather().then(data => { if (!cancelled && data) setW(data); }); return () => { cancelled = true; }; }, []); return w; }; // Persistent saved-plants list (localStorage). Returns [savedIds, toggle, isSaved]. const _getSaved = () => { try { return JSON.parse(localStorage.getItem("bloom_saved") || "[]"); } catch { return []; } }; const _setSaved = (arr) => { try { localStorage.setItem("bloom_saved", JSON.stringify(arr)); } catch {} if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent("bloom_saved_changed")); }; const useSavedPlants = () => { const [saved, setSaved] = React.useState(_getSaved); React.useEffect(() => { const h = () => setSaved(_getSaved()); window.addEventListener("bloom_saved_changed", h); window.addEventListener("storage", h); return () => { window.removeEventListener("bloom_saved_changed", h); window.removeEventListener("storage", h); }; }, []); const toggle = React.useCallback((id) => { const cur = _getSaved(); const next = cur.includes(id) ? cur.filter(x => x !== id) : [...cur, id]; _setSaved(next); return next.includes(id); }, []); const isSaved = React.useCallback((id) => saved.includes(id), [saved]); return { saved, toggle, isSaved }; }; // Toast: lightweight event bus. Call showToast("...") from anywhere. const showToast = (message, opts = {}) => { if (typeof window === "undefined") return; window.dispatchEvent(new CustomEvent("bloom_toast", { detail: { message, ...opts } })); }; // Share a plant. Uses Web Share API where available, falls back to clipboard. const sharePlant = async (plant) => { const base = typeof window !== "undefined" ? `${window.location.origin}${window.location.pathname}` : ""; const url = `${base}#plant=${plant.id}`; const title = `${plant.name} · BloomOulu`; const text = plant.story || `${plant.name} - ${plant.rarityLabel || plant.rarity}`; if (typeof navigator !== "undefined" && navigator.share) { try { await navigator.share({ title, text, url }); return { ok: true, mode: "shared" }; } catch (err) { if (err && err.name === "AbortError") return { ok: true, mode: "cancelled" }; } } if (typeof navigator !== "undefined" && navigator.clipboard) { try { await navigator.clipboard.writeText(url); return { ok: true, mode: "copied" }; } catch {} } return { ok: false, mode: "failed" }; }; // Sticker collection (Kid mode): persistent set of plant IDs scanned. const useStickerCollection = () => { const get = () => { try { return JSON.parse(localStorage.getItem("bloom_stickers") || "[]"); } catch { return []; } }; const [stickers, setStickers] = React.useState(get); React.useEffect(() => { const h = () => setStickers(get()); window.addEventListener("bloom_stickers_changed", h); return () => window.removeEventListener("bloom_stickers_changed", h); }, []); const collect = React.useCallback((id) => { const cur = get(); if (cur.includes(id)) return cur; const next = [...cur, id]; try { localStorage.setItem("bloom_stickers", JSON.stringify(next)); } catch {} window.dispatchEvent(new CustomEvent("bloom_stickers_changed")); return next; }, []); return { stickers, collect, has: (id) => stickers.includes(id) }; }; // Responsive helper - true at <=768px viewport const useIsMobile = (breakpoint = 768) => { const get = () => typeof window !== "undefined" && window.innerWidth <= breakpoint; const [isMobile, setIsMobile] = React.useState(get); React.useEffect(() => { const mq = window.matchMedia(`(max-width: ${breakpoint}px)`); const handler = (e) => setIsMobile(e.matches); mq.addEventListener ? mq.addEventListener("change", handler) : mq.addListener(handler); return () => { mq.removeEventListener ? mq.removeEventListener("change", handler) : mq.removeListener(handler); }; }, [breakpoint]); return isMobile; }; // Garden centroid (Oulu Botanical Garden, Linnanmaa) const GARDEN_CENTER = [65.0617, 25.4661]; // Plant-specific micro-coordinates within the garden (small offsets from centroid). // In a real deployment these would come from the accession DB; for the demo each // plant has a deterministic, plausible position so the map markers don't overlap. const PLANT_COORDS = { "puls-pat": [65.0619, 25.4664], // south esker bed "camp-uni": [65.0623, 25.4658], // alpine fell bed "saxi-hirc": [65.0615, 25.4669], // mire / wetland section "prim-nut": [65.0613, 25.4655], // Bothnian Bay bed "trol-eur": [65.0620, 25.4670], // meadow bed 4 "cyp-cal": [65.0617, 25.4672], // limestone bed "lob-pul": [65.0625, 25.4663], // aspen stand "vict-am": [65.0617, 25.4661] // Romeo & Julia greenhouse (centre) }; const PLANT_BED = { "puls-pat": "South esker bed · 220m through main gate, left at the meadow", "camp-uni": "Alpine / fell bed · north-west of the main path", "saxi-hirc": "Wetland (mire) section", "prim-nut": "Bothnian Bay coastal bed", "trol-eur": "Meadow bed 4", "cyp-cal": "Limestone forest bed · bed 7", "lob-pul": "Aspen stand · east edge", "vict-am": "Romeo & Julia greenhouse · main pond" }; // Interactive Leaflet map of the garden with a marker for the highlighted plant. const PlantMap = ({ plant, height = 360 }) => { const ref = React.useRef(null); React.useEffect(() => { if (!ref.current || typeof L === "undefined") return; const coord = (plant && PLANT_COORDS[plant.id]) || GARDEN_CENTER; const m = L.map(ref.current, { scrollWheelZoom: false, attributionControl: true }) .setView(coord, 17); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(m); // Garden centre + a soft circle marking the garden grounds L.circle(GARDEN_CENTER, { radius: 200, color: "#2D5440", weight: 1, fillColor: "#88A050", fillOpacity: 0.18 }).addTo(m); if (plant) { // Custom marker styled like the BloomOulu pin const icon = L.divIcon({ className: "bloom-pin", html: `

${plant.rarity || "•"}

`, iconSize: [28, 28], iconAnchor: [14, 14] }); const marker = L.marker(coord, { icon, title: plant.name }).addTo(m); const bed = PLANT_BED[plant.id] || "Oulu Botanical Garden"; marker.bindPopup(`${plant.name}
${bed}`).openPopup(); } else { L.marker(GARDEN_CENTER, { title: "Oulu Botanical Garden" }) .addTo(m) .bindPopup("University of Oulu Botanical Garden
65.0617° N, 25.4661° E") .openPopup(); } // Resize once layout settles setTimeout(() => m.invalidateSize(), 100); return () => { try { m.remove(); } catch {} }; }, [plant && plant.id]); return (

); }; // Real scannable QR code via qrcode-generator (loaded in index.html). // Renders an SVG with a centred BloomOulu mark. const QRCode = ({ value, size = 180, ecLevel = "H", logoSize = 0.22, color = "#1F3C2D", bg = "#FFFFFF" }) => { const ref = React.useRef(null); React.useEffect(() => { if (!ref.current || typeof qrcode === "undefined" || !value) return; const qr = qrcode(0, ecLevel); qr.addData(value); qr.make(); const count = qr.getModuleCount(); const cell = size / (count + 2); // include 1-cell quiet zone on each side const offset = cell; let path = ""; for (let r = 0; r < count; r++) { for (let c = 0; c < count; c++) { if (qr.isDark(r, c)) { path += `M${(c * cell + offset).toFixed(2)},${(r * cell + offset).toFixed(2)}h${cell.toFixed(2)}v${cell.toFixed(2)}h-${cell.toFixed(2)}z`; } } } const logo = logoSize > 0 ? Math.round(size * logoSize) : 0; ref.current.innerHTML = ` `; }, [value, size, ecLevel, logoSize, color, bg]); return

; }; // Build a deep-link URL for a plant. When scanned, the app reads the hash // and routes to that plant page on load. const plantDeepLink = (plantId) => { if (typeof window === "undefined") return `#plant=${plantId}`; return `${window.location.origin}${window.location.pathname}#plant=${plantId}`; }; // Funds-flow policy modal: transparent breakdown of where adoption money goes. // Triggered from Discover's "Read where your money goes", Plant page's // "Read the policy", and the footer "Funds-flow policy" link. Sources the // research PDF section 12 (transparency policy) + section 3.3 (VAT split). const FundsFlowModal = ({ open, onClose, t }) => { React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; const breakdown = [ { label: t("Direct ex-situ work"), pct: 62, color: "var(--forest)", note: t("Propagation, seed collection, fieldwork, mycorrhizal partnerships") }, { label: t("Seed bank deposits (Luomus)"), pct: 18, color: "var(--moss)", note: t("Long-term storage in the Finnish national gene bank under LIFE+ ESCAPE protocols") }, { label: t("Garden operations & signage"), pct: 12, color: "var(--bloom)", note: t("Curator time, label production, weatherproof QR refresh, accessibility tags") }, { label: t("Payment & platform costs"), pct: 8, color: "var(--ink-mute)", note: t("MobilePay / Stripe fees, hosting, audit") } ]; return ( ); }; // Global controller for the funds-flow modal. Any component can call // `openFundsFlow()` and a single root listener will show the modal. const openFundsFlow = () => { if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent("bloom_open_funds_flow")); }; // References & sources modal. Lists every external source backing the // data in BloomOulu's UI - matched against the BloomOulu research // document (Comprehensive Platform Reference & Deep Analysis). const REFERENCES = [ { title: "Conservation evidence (Finland)", items: [ { name: "Red List of Finnish Species (2019 assessment)", source: "Finnish Environment Institute · ymparisto.fi", url: "https://www.ymparisto.fi/en-US/Nature/Threatened_species" }, { name: "LIFE+ ESCAPE - Ex-situ conservation of Finnish native plant species (LIFE11 BIO/FI/000917, 2012–2017)", source: "European Commission LIFE programme", url: "https://webgate.ec.europa.eu/life/publicWebsite/project/LIFE11-BIO-FI-000917" }, { name: "FinBIF - Finnish Biodiversity Information Facility", source: "laji.fi", url: "https://laji.fi/" }, { name: "Annales Botanici Fennici / Nordic Journal of Botany", source: "Finnish Botanical Society · Wiley", url: "https://onlinelibrary.wiley.com/journal/17561051" }, { name: "Memoranda Societatis pro Fauna et Flora Fennica", source: "Societas pro Fauna et Flora Fennica", url: "https://journal.fi/msff" } ] }, { title: "Oulu Botanical Garden", items: [ { name: "Botanical Garden of the University of Oulu", source: "oulu.fi", url: "https://www.oulu.fi/en/university/botanical-garden" }, { name: "Visit listing", source: "Visit Oulu / Visit Finland", url: "https://www.visitoulu.fi/en/" }, { name: "BGCI GardenSearch entry", source: "Botanic Gardens Conservation International", url: "https://gardensearch.bgci.org/garden/3929" } ] }, { title: "Peer adoption programmes (benchmarks)", items: [ { name: "Adopt a Seed (Save a Species)", source: "Royal Botanic Gardens Kew", url: "https://www.kew.org/read-and-watch/adopt-a-seed-msb" }, { name: "Adoption / Örökbefogadás", source: "ELTE Füvészkert (Budapest)", url: "https://fuveszkert.org/adoption-program" }, { name: "Tree / Hope Tree sponsorship", source: "Royal Botanic Garden Edinburgh", url: "https://www.rbge.org.uk/support-us/celebrate-life/adopt-a-tree/" }, { name: "Adopt a Plant (€300/yr)", source: "Plantentuin Meise (Belgium)", url: "https://www.plantentuinmeise.be/en/adopt-a-plant-syx8" }, { name: "Adopt-A-Tree (from $7,500)", source: "Queens Botanical Garden (NYC)", url: "https://queensbotanical.org/adopt-a-tree" }, { name: "Adopt a Plant", source: "Brooklyn Botanic Garden", url: "https://www.bbg.org/support/adopt_a_plant" }, { name: "Honor & Memorial Gifts · Daffodil Hill", source: "New York Botanical Garden", url: "https://www.nybg.org/join-support/" }, { name: "Membership & Giving · Friends / Corporate", source: "Mount Auburn Cemetery", url: "https://mountauburn.org/" }, { name: "VIP Orchid Naming (1956–present)", source: "Singapore Botanic Gardens · National Parks Board", url: "https://www.nparks.gov.sg/sbg" }, { name: "Center for Plant Conservation - National Collection", source: "saveplants.org", url: "https://saveplants.org/" } ] }, { title: "QR & visitor-engagement research", items: [ { name: "QR Codes in Museums: Unlocking New Opportunities (2024–25)", source: "MuseumNext", url: "https://www.museumnext.com/article/qr-codes-are-experiencing-a-resurgence/" }, { name: "Life & Death of QR Codes in Museums", source: "Cuseum", url: "https://cuseum.com/blog/life-death-of-qr-codes-in-museums" }, { name: "QR codes in museums - worth the effort? (NMS typewriter case)", source: "National Museums Scotland blog", url: "https://blog.nms.ac.uk/" } ] }, { title: "Image identification & plant ID context", items: [ { name: "Pl@ntNet (image-based species ID, CNRS)", source: "plantnet.org", url: "https://plantnet.org/" }, { name: "iNaturalist / Seek", source: "California Academy of Sciences · National Geographic", url: "https://www.inaturalist.org/" } ] }, { title: "Open data & technology", items: [ { name: "OpenStreetMap (map tiles)", source: "© OpenStreetMap contributors", url: "https://www.openstreetmap.org/copyright" }, { name: "Open-Meteo (live weather)", source: "open-meteo.com (CC BY 4.0)", url: "https://open-meteo.com/" }, { name: "Wikimedia Commons (plant photographs, per-file licences)", source: "commons.wikimedia.org", url: "https://commons.wikimedia.org/" }, { name: "GBIF - Global Biodiversity Information Facility", source: "gbif.org", url: "https://www.gbif.org/" } ] }, { title: "Standards & legal frameworks", items: [ { name: "WCAG 2.2 AA accessibility guidelines", source: "W3C / WAI", url: "https://www.w3.org/WAI/WCAG22/quickref/" }, { name: "European Accessibility Act (Directive 2019/882, enforceable 28 June 2025)", source: "European Commission", url: "https://ec.europa.eu/social/main.jsp?catId=1202" }, { name: "BGCI Conservation Standards & reporting framework", source: "Botanic Gardens Conservation International", url: "https://www.bgci.org/our-work/projects-and-case-studies/" }, { name: "GDPR (General Data Protection Regulation)", source: "European Commission", url: "https://gdpr-info.eu/" }, { name: "TVL §57 - Finnish corporate gift deductibility", source: "Finnish Income Tax Act", url: "https://www.finlex.fi/fi/laki/ajantasa/1992/19921535" } ] } ]; const ReferencesModal = ({ open, onClose, t }) => { React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; return ( ); }; const openReferences = () => { if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent("bloom_open_references")); }; const ReferencesController = () => { const { t } = (window.useT ? window.useT() : { t: s => s }); const [open, setOpen] = React.useState(false); React.useEffect(() => { const h = () => setOpen(true); window.addEventListener("bloom_open_references", h); return () => window.removeEventListener("bloom_open_references", h); }, []); return setOpen(false)} t={t}/>; }; const FundsFlowController = () => { const { t } = (window.useT ? window.useT() : { t: s => s }); const [open, setOpen] = React.useState(false); React.useEffect(() => { const h = () => setOpen(true); window.addEventListener("bloom_open_funds_flow", h); return () => window.removeEventListener("bloom_open_funds_flow", h); }, []); return setOpen(false)} t={t}/>; }; Object.assign(window, { Icon, Progress, RarityBadge, Botanical, PlantImage, BloomMark, useIsMobile, useWeather, useSavedPlants, useStickerCollection, showToast, sharePlant, PlantMap, PLANT_BED, PLANT_COORDS, GARDEN_CENTER, QRCode, plantDeepLink, FundsFlowModal, FundsFlowController, openFundsFlow, ReferencesModal, ReferencesController, openReferences });

{t("Where your money goes")}

{t("Sources & references")}

{t(section.title)}