/* ==========================================================
   Fixtures & Results -- all 104 World Cup matches
   Grouped by date (MVT), filterable by status.
   Route: #/fixtures
   ========================================================== */

/* Group matches by MVT date string */
function groupByDate(matches) {
  const groups = {};
  const order = [];
  matches.forEach(function(m) {
    const d = new Date(m.kickoffMs + 5 * 3600 * 1000); // UTC+5 MVT
    const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    const key = days[d.getUTCDay()] + ', ' + months[d.getUTCMonth()] + ' ' + d.getUTCDate() + ' ' + d.getUTCFullYear();
    if (!groups[key]) { groups[key] = []; order.push(key); }
    groups[key].push(m);
  });
  return order.map(function(k) { return { date: k, matches: groups[k] }; });
}

/* "Group Stage · Group A" -> "Group A"; "Round of 32" stays as-is */
function shortStage(stage) {
  if (!stage) return '';
  var parts = stage.split('·');
  return parts[parts.length - 1].trim();
}

/* Single fixture card */
/* Normalize winner to 'A' | 'B' | 'DRAW' | null regardless of data source format */
function resolveWinner(m) {
  if (!m.settled) return null;
  var w = m.settled.winner;
  if (!w) return m.settled.draw ? 'DRAW' : null;
  if (w === 'A' || w === 'DRAW') return w;
  if (w === 'B') return 'B';
  /* team key or full name comparison */
  if (w === m.teamAKey || w === (m.teamA && m.teamA.name)) return 'A';
  if (w === m.teamBKey || w === (m.teamB && m.teamB.name)) return 'B';
  return null;
}

