/* global React, HZ */ // MCA — small shared primitives const { useState, useEffect, useRef, useMemo } = React; // ─────────── Program data (Hit Zero `program_public_directory`) ─────────── // Hardcoded fallback covers the case where the directory record is empty or // the network request fails — page never goes blank. const PROGRAM_FALLBACK = { id: '11111111-1111-1111-1111-111111111111', slug: 'mca', public_name: 'Magic City Athletics', brand_name: 'Magic City Athletics', description: null, website_url: null, logo_url: null, public_email: 'coaches@magiccityathletics.net', public_phone: null, address_line1: '111 45th Ave NE', address_line2: null, city: 'Minot', state: 'ND', postal_code: '58703', country: 'US', is_accepting_leads: true, payment_provider: 'square', public_checkout_enabled: false, checkout_mode: 'manual_invoice', public_payment_note: null, }; // Module-level cache — one fetch per page-load, shared by every component. let _programPromise = null; function loadProgram() { if (_programPromise) return _programPromise; if (typeof window === 'undefined' || !window.HZ) { _programPromise = Promise.resolve(PROGRAM_FALLBACK); return _programPromise; } _programPromise = window.HZ.getProgram() .then(row => mergeWithFallback(row)) .catch(() => PROGRAM_FALLBACK); return _programPromise; } function mergeWithFallback(row) { if (!row) return PROGRAM_FALLBACK; // For each field, prefer the live row but fall back if empty/null. const merged = { ...PROGRAM_FALLBACK }; for (const k of Object.keys(row)) { if (row[k] != null && row[k] !== '') merged[k] = row[k]; } return merged; } function useProgram() { const [program, setProgram] = useState(PROGRAM_FALLBACK); useEffect(() => { let cancelled = false; loadProgram().then(p => { if (!cancelled) setProgram(p); }); return () => { cancelled = true; }; }, []); return program; } // ─────────── Logo + wordmark ─────────── function Logo({ size = 28 }) { return Magic City Athletics; } function Wordmark({ size = 18 }) { return ( Magic City Athletics ); } // ─────────── Status bar ─────────── function StatusBar() { return (
9:41
); } // ─────────── Top nav (in-app) ─────────── function TopNav({ onMenu, page, onHome }) { return (
); } // ─────────── Theme toggle ─────────── function useTheme() { const [theme, setThemeState] = useState(() => (typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') : 'dark') || 'dark'); const setTheme = (next) => { setThemeState(next); if (typeof document !== 'undefined') document.documentElement.setAttribute('data-theme', next); try { localStorage.setItem('mca-theme', next); } catch (_) {} }; // Sync if system preference changes AND user hasn't explicitly chosen useEffect(() => { if (typeof window === 'undefined') return; const mq = window.matchMedia('(prefers-color-scheme: light)'); const handler = (e) => { try { if (localStorage.getItem('mca-theme')) return; const next = e.matches ? 'light' : 'dark'; setThemeState(next); document.documentElement.setAttribute('data-theme', next); } catch (_) {} }; mq.addEventListener ? mq.addEventListener('change', handler) : mq.addListener(handler); return () => mq.removeEventListener ? mq.removeEventListener('change', handler) : mq.removeListener(handler); }, []); return { theme, setTheme, toggle: () => setTheme(theme === 'dark' ? 'light' : 'dark') }; } function ThemeToggle({ className = '' }) { const { theme, toggle } = useTheme(); const isDark = theme === 'dark'; const label = isDark ? 'Switch to light mode' : 'Switch to dark mode'; return ( ); } // ─────────── Drawer (slide-down nav) ─────────── // Primary nav — kept to 6 for clean fit on desktop (Grok feedback) const NAV_ITEMS = [ { id: 'home', label: 'Home', num: '01' }, { id: 'programs', label: 'Programs', num: '02' }, { id: 'teams', label: 'Teams', num: '03' }, { id: 'coaches', label: 'Coaches', num: '04' }, { id: 'pricing', label: 'Pricing', num: '05' }, { id: 'contact', label: 'Contact', num: '06' }, ]; // Secondary — surfaced in footer + drawer, not main nav const SECONDARY_NAV = [ { id: 'facility', label: 'Facility' }, { id: 'faq', label: 'FAQ' }, ]; function Drawer({ onClose, onNav, page }) { // Trap escape, lock body scroll useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; }; }, [onClose]); return (
{NAV_ITEMS.map(it => ( ))}
{SECONDARY_NAV.map(it => ( ))}
Schedule + sign-ups
Book a free trial → Sign in to Hit Zero
Real-time schedules, registration, billing and team rosters all live in the Hit Zero app.
Theme
); } // ─────────── Photo (real image when src provided, placeholder otherwise) ─────────── function Photo({ ratio = '4/5', label = 'PHOTO', tone = 'mix', src, alt, focal = '50% 50%', overlay = false, children, style = {} }) { const tones = { mix: 'linear-gradient(135deg, rgba(39,207,215,0.55) 0%, rgba(249,127,172,0.7) 100%)', teal: 'linear-gradient(135deg, rgba(39,207,215,0.7) 0%, rgba(26,143,148,0.8) 100%)', pink: 'linear-gradient(135deg, rgba(249,127,172,0.85) 0%, rgba(184,86,122,0.85) 100%)', dark: 'linear-gradient(135deg, rgba(38,22,34,1) 0%, rgba(184,86,122,0.5) 100%)', }; if (src) { return (
{alt {overlay && (
)} {children}
); } return (
{!children && {label}} {children}
); } // ─────────── Page section header ─────────── function SectionHead({ eyebrow, title, kicker, accent = 'teal' }) { return (
{eyebrow}
{title}
{kicker &&
{kicker}
}
); } // ─────────── Animated reveal ─────────── function useInView(ref) { const [seen, setSeen] = useState(false); useEffect(() => { if (!ref.current || seen) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) setSeen(true); }); }, { threshold: 0.15 }); io.observe(ref.current); return () => io.disconnect(); }, [seen]); return seen; } function Reveal({ children, delay = 0 }) { const ref = useRef(null); const seen = useInView(ref); return (
{children}
); } // ─────────── Viewport hook ─────────── function useMediaQuery(query) { const get = () => typeof window !== 'undefined' && window.matchMedia(query).matches; const [matches, setMatches] = useState(get); useEffect(() => { const mq = window.matchMedia(query); const handler = (e) => setMatches(e.matches); mq.addEventListener ? mq.addEventListener('change', handler) : mq.addListener(handler); setMatches(mq.matches); return () => mq.removeEventListener ? mq.removeEventListener('change', handler) : mq.removeListener(handler); }, [query]); return matches; } // ─────────── Desktop header ─────────── function DesktopHeader({ page, go }) { const headerRef = useRef(null); // Add `.is-scrolled` once user has scrolled past hero — for glass effect that "settles in" useEffect(() => { const onScroll = () => { if (!headerRef.current) return; headerRef.current.classList.toggle('is-scrolled', window.scrollY > 8); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return (
); } // ─────────── Desktop footer ─────────── function DesktopFooter({ go }) { return ( ); } Object.assign(window, { Logo, Wordmark, StatusBar, TopNav, Drawer, NAV_ITEMS, SECONDARY_NAV, Photo, SectionHead, Reveal, useInView, useMediaQuery, DesktopHeader, DesktopFooter, ThemeToggle, useTheme, useProgram });