// HydroPulse — shared UI: logo, nav, footer, icons, utilities const { useState, useEffect, useRef } = React; // ------ Hash router ------ window.useHashRoute = function useHashRoute() { const [route, setRoute] = useState(() => window.location.hash.slice(1) || "/"); useEffect(() => { const onHash = () => setRoute(window.location.hash.slice(1) || "/"); window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [route]); return route; }; window.navTo = function navTo(path) { window.location.hash = path; }; // ------ Reveal observer ------ window.useReveal = function useReveal() { useEffect(() => { const els = document.querySelectorAll(".reveal"); const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }); }; // ------ Icons ------ window.Icon = function Icon({ name, size = 14, stroke = 1.5 }) { const s = size; const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "arrow-right": return ; case "arrow-up-right": return ; case "arrow-down": return ; case "plus": return ; case "minus": return ; case "close": return ; case "download": return ; case "play": return ; case "menu": return ; case "search": return ; case "wave": return ; case "dot": return ; default: return null; } }; // ------ Logo variant (root `tweaks.logoVariant`, synced in applyTweaks + data-logo-variant) ------ function readLogoVariantFromDom() { if (typeof document === "undefined") return "inline"; const a = document.documentElement.getAttribute("data-logo-variant"); if (a === "brand") return "brand"; if (a === "inline") return "inline"; if (typeof window !== "undefined" && window.HP_LOGO_USE_INLINE) return "inline"; return "inline"; } window.useLogoVariant = function useLogoVariant() { const [v, setV] = useState(readLogoVariantFromDom); useEffect(() => { const onTweaks = (e) => { if (e && e.detail && (e.detail.logoVariant === "brand" || e.detail.logoVariant === "inline")) { setV(e.detail.logoVariant); return; } setV(readLogoVariantFromDom()); }; window.addEventListener("hp-tweaks", onTweaks); return () => window.removeEventListener("hp-tweaks", onTweaks); }, []); return v; }; // ------ Brand logos: assets/brand/HydroPulse_logo_*.svg (see EXPORT-INSTRUCTIONS.md) ------ // *Inverse* = light/white art for dark UI (full menu) — no paper chip. If missing, we fall back to the light SVG + chip. // ?v bumped when the logo artwork is replaced on disk (URLs are otherwise cached). const HP_LOGO = { noEu: "assets/brand/HydroPulse_logo_no_eu_text.svg?v=2", withEu: "assets/brand/HydroPulse_logo_eu_text.svg?v=2", // Same as light lockups, with light/white art on transparent — *required* for full menu to drop the white chip // no-eu dark export may be missing; EU dark has white art on transparent (safe on dark UI) noEuInverse: "assets/brand/HydroPulse_logo_dark_mode_eu_text.svg?v=2", withEuInverse: "assets/brand/HydroPulse_logo_dark_mode_eu_text.svg?v=2", }; function LogoFallback({ theme = "default" }) { const isInverse = theme === "inverse"; const color = isInverse ? "var(--paper)" : "var(--ink)"; return ( HydroPulse ); } /** * @param {object} props * @param {boolean} [props.brandOnDarkChrome] — Look 4 (and similar): on inverse/dark header or overlay, use the white brand lockup even when the design panel is set to “Preview” (inline). The strip is built for the actual dark-mode SVG. * @param {boolean} [props.noInkChip] — On dark bar / inverse: if the inverse SVG fails, use inline wordmark (light on dark) instead of the light lockup on a paper chip. */ window.Logo = function Logo({ theme = "default", variant = "noEu", noInkChip = false, brandOnDarkChrome = false }) { const panelVariant = window.useLogoVariant(); const [forceInline, setForceInline] = useState(false); const isInverse = theme === "inverse"; const [revertToLightOnDark, setRevertToLightOnDark] = useState(false); const alt = variant === "withEu" ? "HydroPulse, co-funded by the European Union" : "HydroPulse"; const useBrandImages = (panelVariant === "brand" || (brandOnDarkChrome && isInverse)) && !forceInline; useEffect(() => { setForceInline(false); }, [panelVariant, isInverse, variant, noInkChip, brandOnDarkChrome]); useEffect(() => { setRevertToLightOnDark(false); }, [isInverse, variant, noInkChip]); if (!useBrandImages) return ; let src; let onInkChip = false; if (isInverse && !revertToLightOnDark) { src = variant === "withEu" ? HP_LOGO.withEuInverse : HP_LOGO.noEuInverse; } else if (isInverse && revertToLightOnDark) { src = variant === "withEu" ? HP_LOGO.withEu : HP_LOGO.noEu; onInkChip = true; } else { src = variant === "withEu" ? HP_LOGO.withEu : HP_LOGO.noEu; } return ( {alt}