function FixtureCard({ m, onNav, isNext }) {
  var settled = m.settled;
  var winner = resolveWinner(m);
  var isOpen = m.status === 'OPEN' || m.status === 'SCHEDULED';
  var isSettled = m.status === 'SETTLED';
  var isNear = isOpen && !!isNext;

  /* Date/time in MVT for non-near cards */
  var mvt = new Date(m.kickoffMs + 5 * 3600 * 1000);
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var h24 = mvt.getUTCHours();
  var kickoffDate = months[mvt.getUTCMonth()] + ' ' + mvt.getUTCDate();
  var kickoffTime = (h24 % 12 || 12) + ':' + String(mvt.getUTCMinutes()).padStart(2,'0') + ' ' + (h24 >= 12 ? 'PM' : 'AM') + ' MVT';

  var colorA = isSettled ? (winner === 'A' ? 'var(--orange)' : winner === 'DRAW' ? 'var(--ink)' : 'var(--grey-400)') : 'var(--ink)';
  var colorB = isSettled ? (winner === 'B' ? 'var(--orange)' : winner === 'DRAW' ? 'var(--ink)' : 'var(--grey-400)') : 'var(--ink)';

  var isLive = m.status === 'CLOSED' && !!m.live;
  var cardLabel = m.teamA.name + ' vs ' + m.teamB.name
    + (isSettled ? ' ' + (m.settled.scoreA) + '-' + (m.settled.scoreB)
      : isLive ? ' LIVE ' + m.live.scoreA + '-' + m.live.scoreB : '')
    + (isOpen ? ' - click to predict' : '');
  return (
    <div
      className={'lift' + (isOpen ? ' lift-hover' : '')}
      onClick={function() { if (isOpen) onNav('predict'); }}
      role={isOpen ? 'button' : undefined}
      tabIndex={isOpen ? 0 : undefined}
      onKeyDown={isOpen ? function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onNav('predict'); } } : undefined}
      aria-label={cardLabel}
      style={{
        background: isOpen ? '#fff' : 'var(--grey-50)',
        border: isOpen ? '1px solid rgba(241,86,35,0.40)' : '1px solid var(--grey-200)',
        borderRadius: 10,
        padding: '8px 18px 12px',
        display: 'grid',
        gridTemplateColumns: '1fr auto 1fr',
        gap: 8,
        alignItems: 'center',
        cursor: isOpen ? 'pointer' : 'default',
        position: 'relative',
        overflow: 'hidden',
      }}>

      {/* Open accent strip on left edge */}
      {isOpen && (
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
          background: 'var(--orange)',
        }} />
      )}

      {/* Stage label -- full-width row, right-aligned, no overlap */}
      {m.stage && (
        <div style={{
          gridColumn: '1 / -1', textAlign: 'right',
          fontSize: 8, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--grey-400)', marginBottom: -2,
        }}>{shortStage(m.stage)}</div>
      )}

      {/* Team A */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
        {m.teamA.flag && <Flag code={m.teamA.flag} w={32} h={22} rounded={3} alt={m.teamA.name} />}
        <span style={{
          fontWeight: 700, fontSize: 13, letterSpacing: '0.05em', textTransform: 'uppercase',
          color: colorA, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{m.teamA.name}</span>
        {winner === 'A' && (
          <span style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.14em', color: 'var(--orange)',
            background: 'rgba(241,86,35,0.12)', padding: '2px 6px', borderRadius: 3, flexShrink: 0 }} aria-label="Winner">W</span>
        )}
      </div>

      {/* Centre: score / countdown / status */}
      <div style={{ textAlign: 'center', flexShrink: 0 }}>
        {isSettled ? (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
            <span className="font-display" style={{ fontSize: 26, lineHeight: 1, color: winner === 'A' ? 'var(--orange)' : 'var(--ink)' }}>{settled.scoreA}</span>
            <span style={{ color: 'var(--grey-300)', fontSize: 16, fontWeight: 700 }}>-</span>
            <span className="font-display" style={{ fontSize: 26, lineHeight: 1, color: winner === 'B' ? 'var(--orange)' : 'var(--ink)' }}>{settled.scoreB}</span>
          </div>
        ) : isOpen && isNear ? (
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 10, color: 'var(--grey-500)', fontWeight: 700, letterSpacing: '0.06em', marginBottom: 3 }}>{kickoffDate}</div>
            <div style={{ fontSize: 11, color: 'var(--ink)', fontWeight: 700, marginBottom: 5 }}>{kickoffTime}</div>
            <Countdown to={m.kickoffMs} tone="light" size="sm" />
            <div style={{ marginTop: 4, fontSize: 9, fontWeight: 800, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: 'var(--orange)' }}>PREDICT</div>
          </div>
        ) : isOpen ? (
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 10, color: 'var(--grey-500)', fontWeight: 700, letterSpacing: '0.06em' }}>{kickoffDate}</div>
            <div style={{ fontSize: 11, color: 'var(--ink)', fontWeight: 700, marginTop: 2 }}>{kickoffTime}</div>
            {m.venue && <div style={{ fontSize: 9, color: 'var(--grey-400)', marginTop: 3, letterSpacing: '0.04em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 90 }}>{m.venue}</div>}
            <div style={{ marginTop: 4, fontSize: 9, fontWeight: 800, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: 'var(--orange)' }}>PREDICT</div>
          </div>
        ) : isLive ? (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
              <span className="font-display" style={{ fontSize: 26, lineHeight: 1, color: 'var(--ink)' }}>{m.live.scoreA}</span>
              <span style={{ color: 'var(--grey-300)', fontSize: 16, fontWeight: 700 }}>-</span>
              <span className="font-display" style={{ fontSize: 26, lineHeight: 1, color: 'var(--ink)' }}>{m.live.scoreB}</span>
            </div>
            <span style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--orange)' }}>{m.live.minute || 'LIVE'}</span>
          </div>
        ) : m.status === 'CLOSED' ? (
          <span style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'var(--grey-400)', fontWeight: 700 }}>FT</span>
        ) : (
          <span style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--grey-300)', fontWeight: 600 }}>vs</span>
        )}
        {isSettled && winner === 'DRAW' && (
          <div style={{ fontSize: 9, letterSpacing: '0.12em', color: 'var(--grey-500)',
            textTransform: 'uppercase', marginTop: 2 }}>DRAW</div>
        )}
      </div>

      {/* Team B */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'flex-end', minWidth: 0 }}>
        {winner === 'B' && (
          <span style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.14em', color: 'var(--orange)',
            background: 'rgba(241,86,35,0.12)', padding: '2px 6px', borderRadius: 3, flexShrink: 0 }} aria-label="Winner">W</span>
        )}
        <span style={{
          fontWeight: 700, fontSize: 13, letterSpacing: '0.05em', textTransform: 'uppercase',
          color: colorB, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          textAlign: 'right',
        }}>{m.teamB.name}</span>
        {m.teamB.flag && <Flag code={m.teamB.flag} w={32} h={22} rounded={3} alt={m.teamB.name} />}
      </div>
    </div>
  );
}

/* Date section header */
function DateHeader({ date }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10, marginTop: 28,
    }}>
      <h3 style={{
        fontSize: 11, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--grey-600)', whiteSpace: 'nowrap', margin: 0,
      }}>{date}</h3>
      <div style={{ flex: 1, height: 1, background: 'var(--grey-200)' }} />
    </div>
  );
}

