{/* Orange accent line under nav */}

{tabs.map(t => { const active = route === t.key; return ( ); })}

{/* Mobile: tiny CTA pill on the right */}

); } /* ---------- Footer ---------- */ function Footer() { return ( ); } /* ---------- Container utility ---------- */ function containerStyle({ py = 0, justify = 'flex-start', align = 'center', wrap = false, gap = 0 } = {}) { return { maxWidth: 1200, margin: '0 auto', padding: `${py}px clamp(16px, 4vw, 28px)`, display: 'flex', alignItems: align, justifyContent: justify, gap, flexWrap: wrap ? 'wrap' : 'nowrap', }; } /* ---------- Eyebrow ---------- */ function Eyebrow({ children, color = 'var(--orange)' }) { return (

{children}

); } /* ---------- Page header band ---------- */ function PageBand({ eyebrow, title, sub, right }) { return (

{eyebrow}

{title}

{sub &&

{sub}

}

{right &&

{right}

}

); } /* ---------- Format helpers ---------- */ function formatKickoff(date) { const d = new Date(date); // Offset to UTC+5 (Maldives Time) const mvt = new Date(d.getTime() + 5 * 60 * 60 * 1000); const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; const h = mvt.getUTCHours(); const m = mvt.getUTCMinutes(); const hh = ((h + 11) % 12 + 1); const ampm = h >= 12 ? 'PM' : 'AM'; return days[mvt.getUTCDay()] + ' ' + mvt.getUTCDate() + ' ' + months[mvt.getUTCMonth()] + ' · ' + hh + ':' + String(m).padStart(2,'0') + ' ' + ampm + ' MVT'; } function relativeWindow(kickoffMs, now) { const diff = kickoffMs - now; const hrs = Math.round(diff / 3600000); if (diff <= 0) return 'kickoff passed'; if (hrs <= 24) return `kicks off in ${hrs}h`; return `kicks off in ${Math.round(hrs/24)}d`; } /* ---------- Live clock + countdown ---------- */ function useNow(interval = 1000) { const [now, setNow] = useState(Date.now()); useEffect(() => { const id = setInterval(() => setNow(Date.now()), interval); return () => clearInterval(id); }, [interval]); return now; } function diffParts(ms) { if (ms <= 0) return { d:0, h:0, m:0, s:0, total: 0, past: true }; const s = Math.floor(ms / 1000); return { d: Math.floor(s / 86400), h: Math.floor((s % 86400) / 3600), m: Math.floor((s % 3600) / 60), s: s % 60, total: s, past: false, }; } function pad(n) { return String(n).padStart(2, '0'); } /* Compact countdown chip (HH:MM:SS or Dd Hh) */ function Countdown({ to, tone = 'orange', size = 'md', prefix = '', live = true }) { const now = useNow(live ? 1000 : 60000); const p = diffParts(to - now); const inWindow = (to - now) <= HOURS(24) && (to - now) > 0; const palette = { orange: { bg: 'var(--orange)', fg: '#fff' }, ink: { bg: 'var(--ink)', fg: 'var(--orange)' }, light: { bg: 'var(--orange-50)', fg: 'var(--orange-dark)' }, }[tone] || {}; const dims = size === 'sm' ? { fs: 11, pad: '4px 8px', gap: 4 } : { fs: 13, pad: '6px 10px', gap: 6 }; let text; if (p.past) text = 'KICKED OFF'; else if (p.d > 0) text = `${p.d}d ${pad(p.h)}h`; else text = `${pad(p.h)}:${pad(p.m)}:${pad(p.s)}`; return ( {inWindow && ( )} {prefix && {prefix}} {text} ); } /* Animated counter — eases into target on mount */ function AnimatedCounter({ value, duration = 1100, format = (n) => Math.round(n).toLocaleString() }) { const [v, setV] = useState(0); const startRef = useRef(null); useEffect(() => { let raf; const step = (t) => { if (!startRef.current) startRef.current = t; const k = Math.min(1, (t - startRef.current) / duration); const eased = 1 - Math.pow(1 - k, 3); setV(value * eased); if (k < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [value, duration]); return <>{format(v)}; } /* Live match ticker — auto-scrolling marquee */ function MatchTicker({ matches }) { const open = matches.filter(m => m.status === 'OPEN' || m.status === 'SCHEDULED').slice(0, 8); if (open.length === 0) return null; const Item = ({ m }) => ( {m.teamA.name} vs {m.teamB.name} ); const doubled = [...open, ...open]; // for seamless loop return (

LIVE

{doubled.map((m, i) => )}

); } /* ---------- Mobile bottom nav ---------- */ function BottomNav({ route, onNav }) { const tabs = [ { key: 'home', label: 'Home', icon: 'bolt' }, { key: 'predict', label: 'Predict', icon: 'target' }, { key: 'dashboard', label: 'Stats', icon: 'trophy' }, ]; return (

{/* Top orange accent split */}

{tabs.map(t => { const active = route === t.key; return ( ); })}

); } Object.assign(window, { SunFrontLogo, Flag, VSHex, StatusBadge, Icon, TopStrip, Nav, Footer, Eyebrow, PageBand, containerStyle, formatKickoff, relativeWindow, useNow, diffParts, Countdown, AnimatedCounter, MatchTicker, BottomNav, });