/* global React, WIIN_COPY */
const { useState, useEffect, useRef } = React;
/* ---------------- Header / Logo / Footer ---------------- */
/**
* Renders the official WIIN Canada logo as an .
* - Looks for `wiin-logo.png` (and a few common variants) at the project root.
* - If the file is missing, falls back to a brand-aligned mark so the page never
* shows a broken-image icon. Drop the official PNG in the project root and
* it will render automatically.
*/
/**
* Renders the official WIIN Canada logo as an .
* - Loads `wiin-logo.svg` at the project root (drop your asset there to override
* the placeholder we ship).
* - If the file is missing, falls back to a brand-aligned mark so the page
* never shows a broken-image icon.
*/
function Logo({ onClick, compact }) {
const [missing, setMissing] = useState(false);
return (
{missing ? (
W
) : (
setMissing(true)}
style={compact ? { height: 112 } : null}
/>
)}
);
}
function LangToggle({ lang, setLang }) {
return (
);
}
function Header({ lang, setLang, route, go }) {
const c = WIIN_COPY[lang].nav;
const link = (key, label) => (
go(key)}>{label}
);
return (
go("home")} />
);
}
function Footer({ lang, go }) {
const c = WIIN_COPY[lang].home;
const nav = WIIN_COPY[lang].nav;
return (
);
}
window.Logo = Logo;
window.LangToggle = LangToggle;
window.WIINHeader = Header;
window.WIINFooter = Footer;
setMissing(true)}
style={compact ? { height: 112 } : null}
/>
)}