/* Filter pill tabs */
function FilterTabs({ value, onChange, counts }) {
  var tabs = [
    { key: 'all',     label: 'All',      count: counts.all,     dot: null },
    { key: 'OPEN',    label: 'Open',     count: counts.open,    dot: null },
    { key: 'CLOSED',  label: 'On Going', count: counts.ongoing, dot: 'var(--orange)' },
    { key: 'SETTLED', label: 'Results',  count: counts.settled, dot: null },
  ];
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      {tabs.map(function(t) {
        var active = value === t.key;
        return (
          <button key={t.key} onClick={function() { onChange(t.key); }}
            aria-pressed={active}
            aria-label={t.label + ' (' + t.count + ' matches)'}
            style={{
              background: active ? 'var(--ink)' : '#fff',
              color: active ? '#fff' : 'var(--grey-600)',
              border: active ? '2px solid var(--ink)' : '2px solid var(--grey-200)',
              borderRadius: 6, padding: '7px 16px',
              fontWeight: 700, fontSize: 13, letterSpacing: '0.05em', textTransform: 'uppercase',
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8,
              transition: 'all 0.14s',
            }}>
            {t.dot && <span className="pulse-dot" style={{ width: 6, height: 6, background: t.dot, borderRadius: '50%', flexShrink: 0 }} />}
            {t.label}
            <span style={{
              background: active ? 'var(--orange)' : 'var(--grey-100)',
              color: active ? '#fff' : 'var(--grey-500)',
              borderRadius: 10, padding: '1px 7px', fontSize: 11, fontWeight: 800,
            }}>{t.count}</span>
          </button>
        );
      })}
    </div>
  );
}

/* Live update badge */
function LiveBadge({ ts }) {
  var [age, setAge] = React.useState(0);
  React.useEffect(function() {
    var id = setInterval(function() { setAge(Math.floor((Date.now() - ts) / 1000)); }, 10000);
    return function() { clearInterval(id); };
  }, [ts]);
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6,
      fontSize: 11, color: 'var(--grey-500)', fontWeight: 600 }}>
      <span className="pulse-dot" style={{ width: 6, height: 6, background: 'var(--success)', borderRadius: '50%' }} />
      {age < 60 ? 'just updated' : Math.floor(age / 60) + 'm ago'}
    </div>
  );
}

