/* ============================================================ Phils 5K — Shared Header + Footer Components Export to window for use across all pages ============================================================ */ const { useState, useEffect } = React; /* ── SMOOTH SCROLL ───────────────────────────────── */ function smoothScrollTo(targetY, duration = 680) { const startY = window.scrollY; const distance = targetY - startY; if (Math.abs(distance) < 2) return; const startTime = performance.now(); const easeInOutCubic = t => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; function step(now) { const progress = Math.min((now - startTime) / duration, 1); window.scrollTo(0, startY + distance * easeInOutCubic(progress)); if (progress < 1) requestAnimationFrame(step); } requestAnimationFrame(step); } window.smoothScrollTo = smoothScrollTo; /* ── NAV CONFIG ─────────────────────────────────── */ const NAV_LINKS = [ { label: "Home", href: "index.html#home", anchor: "#home", internal: true }, { label: "Runner Info", href: "index.html#runner-info", anchor: "#runner-info", internal: true }, { label: "Beneficiaries", href: "index.html#beneficiaries", anchor: "#beneficiaries", internal: true }, { label: "Sponsors", href: "index.html#sponsors", anchor: "#sponsors", internal: true }, { label: "Photos", href: "photos.html", anchor: null, internal: false }, // { label: "Results", href: "results.html", anchor: null, internal: false }, ]; /* ── HEADER ─────────────────────────────────────── */ function Header({ page = "home", scrolled: scrolledProp }) { const [scrolled, setScrolled] = useState(scrolledProp || false); const [menuOpen, setMenuOpen] = useState(false); const [activeSection, setActiveSection] = useState("home"); const isHome = page === "home"; useEffect(() => { if (!isHome) { setScrolled(true); return; } const onScroll = () => setScrolled(window.scrollY > 60); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, [isHome]); useEffect(() => { if (!isHome) return; const sections = ["home","runner-info","beneficiaries","sponsors"]; const onScroll = () => { let current = "home"; for (const id of sections) { const el = document.getElementById(id); if (el && window.scrollY >= el.offsetTop - 120) current = id; } setActiveSection(current); }; window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, [isHome]); const handleNavClick = (e, link) => { if (isHome && link.anchor) { e.preventDefault(); const el = document.querySelector(link.anchor); if (el) smoothScrollTo(el.offsetTop - 72); setMenuOpen(false); } }; const isActive = (link) => { if (!isHome) return window.location.pathname.endsWith(link.href); return link.anchor && "#" + activeSection === link.anchor; }; return (
{/* Logo */}
Phils 5K Ambler Area Running Club
{/* Desktop Nav */} {/* Mobile hamburger */}
{/* Mobile menu */} {menuOpen && (
{NAV_LINKS.map(link => ( handleNavClick(e, link)} style={{ display: 'block', fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 17, color: '#1B3D8F', padding: '12px 0', textDecoration: 'none', borderBottom: '1px solid rgba(245,194,0,0.15)' }}> {link.label} ))} gtag('event', 'registration_click', { 'location': 'header_mobile_nav' })} style={{ display: 'block', marginTop: 16, textAlign: 'center', background: '#F5C200', color: '#1B3D8F', fontFamily: "'Fredoka',cursive", fontWeight: 600, fontSize: 18, padding: '13px', borderRadius: 9999, textDecoration: 'none' }}> Register Now →
)}
); } /* ── FOOTER ─────────────────────────────────────── */ function Footer() { /* Social icon SVGs */ const StravaSVG = () => ( ); const FacebookSVG = () => ( ); const InstagramSVG = () => ( ); const iconBtn = { display: 'flex', alignItems: 'center', justifyContent: 'center', width: 42, height: 42, borderRadius: 9999, background: 'rgba(255,255,255,0.10)', border: '1px solid rgba(255,255,255,0.20)', color: 'rgba(255,255,255,0.80)', cursor: 'pointer', textDecoration: 'none', transition: 'all 0.2s' }; return ( ); } /* Export to window */ Object.assign(window, { Header, Footer, NAV_LINKS });