// Shared components: Nav, Footer, Logo, Icon, Reveal, ThemeProvider, Router // All components attached to window for cross-script use. const { useState, useEffect, useRef, useContext, createContext, useMemo, useCallback } = React; // ============================================================ // Icon — minimal stroke icon set // ============================================================ function Icon({ name, size = 20, stroke = 1.6, ...props }) { const paths = { pin: <>, fuel: <>, star: , arrow: <>, arrowUp: <>, sun: <>, moon: , menu: <>, close: <>, play: , plus: <>, check: , car: <>, fire: , coffee: <>, burger: <>, chicken: <>, leaf: <>, phone: , user: <>, cart: <>, search: <>, bolt: , wash: <>, droplet: , chart: <>, truck: <>, sparkle: <>, palm: <>, award: <>, sandwich: <>, cup: <>, snowflake: <>, barbell: <>, flask: <>, }; return ( {paths[name]} ); } // ============================================================ // Logo // ============================================================ function MMLogo({ size = 28, variant = '' }) { // variant='on-red' adds a white outline so the logo (which contains red letters incl. the X in MAX) // remains legible against red backgrounds. Implemented via drop-shadow stack. const onRed = variant === 'on-red'; const filter = onRed ? 'drop-shadow(0 0 0.8px rgba(255,255,255,0.85))' : 'none'; return (
miniMAX
); } // ============================================================ // Reveal — IntersectionObserver-driven animation // ============================================================ function Reveal({ children, delay = 0, as: Tag = 'div', ...props }) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); return ( {children} ); } // ============================================================ // Parallax — scroll-driven Y translate // ============================================================ function useParallax(speed = 0.3) { const ref = useRef(null); const [offset, setOffset] = useState(0); useEffect(() => { const onScroll = () => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); const viewH = window.innerHeight; const center = r.top + r.height / 2 - viewH / 2; setOffset(-center * speed); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, [speed]); return [ref, offset]; } // ============================================================ // Theme Context // ============================================================ const ThemeCtx = createContext({ theme: 'light', setTheme: () => {} }); function ThemeProvider({ children }) { const [theme, setTheme] = useState(() => { if (typeof window === 'undefined') return 'light'; return localStorage.getItem('mm-theme') || 'light'; }); useEffect(() => { document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('mm-theme', theme); }, [theme]); return {children}; } function ThemeToggle() { const { theme, setTheme } = useContext(ThemeCtx); return ( ); } // ============================================================ // Router (hash-based, in-page nav) // ============================================================ const RouterCtx = createContext({ route: 'home', go: () => {} }); function RouterProvider({ children }) { const [route, setRoute] = useState(() => (window.location.hash || '#home').replace('#', '')); useEffect(() => { const onHash = () => { const r = (window.location.hash || '#home').replace('#', ''); setRoute(r); window.scrollTo({ top: 0, behavior: 'instant' }); }; window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); const go = useCallback((r) => { window.location.hash = r; }, []); return {children}; } function NavLink({ to, children }) { const { route, go } = useContext(RouterCtx); const active = route === to || (to === 'home' && route === ''); return ( { e.preventDefault(); go(to); }}> {children} ); } // ============================================================ // Nav // ============================================================ function Nav({ openTweaks }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const { go } = useContext(RouterCtx); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 30); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } // ============================================================ // Ticker // ============================================================ function Ticker({ items }) { const list = items || [ 'AUSTIN UNLEADED $2.78', '★ SERVING TEXAS SINCE 1995 ★', '🍔 FLAMIN BURGER — NOW SERVING', '🍗 KRISPY KRUNCHY CHICKEN', '🥪 WHICH WICH SUPERIOR SANDWICHES', '☕ BREW MAX COFFEE', '🔥 FIERY GRILL', '🚗 MAX EXPRESS CAR WASH — GO UNLIMITED', 'SHELL · VALERO · MINIMAX FUELS', '12 LOCATIONS · AUSTIN + HOUSTON', ]; const trackItems = ( {list.map((t, i) => {t}◆)} ); return (
{trackItems}{trackItems}{trackItems}
); } // ============================================================ // Footer // ============================================================ function Footer() { const { go } = useContext(RouterCtx); return ( ); } // ============================================================ // Section header // ============================================================ function SectionHeader({ eyebrow, title, kicker, align = 'left' }) { return (
{eyebrow && {eyebrow}}

