// Reusable components for Eastwest Vanguard const { useState, useEffect, useRef, useCallback, useMemo } = React; // ───────── Language context (simple) ───────── const LangCtx = React.createContext({ lang: "en", t: window.I18N.en, setLang: () => {} }); function LangProvider({ children }) { const [lang, setLangState] = useState(() => localStorage.getItem("ewv-lang") || "en"); useEffect(() => { document.body.setAttribute("data-lang", lang); localStorage.setItem("ewv-lang", lang); }, [lang]); const setLang = useCallback((l) => setLangState(l), []); const t = window.I18N[lang]; return {children}; } const useLang = () => React.useContext(LangCtx); // ───────── Route context (hash routing) ───────── const RouteCtx = React.createContext({ route: "home", setRoute: () => {} }); function RouteProvider({ children }) { const initial = () => (window.location.hash || "#home").replace("#", "") || "home"; const [route, setRouteState] = useState(initial); useEffect(() => { const onHash = () => setRouteState(initial()); window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); const setRoute = useCallback((r) => { window.location.hash = "#" + r; window.scrollTo({ top: 0, behavior: "instant" }); }, []); return {children}; } const useRoute = () => React.useContext(RouteCtx); // ───────── Header ───────── function Header({ mode = "dark" }) { const { lang, setLang, t } = useLang(); const { route, setRoute } = useRoute(); const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const [scrollProgress, setScrollProgress] = useState(0); useEffect(() => { const onScroll = () => { setScrolled(window.scrollY > 12); const doc = document.documentElement; const max = Math.max(1, doc.scrollHeight - window.innerHeight); setScrollProgress(Math.min(1, Math.max(0, window.scrollY / max))); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // lock body scroll while drawer is open useEffect(() => { document.body.setAttribute("data-menu-open", menuOpen ? "true" : "false"); return () => document.body.removeAttribute("data-menu-open"); }, [menuOpen]); // close drawer when route changes useEffect(() => { setMenuOpen(false); }, [route]); const items = [ { k: "about", l: t.nav.about }, { k: "services", l: t.nav.services }, { k: "asian", l: t.nav.asian }, { k: "western", l: t.nav.western }, { k: "cases", l: t.nav.cases }, { k: "community", l: t.nav.community }, { k: "contact", l: t.nav.contact }, ]; const dark = mode === "dark"; const isHome = route === "home"; const fg = dark ? "var(--ivory)" : "var(--navy)"; const fgMute = dark ? "rgba(245,239,227,0.72)" : "rgba(10,24,48,0.62)"; const borderColor = dark ? "rgba(245,239,227,0.14)" : "rgba(10,24,48,0.10)"; const bgScrolled = dark ? "rgba(17,22,26,0.88)" : "rgba(248,246,241,0.92)"; const bgInitial = (isHome && dark) ? "rgba(17,22,26,0.22)" : "transparent"; const headerColor = menuOpen ? "var(--ivory)" : fg; const headerStyle = { position: "fixed", top: 0, left: 0, right: 0, zIndex: 60, color: headerColor, background: menuOpen ? "transparent" : (scrolled ? bgScrolled : bgInitial), backdropFilter: (menuOpen || (!scrolled && !isHome)) ? "none" : "blur(14px) saturate(140%)", WebkitBackdropFilter: (menuOpen || (!scrolled && !isHome)) ? "none" : "blur(14px) saturate(140%)", borderBottom: (scrolled && !menuOpen) ? `1px solid ${borderColor}` : "1px solid transparent", transition: "background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease, color 240ms ease", }; return (
{/* Brand */} { e.preventDefault(); setRoute("home"); }} style={{ display: "flex", alignItems: "center", gap: 12, justifySelf: "start" }}>
{t.brand}
{t.tagline}
{/* Desktop nav */} {/* Lang + CTA + Hamburger */}
{[["en","EN"],["zh","中"]].map(([k, label]) => ( ))}
{/* Hamburger toggle — CSS-shown on tablet/mobile only */}
0.02) && !menuOpen ? 1 : 0, }} />
{/* Mobile drawer */}
{lang === "zh" ? "EW · VG — 年度案卷" : "EW · VG — VOL. 01"} / {new Date().getFullYear()} 東 · EAST — WEST · 西
); } // ───────── Logo mark ───────── function Mark({ color = "var(--navy)", size = 28 }) { return ( ); } // ───────── Footer ───────── function Footer({ bare = false }) { const { t, lang } = useLang(); const { setRoute } = useRoute(); const legal = t.footer.legal || ["Privacy", "Terms"]; return ( ); } // ───────── Section atoms ───────── function SectionEyebrow({ children, color = "var(--gold)" }) { return (
{children}
); } function Divider({ color = "var(--line)" }) { return
; } // ───────── Animated reveal ───────── function Reveal({ children, delay = 0, as = "div", style = {} }) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => entries.forEach(e => e.isIntersecting && setVisible(true)), { threshold: 0.12 } ); io.observe(el); return () => io.disconnect(); }, []); const Comp = as; return ( {children} ); } // ───────── Refined motion primitives (shared; used by home-below-hero + inner pages) ───────── // One-shot "has entered viewport" flag — drives hairline draws, clip reveals, etc. function useInView(threshold = 0.2) { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => entries.forEach(e => { if (e.isIntersecting) setSeen(true); }), { threshold } ); io.observe(el); return () => io.disconnect(); }, [threshold]); return [ref, seen]; } // Subtle scroll parallax. Attach the returned ref to an OVERSIZED absolute layer // (e.g. inset:-10%) so the translate never reveals an edge. strength≈px/viewport. function useParallax(strength = 28) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; let raf = 0; const update = () => { raf = 0; const r = el.getBoundingClientRect(); const vh = window.innerHeight || 800; const center = r.top + r.height / 2; const prog = (center - vh / 2) / (vh / 2 + r.height / 2); // -1..1 el.style.transform = `translate3d(0, ${(-prog * strength).toFixed(2)}px, 0)`; }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); }; update(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); }; }, [strength]); return ref; } // A gold hairline that draws in (scaleX 0→1) the first time it enters view. function DrawLine({ width = 40, height = 1, color = "var(--gold)", delay = 0, style = {} }) { const [ref, seen] = useInView(0.6); return ( ); } // ───────── Image placeholder (since we have no real assets) ───────── // A composed SVG "city / east-meets-west" hero image, very abstract. function HeroImage({ style = {} }) { return (
); } function SkylineSVG() { return ( {/* Distant skyline */} {Array.from({ length: 24 }).map((_, i) => { const x = i * 70; const h = 80 + ((i * 53) % 180); return ; })} {/* Mid skyline */} {Array.from({ length: 18 }).map((_, i) => { const x = i * 92 + 18; const h = 140 + ((i * 71) % 240); return ; })} {/* Front skyline */} {Array.from({ length: 14 }).map((_, i) => { const x = i * 120; const h = 180 + ((i * 89) % 320); return ; })} {/* Window lights - warm on right, cool on left */} {Array.from({ length: 60 }).map((_, i) => { const x = (i * 137) % 1600; const y = 500 + ((i * 53) % 300); const warm = x > 800; return ; })} {/* Sun/moon */} {/* East mountain silhouette (subtle pagoda-style peaks) */} {/* Top fade */} ); } // ───────── Decorative arc separator ───────── function ArcDivider({ flip = false, color = "var(--ivory)" }) { return ( ); } // ───────── Number ticker (counts up the first time it enters view) ───────── function NumberDisplay({ value }) { // value can be "17", "2,000+", "100+", "1" const ref = useRef(null); const [disp, setDisp] = useState(String(value)); useEffect(() => { const el = ref.current; if (!el) return; const m = String(value).match(/^(\D*)([\d,]+)(.*)$/); if (!m) { setDisp(String(value)); return; } const prefix = m[1], target = parseInt(m[2].replace(/,/g, ""), 10), suffix = m[3]; const fmt = (n) => prefix + n.toLocaleString("en-US") + suffix; setDisp(fmt(0)); let raf = 0, t0 = null, done = false; const ease = (t) => 1 - Math.pow(1 - t, 3); const dur = 1500; const tick = (now) => { if (t0 === null) t0 = now; const t = Math.min(1, (now - t0) / dur); setDisp(fmt(Math.round(ease(t) * target))); if (t < 1) raf = requestAnimationFrame(tick); else setDisp(fmt(target)); }; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting && !done) { done = true; raf = requestAnimationFrame(tick); } }); }, { threshold: 0.4 }); io.observe(el); return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); }; }, [value]); return (
{disp}
); } Object.assign(window, { LangCtx, LangProvider, useLang, RouteCtx, RouteProvider, useRoute, Header, Footer, Mark, SectionEyebrow, Divider, Reveal, useInView, useParallax, DrawLine, HeroImage, ArcDivider, NumberDisplay, });