{ if (isInverse && !revertToLightOnDark) { if (noInkChip) { setForceInline(true); } else { setRevertToLightOnDark(true); } return; } setForceInline(true); }} /> ); }; // ------ data-look (L1–L4): syncs React with vanilla `applyTweaks` + design panel —------ function useDataLook() { const read = () => document.documentElement.getAttribute("data-look") || "1"; const [look, setLook] = useState(read); useEffect(() => { const onTweaks = (e) => { const v = e && e.detail && e.detail.laf != null ? String(e.detail.laf) : read(); setLook(v); }; window.addEventListener("hp-tweaks", onTweaks); return () => window.removeEventListener("hp-tweaks", onTweaks); }, []); return look; } // ------ Nav ------ // First 6 show in the top bar; the rest live under "More". Dissemination kit is // surfaced in the top bar (client ask, May 2026); Brand is folded into that kit // (its featured block + /brand deep-dive), so it is intentionally not a nav item. const NAV_ITEMS = [ { path: "/about", label: "About" }, { path: "/work-packages", label: "Work packages" }, { path: "/sites", label: "Demonstration sites" }, { path: "/consortium", label: "Consortium" }, { path: "/news", label: "News" }, { path: "/dissemination-kit", label: "Dissemination kit" }, { path: "/resources", label: "Resources" }, { path: "/advisory-board", label: "Advisory board" }, { path: "/engage", label: "Get involved" }, ]; window.Nav = function Nav({ route }) { const dataLook = useDataLook(); const logoKey = window.useLogoVariant(); const isL4 = dataLook === "4"; const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { setMenuOpen(false); }, [route]); const headerClass = "hp-site-header" + (isL4 ? " hp-header--l4" : !isL4 && scrolled ? " hp-site-header--scrolled" : ""); const linkInk = isL4 ? "var(--l4-header-fg)" : "var(--ink)"; const linkMute = isL4 ? "var(--l4-header-muted)" : "var(--muted)"; return ( <>

