/* Primitive building blocks used across pages */ const { useState, useEffect, useRef, useMemo, createContext, useContext } = React; /* ---------- Dark Mode ---------- */ function useDarkMode() { const [isDark, setIsDark] = useState(() => { try { return localStorage.getItem("m4y-theme") === "dark"; } catch { return false; } }); useEffect(() => { document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light"); try { localStorage.setItem("m4y-theme", isDark ? "dark" : "light"); } catch {} }, [isDark]); return [isDark, () => setIsDark(d => !d)]; } /* ---------- Router ---------- */ const RouterCtx = createContext({ route: "/", go: () => {} }); function RouterProvider({ children }) { const [route, setRoute] = useState(() => window.location.hash.replace(/^#/, "") || "/"); useEffect(() => { const onHash = () => setRoute(window.location.hash.replace(/^#/, "") || "/"); window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); const go = (to) => { window.location.hash = to; window.scrollTo({ top: 0, behavior: "instant" }); }; return {children}; } function useRoute() { return useContext(RouterCtx); } function Link({ to, children, className = "", ...rest }) { const { go, route } = useRoute(); const active = route === to || (to !== "/" && route.startsWith(to)); return ( { e.preventDefault(); go(to); }} {...rest}>{children} ); } /* ---------- Reveal on scroll ---------- */ function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setTimeout(() => setShown(true), delay); io.disconnect(); } }, { threshold: 0.12 }); io.observe(ref.current); return () => io.disconnect(); }, [delay]); return {children}; } /* ---------- Counter ---------- */ function Counter({ to = 100, suffix = "", duration = 1400 }) { const [v, setV] = useState(0); const ref = useRef(null); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setV(Math.round(to * eased)); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); io.disconnect(); } }, { threshold: 0.3 }); io.observe(ref.current); return () => io.disconnect(); }, [to, duration]); return {v.toLocaleString()}{suffix}; } /* ---------- Placeholder or real photo ---------- */ function PH({ label = "image", src, alt, aspect = "4 / 3", variant = "", style, className = "" }) { const seed = encodeURIComponent(String(label).toLowerCase().replace(/\s+/g, "-")); const fallback = `https://picsum.photos/seed/${seed}/1200/900`; const imageUrl = src || fallback; const isPlaceholder = !src; return (
{alt { if (e.target.src !== fallback) e.target.src = fallback; }} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /> {isPlaceholder && (
placeholder
)}
); } /* ---------- Icons (simple, geometric — all aria-hidden by default) ---------- */ const _ah = {"aria-hidden": true}; const I = { arrow: (p) => , chat: (p) => , mail: (p) => , check: (p) => , play: (p) => , spark: (p) => , plus: (p) => , minus: (p) => , ext: (p) => , pin: (p) => , cal: (p) => , brain: (p) => , heart: (p) => , eye: (p) => , flask: (p) => , scalpel: (p) => , tooth: (p) => , capsules: (p) => , circuit: (p) => , hands: (p) => , run: (p) => , mind: (p) => , inst: (p) => , link: (p) => , moon: (p) => , sun: (p) => , globe: (p) => , download: (p) => , book: (p) => , search: (p) => , heart2: (p) => , stethoscope:(p) => , }; /* Branch logo (PNG) or themed icon fallback. Use fill=true inside a tight layout so the mark scales edge-to-edge (cover in a circle). */ function BranchMark({ branch, size = 48, circle = true, fill = false, style = {}, className = "" }) { if (!branch) return null; const s = typeof size === "number" ? size : 48; const r = circle ? "50%" : 12; if (branch.logo) { if (fill) { const boxStyle = { width: "100%", maxWidth: s, aspectRatio: "1", margin: "0 auto", flexShrink: 0, ...style, }; return (
{`${branch.name}
); } return ( {`${branch.name} ); } const Ic = I[branch.icon]; return (
); } /* ---------- FAQ (accessible) ---------- */ function FAQ({ items }) { const [open, setOpen] = useState(0); return (
{items.map((it, i) => (
{it.a}
))}
); } /* ---------- Section title ---------- */ function SectionHead({ eyebrow, title, blurb, align = "left" }) { return (
{eyebrow}

{title}

{blurb &&

{blurb}

}
); } /* ---------- CTA band ---------- */ function CTABand({ title = "Ready to start something meaningful?", sub = "Join Medicine4Youth as a member, apply to a chapter, or pitch a new branch.", primary = ["Become a Member", "/join"], secondary = ["Apply", "/join"] }) { return (
Get involved

{title}

{sub}

{primary[0]} {secondary[0]}
); } /* ---------- MetaTags — imperative document.head management ---------- */ const _LD_JSON_ID = "m4y-ld-json"; const _ORG_LD = { "@context": "https://schema.org", "@type": "Organization", "name": "Medicine4Youth", "url": "https://medicine4youth.ca", "logo": "https://medicine4youth.ca/assets/medicine4youth-logo.png", "contactPoint": { "@type": "ContactPoint", "email": "Presidents@medicine4youth.ca" }, "sameAs": [ "https://www.instagram.com/medicine4youth/", "https://www.linkedin.com/company/medicine4youth/" ] }; function MetaTags({ title, description, ogImage, canonicalPath }) { useEffect(() => { const base = "https://medicine4youth.ca"; const url = base + (canonicalPath || "/"); /* Title */ document.title = title || "Medicine4Youth"; /* Helper: upsert a tag */ function setMeta(attr, attrVal, content) { let el = document.querySelector(`meta[${attr}="${attrVal}"]`); if (!el) { el = document.createElement("meta"); el.setAttribute(attr, attrVal); document.head.appendChild(el); } el.setAttribute("content", content); } /* Standard */ setMeta("name", "description", description || ""); /* Open Graph */ setMeta("property", "og:title", title || ""); setMeta("property", "og:description", description || ""); setMeta("property", "og:type", "website"); setMeta("property", "og:url", url); setMeta("property", "og:image", ogImage || ""); setMeta("property", "og:site_name", "Medicine4Youth"); /* Twitter */ setMeta("name", "twitter:card", "summary_large_image"); setMeta("name", "twitter:title", title || ""); setMeta("name", "twitter:description", description || ""); setMeta("name", "twitter:image", ogImage || ""); /* Canonical */ let canon = document.querySelector("link[rel='canonical']"); if (!canon) { canon = document.createElement("link"); canon.setAttribute("rel","canonical"); document.head.appendChild(canon); } canon.setAttribute("href", url); /* JSON-LD Organization (injected once) */ if (!document.getElementById(_LD_JSON_ID)) { const s = document.createElement("script"); s.id = _LD_JSON_ID; s.type = "application/ld+json"; s.textContent = JSON.stringify(_ORG_LD); document.head.appendChild(s); } }, [title, description, ogImage, canonicalPath]); return null; } Object.assign(window, { RouterProvider, useRoute, Link, Reveal, Counter, PH, I, BranchMark, FAQ, SectionHead, CTABand, useDarkMode, MetaTags });