/* Main fixtures page */
function FixturesPage({ onNav }) {
  var [filter, setFilter] = React.useState('all');
  var [team, setTeam] = React.useState('');
  var [lastUpdate, setLastUpdate] = React.useState(Date.now());
  var [refreshing, setRefreshing] = React.useState(false);
  var scrolledRef = React.useRef(false);
  var groupRefs = React.useRef({});
  var initialFetchCompleted = React.useRef(false);

  /* Ad sequence for inline slots -- shared rotation, never repeats back-to-back. Stable per mount. */
  var adSeq = React.useState(function() {
    var pick = window.pickSponsorAd || function() { return '/assets/images/dkaa-banner.png'; };
    var arr = [];
    for (var i = 0; i < 30; i++) arr.push(pick());
    return arr;
  })[0];

  /* Mobile (390x80) ad sequence -- same rotation rules, mobile-only banner pool */
  var mobileAdSeq = React.useState(function() {
    var pick = window.pickMobileSponsorAd || function() { return '/assets/images/dkaa-ac-banner-mobile.png'; };
    var arr = [];
    for (var i = 0; i < 30; i++) arr.push(pick());
    return arr;
  })[0];

  /* Auto-refresh live data every 90s */
  React.useEffect(function() {
    function refresh() {
      setRefreshing(true);
      fetch('/api/matches')
        .then(function(r) { return r.ok ? r.json() : null; })
        .then(function(data) {
          setRefreshing(false);
          if (data && Array.isArray(data.matches) && data.matches.length > 0) {
            var updated = data.matches.map(function(m) {
              return Object.assign({}, m, { kickoffAt: new Date(m.kickoffMs) });
            });
            window.MATCHES.splice(0, window.MATCHES.length);
            updated.forEach(function(m) { window.MATCHES.push(m); });
          }
          initialFetchCompleted.current = true;
          setLastUpdate(Date.now());
        })
        .catch(function() {
          setRefreshing(false);
          initialFetchCompleted.current = true;
          setLastUpdate(Date.now());
        });
    }
    refresh();
    var id = setInterval(refresh, 90000);
    return function() { clearInterval(id); };
  }, []);

  /* Next upcoming match id -- only this card shows countdown */
  var nextMatchId = React.useMemo(function() {
    var open = MATCHES.filter(function(m) { return m.status === 'OPEN' || m.status === 'SCHEDULED'; })
                      .sort(function(a,b) { return a.kickoffMs - b.kickoffMs; });
    return open.length > 0 ? open[0].id : null;
  }, [lastUpdate]);

  /* Sorted unique team list for the dropdown */
  var teamList = React.useMemo(function() {
    var set = {};
    MATCHES.forEach(function(m) {
      if (m.teamA && m.teamA.name) set[m.teamA.name] = true;
      if (m.teamB && m.teamB.name) set[m.teamB.name] = true;
    });
    return Object.keys(set).sort();
  }, [lastUpdate]);

  var filtered = React.useMemo(function() {
    var list;
    if (filter === 'all')          list = MATCHES.slice();
    else if (filter === 'OPEN')    list = MATCHES.filter(function(m) { return m.status === 'OPEN' || m.status === 'SCHEDULED'; });
    else if (filter === 'CLOSED')  list = MATCHES.filter(function(m) { return m.status === 'CLOSED'; });
    else                           list = MATCHES.filter(function(m) { return m.status === filter; });
    if (team) {
      list = list.filter(function(m) {
        return (m.teamA && m.teamA.name === team) || (m.teamB && m.teamB.name === team);
      });
    }
    list.sort(function(a, b) { return a.kickoffMs - b.kickoffMs; });
    return list;
  }, [filter, team, lastUpdate]);

  var counts = React.useMemo(function() {
    return {
      all:     MATCHES.length,
      open:    MATCHES.filter(function(m) { return m.status === 'OPEN' || m.status === 'SCHEDULED'; }).length,
      ongoing: MATCHES.filter(function(m) { return m.status === 'CLOSED'; }).length,
      settled: MATCHES.filter(function(m) { return m.status === 'SETTLED'; }).length,
    };
  }, [lastUpdate]);

  var groups = React.useMemo(function() {
    return groupByDate(filtered);
  }, [filtered]);

  // On first render, jump to the current/next matchday section
  React.useEffect(function() {
    // Only scroll after initial fetch is completed
    if (scrolledRef.current || !initialFetchCompleted.current || groups.length === 0) return;

    var targetIdx = groups.length - 1; // default: last group (all settled case)
    var found = false;
    if (nextMatchId != null) {
      for (var i = 0; i < groups.length; i++) {
        if (groups[i].matches.some(function(m) { return m.id == nextMatchId; })) {
          targetIdx = i;
          found = true;
          break;
        }
      }
    }

    // If still refreshing and nextMatchId isn't resolved in the current groups, wait for the load to finish
    if (refreshing && !found) {
      return;
    }

    var el = groupRefs.current[targetIdx];
    if (!el) return;

    scrolledRef.current = true;

    // Use a small timeout to let the DOM settle completely
    var timer = setTimeout(function() {
      var y = el.getBoundingClientRect().top + window.pageYOffset - 20;
      window.scrollTo({ top: Math.max(0, y), behavior: 'instant' });
    }, 150);

    return function() { clearTimeout(timer); };
  }, [groups, refreshing, nextMatchId]);

  return (
    <main style={{ paddingBottom: 80 }}>
      <InnerPageBanner />

      <div style={{
        background: '#fff', borderBottom: '1px solid var(--grey-200)',
      }}>
        <div style={{ maxWidth: 900, margin: '0 auto',
          padding: 'clamp(20px,4vw,36px) clamp(16px,4vw,28px) clamp(16px,3vw,24px)' }}>
          <Eyebrow>2026 FIFA World Cup</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
            flexWrap: 'wrap', gap: 16, marginTop: 8 }}>
            <h1 className="font-display" style={{
              fontSize: 'clamp(28px,5vw,52px)', lineHeight: 1.05, margin: 0,
              letterSpacing: '-0.02em',
            }}>
              Fixtures <span style={{ color: 'var(--orange)' }}>&amp;</span> Results
            </h1>
            {refreshing
              ? <span style={{ fontSize: 11, color: 'var(--grey-400)', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 10, height: 10, border: '2px solid var(--grey-300)', borderTopColor: 'var(--orange)', borderRadius: '50%', display: 'inline-block', animation: 'spin 0.7s linear infinite' }} />
                  Updating...
                </span>
              : <LiveBadge ts={lastUpdate} />
            }
          </div>
          <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <FilterTabs value={filter} onChange={setFilter} counts={counts} />
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>
              <select
                value={team}
                onChange={function(e) { setTeam(e.target.value); }}
                aria-label="Filter by team"
                style={{
                  appearance: 'none', WebkitAppearance: 'none',
                  background: team ? 'var(--ink)' : '#fff',
                  color: team ? '#fff' : 'var(--grey-700)',
                  border: team ? '2px solid var(--ink)' : '2px solid var(--grey-200)',
                  borderRadius: 6, padding: '8px 30px 8px 14px',
                  fontWeight: 700, fontSize: 13, letterSpacing: '0.04em',
                  cursor: 'pointer', maxWidth: 200,
                  backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>\")",
                  backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center',
                }}>
                <option value="">All teams</option>
                {teamList.map(function(t) {
                  return <option key={t} value={t}>{t}</option>;
                })}
              </select>
              {team && (
                <button onClick={function() { setTeam(''); }}
                  aria-label="Clear team filter"
                  style={{
                    background: 'none', border: 'none', cursor: 'pointer',
                    color: 'var(--grey-500)', fontSize: 18, lineHeight: 1, padding: '2px 4px',
                  }}>&times;</button>
              )}
            </div>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 900, margin: '0 auto', padding: '4px clamp(16px,4vw,28px) 40px' }}>
        {groups.length === 0 && (
          <div role="status" style={{ padding: '48px 0', textAlign: 'center', color: 'var(--grey-500)', fontSize: 14 }}>
            No matches in this view.
          </div>
        )}
        {groups.map(function(g, gi) {
          var showAd = (gi + 1) % 2 === 0 && gi < groups.length - 1; // after every 2 date groups
          var adSrc = adSeq[Math.floor(gi / 2) % adSeq.length];
          var mobileAdSrc = mobileAdSeq[Math.floor(gi / 2) % mobileAdSeq.length];
          return (
            <div key={g.date} ref={function(el) { groupRefs.current[gi] = el; }}>
              <DateHeader date={g.date} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {g.matches.map(function(m) {
                  return <FixtureCard key={m.id} m={m} onNav={onNav} isNext={m.id === nextMatchId} />;
                })}
              </div>
              {showAd && (function() {
                var isPredictBanner = adSrc === '/assets/images/product-banner.png';
                var adLink = isPredictBanner ? null : (window.getAdLink ? window.getAdLink(adSrc) : null);
                var mobileAdLink = window.getAdLink ? window.getAdLink(mobileAdSrc) : null;
                var adImgStyle = {
                  width: '100%', borderRadius: 10, marginTop: 16,
                  border: '1px solid var(--grey-200)', boxShadow: '0 2px 12px rgba(17,6,24,0.06)',
                  cursor: isPredictBanner ? 'pointer' : 'default',
                };
                var mobileAdImgStyle = {
                  width: '100%', borderRadius: 10, marginTop: 16,
                  border: '1px solid var(--grey-200)', boxShadow: '0 2px 12px rgba(17,6,24,0.06)',
                };
                return (
                  <React.Fragment>
                    <window.AdBanner src={adSrc} device="desktop" alt="" className="sponsor-desktop-banner"
                      style={adImgStyle} href={adLink}
                      onImgClick={isPredictBanner ? function() { onNav('predict'); } : undefined}
                    />
                    <window.AdBanner src={mobileAdSrc} device="mobile" alt="" className="sponsor-mobile-banner"
                      style={mobileAdImgStyle} href={mobileAdLink}
                    />
                  </React.Fragment>
                );
              })()}
            </div>
          );
        })}
      </div>

      {/* Mobile-only sub-hero banner -- 390x80, full width, auto height */}
      <img
        src="/assets/images/mobile-sub-banner.gif"
        alt="SunFront World Cup Foari 2026"
        className="mobile-sub-banner"
        style={{ width: '100%', height: 'auto' }}
      />

      {/* Prize banner -- drive prediction after browsing fixtures */}
      <CampaignBanner
        className="product-banner-section"
        src="/assets/images/product-banner.png"
        alt="Grand Prize MVR 50,000 + 39 Matchday Winners"
        onClick={function() { onNav('predict'); }}
        bg="var(--grey-50)"
      />
    </main>
  );
}

Object.assign(window, { FixturesPage });