{menuOpen && setMenuOpen(false)} route={route} dataLook={dataLook} />} ); }; function FullMenu({ onClose, route, dataLook = "1" }) { const logoKey = window.useLogoVariant(); const l4 = dataLook === "4"; useEffect(() => { const onKey = (e) => e.key === "Escape" && onClose(); document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [onClose]); const line = l4 ? "var(--l4-overlay-line)" : "color-mix(in srgb, var(--paper) 16%, transparent)"; const sub = l4 ? "var(--l4-header-muted)" : "color-mix(in srgb, var(--paper) 55%, transparent)"; if (l4) { return ( ); } return ( ); } // ------ Footer ------ const FOOTER_COLS = [ { h: "Project", links: [["About", "/about"], ["Work packages", "/work-packages"], ["Demonstration sites", "/sites"], ["Consortium", "/consortium"], ["Advisory board", "/advisory-board"]] }, { h: "Public outputs", links: [["News", "/news"], ["Resources", "/resources"], ["Dissemination kit", "/dissemination-kit"], ["Get involved", "/engage"]] }, { h: "Contact", links: [["info@hydropulse.eu", "/contact"], ["Press & media", "/contact"], ["Partner login", "/contact"], ["Newsletter", "/contact"]] }, ]; function Footer() { const dataLook = useDataLook(); const logoKey = window.useLogoVariant(); const l4 = dataLook === "4"; const onInk = "color-mix(in srgb, var(--paper) 88%, transparent)"; const onInk2 = "color-mix(in srgb, var(--paper) 56%, transparent)"; const onInk3 = "color-mix(in srgb, var(--paper) 50%, transparent)"; const line = "color-mix(in srgb, var(--paper) 16%, transparent)"; if (l4) { return ( ); } return ( ); } window.Footer = Footer; // ------ Image with placeholder ------ window.PImage = function PImage({ src, alt = "Placeholder image", caption, ratio = "16 / 9", label = "PLACEHOLDER IMAGE", duotone = true, style = {}, children }) { const [loaded, setLoaded] = useState(false); return (

); }; // ------ Brand motifs & patterns ------ // Ported verbatim from the brand pack (hydropulse-brand-new/lib/hp-brand.jsx) so the // native /brand page renders the same five reusable motifs + background patterns the // designer system defines. Colours are passed as explicit hexes (the site does not // define the brand pack's --hp-* custom properties), and the hero motif is fixed to the // rotor direction — no motif switcher is needed here. // Real vector paths lifted from the logo artwork (HydroPulse-02-01.svg, 1200×1200 space). const HP_DOLPHIN_D = "M457.77,586.52s-21.62,22.34-10.09,51.17c0,0-13.69,10.81-5.77,32.43,0,0,5.77-5.04,15.13-7.21,0,0,24.5,60.54,85.76,57.65,0,0,12.25,17.3,36.75,12.97,0,0-4.32-10.81-15.85-17.3,0,0,10.09-4.32,18.74-28.11,0,0-30.27,4.32-39.64,22.34,0,0-45.4-5.77-54.77-60.54,0,0,12.25,1.44,17.3,12.25,0,0,5.04-26.66-20.9-30.27,0,0,0-28.83-19.46-44.68v13.69s-7.21-7.93-7.21-14.41Z"; const HP_LEAF_D = "M679.01,590.13s39.64,62.7-9.37,100.89l-8.65,9.37,18.74-3.6s19.46-27.39,44.68-7.21c0,0-18.74,33.87-46.12,10.81l-33.15,15.85h9.37s23.78-12.25,33.15,12.25c0,0-21.62,15.13-34.59-7.93l-12.25-1.44s-32.21,19.99-64.75,8.91l-1.55-2.43s31.71,4.32,46.12-11.53c0,0-7.21-20.9,18.74-32.43,0,0,5.77,20.18-15.85,36.75,0,0,24.5-5.04,42.52-30.99,0,0-11.53-28.11-2.16-51.89l8.65-21.62s7.21-18.74,6.49-23.78Z"; // Swept three-blade hydro-turbine impeller — odd blade count reads as rotation, not a flower. const HP_ROTOR_BLADE = "M -3.5 -15 C 3 -27, 14 -36, 26 -37 C 24 -27, 17 -19, 6.5 -15 C 3 -13.5, -0.5 -13.5, -3.5 -15 Z"; window.HPRotor = function HPRotor({ size = 120, color = "#000547", accent = "#F1F6FB", stroke = 0, style = {} }) { return ( ); }; // Three community figures arching above the wheel — partner / participation badge. window.HPCommunityTrio = function HPCommunityTrio({ size = 120, color = "#25B8F0", style = {} }) { return ( ); }; // Fish + leaf wreath — the ecology band, real dolphin + leaf paths from the mark. window.HPFishLeaf = function HPFishLeaf({ size = 180, fishColor = "#25B8F0", leafColor = "#3DA17A", style = {} }) { return ( ); }; // Pulse waveform — a confident horizontal line that doubles as a section accent. window.HPPulseLine = function HPPulseLine({ width = 200, height = 36, color = "#0078B6", stroke = 3, style = {} }) { return ( ); }; // EU 12-star constellation — the canonical 12 dots on a circle (also: partners orbiting the mission). window.HPConstellation = function HPConstellation({ size = 120, color = "#000547", dotR = 28, count = 12, style = {} }) { const dots = Array.from({ length: count }, (_, i) => { const a = (i / count) * Math.PI * 2 - Math.PI / 2; return [Math.cos(a) * 40, Math.sin(a) * 40]; }); return ( ); }; // Background-pattern data: URIs (survive copy/paste). Hero motif = rotor. window.HP_turbinePattern = function HP_turbinePattern(color = "#000547", opacity = 0.06, size = 160) { const body = `` + [0, 120, 240].map((r) => ``).join("") + ``; const svg = ``; return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`; }; window.HP_dotPattern = function HP_dotPattern(color = "#000547", opacity = 0.22, spacing = 18, dotR = 1.2) { const svg = ``; return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`; }; // Export to window for cross-file access Object.assign(window, { NAV_ITEMS });