{/* Orange accent line under nav */}

{/* Campaign logo */} {/* Desktop nav with color-popping box */}

{/* Sliding orange pill -- positioned via CSS vars */}

{tabs.map(t => { const active = route === t.key; const hovered = hoverKey === 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 (Dd Hh Mm Ss always) */ 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 }; if (p.past) { return ( {prefix && {prefix}} KICKED OFF ); } /* Always show D H M S -- days hidden when 0 */ const parts = []; if (p.d > 0) parts.push({ v: String(p.d), u: 'd' }); parts.push({ v: pad(p.h), u: 'h' }); parts.push({ v: pad(p.m), u: 'm' }); parts.push({ v: pad(p.s), u: 's' }); return ( {inWindow && ( )} {prefix && {prefix}} {parts.map((pt, i) => ( {pt.v} {pt.u} ))} ); } /* 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 */ /* TickerItem is stable (defined outside MatchTicker) so CSS animation never resets */ var TickerItem = React.memo(function TickerItem({ m }) { /* Static time string computed once -- no live timer = no width jitter */ var timeStr = formatKickoff(m.kickoffMs); return ( {m.teamA.name} vs {m.teamB.name} {timeStr} ); }); var MatchTicker = React.memo(function MatchTicker({ matches }) { var open = React.useMemo(function() { return matches.filter(function(m) { return m.status === 'OPEN'; }); }, [matches]); if (open.length === 0) return null; /* * Build a doubled list long enough to fill any viewport without gaps. * Repeat the source until we have >= 16 items, then double that for the * seamless -50% loop. Always ends up an even multiple of open.length. */ var tripled = React.useMemo(function() { var src = open; while (src.length < 8) { src = src.concat(open); } return src.concat(src); /* double for seamless -50% loop */ }, [open]); /* * Speed target: ~260px/s feels natural for a news ticker. * Each item is roughly 260px wide (name + vs + name + time + gap). * Half the array scrolls past during one cycle (the -50% half). * duration = (half-array item count * item_width_px) / px_per_second */ var duration = React.useMemo(function() { var halfCount = tripled.length / 2; /* items in the visible "half" */ var itemPx = 260; /* estimated px per item incl gap */ var pxPerSec = 55; /* comfortable reading speed ~55px/s */ return Math.round((halfCount * itemPx) / pxPerSec); }, [tripled.length]); return (

LIVE

{tripled.map(function(m, i) { return ; })}

); }); /* Shared inner-page banner strip with campaign logo overlay */ function InnerPageBanner() { return (

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

{/* Top orange accent split */}

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

); } /* Export an array of plain row objects to an .xlsx file (admin tables). */ function exportRowsToXlsx(filename, sheetName, rows) { if (!window.XLSX) { console.error('XLSX library not loaded'); return false; } const ws = window.XLSX.utils.json_to_sheet(rows); const wb = window.XLSX.utils.book_new(); window.XLSX.utils.book_append_sheet(wb, ws, sheetName || 'Sheet1'); window.XLSX.writeFile(wb, filename); return true; } Object.assign(window, { SunFrontLogo, Flag, VSHex, StatusBadge, Icon, TopStrip, Nav, Footer, Eyebrow, PageBand, InnerPageBanner, containerStyle, formatKickoff, relativeWindow, useNow, diffParts, Countdown, AnimatedCounter, MatchTicker, BottomNav, exportRowsToXlsx, });