{title}

{kicker &&

{kicker}

}
); } // ============================================================ // Stat block // ============================================================ function Stat({ value, label, suffix }) { return (
{value}{suffix}
{label}
); } // ============================================================ // Page wrapper // ============================================================ function Page({ children }) { return
{children}
; } // Export to window // ============================================================ // ImgPlaceholder — premium placeholder for missing imagery // Use sparingly: aspect ratio + tone + label (and optional glyph) // ============================================================ function ImgPlaceholder({ ratio = '4/3', tone = 'ink', label, caption, glyph, width, height, style = {}, className = '', children, ...props }) { const dims = (width || height) ? { width, height } : { aspectRatio: ratio, width: '100%' }; return (
{caption && {caption}} {glyph && {glyph}} {children} {label && ( {label} placeholder )}
); } // MINI/MAX wordmark — composable with size & variant function Wordmark({ size = 56, variant = '', as: As = 'span', style = {}, ...props }) { return ( miniMAX ); } // ============================================================ // MMMap — Leaflet map with multi-marker support, themed // Used by location finders. Stores get red pins; user gets blue. Active store gets larger pin. // ============================================================ function MMMap({ stores, active, setActive, userPos, mapTheme }) { const ref = useRef(null); const mapRef = useRef(null); const markersRef = useRef([]); const userMarkerRef = useRef(null); // Init map useEffect(() => { if (!window.L || !ref.current || mapRef.current) return; const L = window.L; const initialCenter = stores[0] ? [stores[0].lat, stores[0].lng] : [30.27, -97.74]; const map = L.map(ref.current, { center: initialCenter, zoom: 11, zoomControl: true, scrollWheelZoom: false, }); // Tile layer — dark or light per theme const dark = mapTheme === 'dark'; L.tileLayer( dark ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png' : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap © CARTO', maxZoom: 19, subdomains: 'abcd' } ).addTo(map); mapRef.current = map; return () => { map.remove(); mapRef.current = null; }; }, [mapTheme]); // Render store markers useEffect(() => { if (!mapRef.current || !window.L) return; const L = window.L; markersRef.current.forEach(m => m.remove()); markersRef.current = []; stores.forEach((s, i) => { const isActive = i === active; const isComing = s.comingSoon; const color = isComing ? '#8A8A86' : (isActive ? '#E2231A' : '#C41A12'); const size = isActive ? 36 : 28; const html = `
${s.num}
`; const icon = L.divIcon({ html, className: 'mm-store-pin', iconSize: [size, size], iconAnchor: [size/2, size/2] }); const marker = L.marker([s.lat, s.lng], { icon }).addTo(mapRef.current); marker.on('click', () => setActive(i)); marker.bindTooltip(s.short + (isComing ? ' (Coming Soon)' : ''), { direction: 'top', offset: [0, -size/2] }); markersRef.current.push(marker); }); }, [stores, active]); // Render user marker (blue) useEffect(() => { if (!mapRef.current || !window.L) return; const L = window.L; if (userMarkerRef.current) { userMarkerRef.current.remove(); userMarkerRef.current = null; } if (userPos) { const html = '
'; const icon = L.divIcon({ html, className: 'mm-user-pin', iconSize: [20, 20], iconAnchor: [10, 10] }); userMarkerRef.current = L.marker([userPos.lat, userPos.lng], { icon, zIndexOffset: 1000 }).addTo(mapRef.current); userMarkerRef.current.bindTooltip('You are here', { direction: 'top', offset: [0, -10] }); } }, [userPos]); // Pan/fit to active store + user useEffect(() => { if (!mapRef.current || !window.L) return; const L = window.L; const activeStore = stores[active]; if (userPos && activeStore) { const bounds = L.latLngBounds([[userPos.lat, userPos.lng], [activeStore.lat, activeStore.lng]]); mapRef.current.fitBounds(bounds, { padding: [50, 50], maxZoom: 13 }); } else if (activeStore) { mapRef.current.setView([activeStore.lat, activeStore.lng], 13, { animate: true }); } }, [active, userPos, stores]); return
; } Object.assign(window, { Icon, MMLogo, Reveal, useParallax, ThemeProvider, ThemeCtx, ThemeToggle, RouterProvider, RouterCtx, NavLink, Nav, Ticker, Footer, SectionHeader, Stat, Page, ImgPlaceholder, Wordmark, MMMap, });