/* E.S. Wagner — shared site chrome (Nav + Footer). Responsive (desktop nav collapses to a drawer under 900px). Nav supports theme="light" (solid white) and theme="transparent" (overlays a dark hero, flips to solid white on scroll). Exposes window.ESWNav and window.ESWFooter. */ function useIsMobile(bp) { const q = "(max-width: " + (bp || 900) + "px)"; const [m, setM] = React.useState(() => window.matchMedia(q).matches); React.useEffect(() => { const mq = window.matchMedia(q); const fn = (e) => setM(e.matches); mq.addEventListener("change", fn); return () => mq.removeEventListener("change", fn); }, [q]); return m; } window.useIsMobile = useIsMobile; /* Shared scroll-reveal: progressive reveal on scroll + guaranteed fallback. */ function useReveal() { React.useEffect(() => { document.documentElement.classList.add("has-js"); const els = Array.from(document.querySelectorAll(".reveal")); let io = null; if ("IntersectionObserver" in window) { io = new IntersectionObserver((ents) => { ents.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }); els.forEach((el) => io.observe(el)); } else { els.forEach((el) => el.classList.add("in")); } // Safety net: never leave content stuck hidden (captures, print, edge timing). const t = setTimeout(() => els.forEach((el) => el.classList.add("in")), 1400); return () => { if (io) io.disconnect(); clearTimeout(t); }; }, []); } window.useReveal = useReveal; const ESW_NAV = [ { id: "about", label: "About Us" }, { id: "work", label: "Our Work" }, { id: "culture", label: "Our Culture" }, { id: "careers", label: "Careers" }, { id: "news", label: "News & Insights" }, ]; function ESWNav({ theme }) { const { Button } = window.ESWagnerDesignSystem_ee40a0; const transparent = theme === "transparent"; const [scrolled, setScrolled] = React.useState(false); const [drawer, setDrawer] = React.useState(false); const mobile = useIsMobile(960); React.useEffect(() => { // The preview/embed context doesn't reliably deliver window "scroll" events // or IntersectionObserver callbacks, so poll the scroll offset each frame. let raf, last = null; const read = () => { const y = window.pageYOffset || document.scrollingElement?.scrollTop || document.documentElement.scrollTop || 0; const next = y > 12; if (next !== last) { last = next; setScrolled(next); } raf = requestAnimationFrame(read); }; raf = requestAnimationFrame(read); return () => cancelAnimationFrame(raf); }, []); React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }); const solid = !transparent || scrolled; const ink = solid ? "var(--text-strong)" : "#fff"; return (
{solid ? E.S. Wagner Co. : E.S. Wagner Co.} {!mobile && ( )} {!mobile && ( )} {mobile && ( )}
{mobile && drawer && (
setDrawer(false)} style={{ position: "absolute", inset: 0, background: "rgba(17,22,28,0.5)" }} />
ESW
{ESW_NAV.map((item) => ( { e.preventDefault(); setDrawer(false); }} style={{ fontFamily: "var(--font-heading)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", fontSize: 19, color: "#fff", padding: "14px 0", borderBottom: "1px solid rgba(255,255,255,0.12)", cursor: "pointer" }}> {item.label} ))}
)}
); } window.ESWNav = ESWNav; function ESWFooter() { const D = window.ESW_HOME; React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }); const col = { display: "flex", flexDirection: "column", gap: 10 }; const head = { fontFamily: "var(--font-heading)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.08em", fontSize: 13, color: "#fff", marginBottom: 6 }; const link = { fontFamily: "var(--font-body)", fontSize: 14, color: "rgba(255,255,255,0.7)", cursor: "pointer", textDecoration: "none" }; return ( ); } window.ESWFooter = ESWFooter;