/* Shared primitives → window. Logo, Placeholder, RiverFlow, useReveal */
(function () {
const { useEffect, useRef, useState } = React;
// Scroll reveal — adds .in when element enters viewport
window.useReveal = function useReveal() {
useEffect(() => {
const els = document.querySelectorAll("[data-reveal]:not(.in)");
if (!("IntersectionObserver" in window)) {
els.forEach((e) => e.classList.add("in"));
return;
}
const io = new IntersectionObserver(
(ents) => ents.forEach((en) => {
if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
}),
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
);
els.forEach((e) => io.observe(e));
return () => io.disconnect();
});
};
// EMA logo lockup
window.Logo = function Logo({ mark, mode = "dark", compact }) {
const ink = mode === "light" ? "#fff" : "var(--navy-800)";
const sub = mode === "light" ? "rgba(255,255,255,.66)" : "var(--slate-600)";
const logo = "assets/ema_logo_cutout.png";
return (
{!compact && (
EMA
European Mesopotamia Alliance
)}
);
};
// Striped image placeholder with mono label
window.Placeholder = function Placeholder({ label, ratio = "16/10", tone = "navy", radius = 4, style = {} }) {
const navy = tone === "navy";
const stripe = navy ? "rgba(31,56,100,.07)" : "rgba(184,144,47,.10)";
const base = navy ? "var(--paper-2)" : "rgba(184,144,47,.05)";
const txt = navy ? "var(--slate-400)" : "var(--gold-600)";
return (
{label}
);
};
// River motif — winding twin-strand path echoing the logo
window.RiverFlow = function RiverFlow({ w = 1200, h = 220, opacity = 1, style = {} }) {
const d = "M-20 60 C 200 60, 240 180, 460 180 S 720 40, 940 60 S 1180 170, 1320 150";
const d2 = "M-20 110 C 220 110, 260 30, 480 30 S 740 170, 960 150 S 1180 40, 1320 70";
return (
);
};
})();