Still looks wrong? Tell Raja directly

Leaderboard not updating, a score looks off, your name’s missing and you did predict in time — describe it and it lands in his inbox.

setMsg(e.target.value)} />
        <div className="fb-row">
          <input type="email" className="fb-email" placeholder="Your email (optional — for a reply)" value={email} onChange={(e) => setEmail(e.target.value)} maxLength={120} />
          <button className="cta" type="submit" disabled={state === 'sending'}>{state === 'sending' ? 'Sending…' : 'Send to Raja →'}</button>
        </div>
        {err && <p className="fb-err">{err}</p>}
      </form>
    </div>
  );
}

/* ---------- app ---------- */
function encode(p) { return btoa(unescape(encodeURIComponent(JSON.stringify(p)))); }
function decode(s) { try { return JSON.parse(decodeURIComponent(escape(atob(s)))); } catch (e) { return null; } }
function prune(p) { const o = {}; for (const k in p) if (p[k] && Object.keys(p[k]).length) o[k] = p[k]; return o; }

function App() {
  const [active, setActive] = useState('A');
  const [picks, setPicks] = useState({});
  const [toast, setToast] = useState(null);
  const [scoresRev, setScoresRev] = useState(0); // bumps when live official results change
  const [scoresRaw, setScoresRaw] = useState([]); // raw /live score rows (today's matches + per-group fixtures)
  const toastTimer = useRef(null);
  const firstScores = useRef(true);

useEffect(() => {
    const params = new URLSearchParams(location.search);
    const s = params.get('s');
    let init = s && decode(s);
    if (!init) { try { init = JSON.parse(localStorage.getItem('wsq_picks_v1') || '{}'); } catch (e) {} }
    if (init && typeof init === 'object') setPicks(init);
  }, []);

useEffect(() => {
    try { localStorage.setItem('wsq_picks_v1', JSON.stringify(prune(picks))); } catch (e) {}
  }, [picks]);

const flash = (msg) => {
    setToast(msg);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 2200);
  };

// ---- one batched, self-pacing poll powering everything live ----
  // /live returns scores + community + nations + leaderboard in a single request (4x fewer
  // than separate polls). Cadence adapts: ~25s while a match is in play, ~3 min otherwise —
  // near-real-time when it matters, cheap the rest of the time. Embedded results stay as the
  // instant-render + offline fallback; we merge official results over them, never fabricate.
  const API = window.WSQ_API || '';
  useEffect(() => {
    if (!API) return;
    let alive = true, timer = null;
    const pull = async () => {
      let nextDelay = 180000;
      try {
        const r = await fetch(API + '/live');
        if (r.ok) {
          const d = await r.json();
          if (!alive) return;
          if (Array.isArray(d.scores)) {
            setScoresRaw(d.scores);
            const changed = mergeLiveScores(d.scores);
            if (changed) { setScoresRev((v) => v + 1); if (!firstScores.current) flash('Official results updated 🔒'); }
            firstScores.current = false;
          }
          if (d.community) setCommunity(d.community);
          if (d.stats && d.stats.teams) {
            setNations(Object.entries(d.stats.teams).sort((a, b) => b[1] - a[1]).slice(0, 10).map(([code, count]) => ({ code, count })));
          }
          if (Array.isArray(d.leaderboard)) setBoard(d.leaderboard);
          nextDelay = d.live > 0 ? 25000 : 180000; // fast only while a match is live
        }
      } catch (e) { /* offline — keep current state, retry on the slow cadence */ }
      if (alive) timer = setTimeout(pull, nextDelay);
    };
    pull();
    return () => { alive = false; if (timer) clearTimeout(timer); };
  }, []);

// count this page load once (not per poll)
  useEffect(() => {
    if (!API) return;
    fetch(API + '/hit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: location.pathname }) }).catch(() => {});
  }, []);

// One-time: prefer the worker's official ranking snapshot (source of truth) over the embedded
  // mirror, so a FIFA correction ships via a worker deploy without a JS cache-bust. Bumps
  // scoresRev so the TAG headlines (computed inline) recompute against the fresh ranking.
  useEffect(() => {
    if (!API) return;
    fetch(API + '/rankings').then((r) => (r.ok ? r.json() : null)).then((d) => {
      if (d && d.rankings && typeof d.rankings === 'object' && Object.keys(d.rankings).length) {
        ACTIVE_RANKS = d.rankings;
        setScoresRev((v) => v + 1);
      }
    }).catch(() => {});
  }, []);

// keep a ref so callbacks read the latest active group
  const activeRef = useRef(active);
  useEffect(() => { activeRef.current = active; }, [active]);
  // mirror picks so async callbacks (cross-device restore) can read the latest without clobbering edits
  const picksRef = useRef(picks);
  useEffect(() => { picksRef.current = picks; }, [picks]);
  const lastSubmitHash = useRef(''); // dedup auto-submit: only POST when the bracket actually changed

// ---- accounts (login / registration; shared identity with Adopt a Team) ----
  const SKEY = 'wc26_session';
  const [me, setMe] = useState(null);
  const [saved, setSaved] = useState([]);
  const [authMsg, setAuthMsg] = useState('');
  const [authEmail, setAuthEmail] = useState('');
  const [authName, setAuthName] = useState('');
  const [community, setCommunity] = useState(null);   // { players, adoptions }
  const [nations, setNations] = useState([]);          // [{ code, count }] top 10
  const [board, setBoard] = useState([]);              // [{ handle, score, exact, played }] top 10 predictors
  const [myEntry, setMyEntry] = useState(null);        // my leaderboard entry { handle, score, rank, total, ... } or null
  const [lbHandle, setLbHandle] = useState('');        // chosen public handle
  const apiFetch = (path, opts = {}) => {
    const s = localStorage.getItem(SKEY);
    const headers = Object.assign({ 'Content-Type': 'application/json' }, opts.headers || {});
    if (s) headers.Authorization = 'Bearer ' + s;
    return fetch(API + path, { ...opts, headers });
  };
  const loadSaved = async () => { try { const r = await apiFetch('/me/scenarios'); if (r.ok) setSaved(await r.json()); } catch (e) {} };
  const loadMyEntry = async () => {
    try {
      const r = await apiFetch('/me/leaderboard');
      if (!r.ok) return;
      const d = await r.json();
      setMyEntry(d.entered ? d : null);
      if (d.entered) {
        if (d.hash) lastSubmitHash.current = d.hash + '|' + (d.handle || ''); // don't auto-resubmit unchanged on load
        if (d.handle) setLbHandle(d.handle);
        // cross-device: if this device has no bracket in progress, restore the one
        // submitted from another device. Never clobber edits already on this device.
        if (d.hash && Object.keys(prune(picksRef.current)).length === 0) {
          const restored = decode(d.hash);
          if (restored) { setPicks(restored); flash('Loaded your submitted bracket from your account 🔄'); }
        }
      }
    } catch (e) {}
  };
  const loadMyBracket = () => {
    if (!myEntry || !myEntry.hash) return;
    const p = decode(myEntry.hash);
    if (p) { setPicks(p); flash('Your submitted bracket loaded ↻'); window.scrollTo({ top: 0, behavior: 'smooth' }); }
  };
  useEffect(() => {
    if (!API) return;
    (async () => {
      const params = new URLSearchParams(location.search);
      const tok = params.get('login');
      if (tok) {
        try {
          const r = await fetch(API + '/auth/verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: tok }) });
          if (r.ok) { const d = await r.json(); if (d && d.session) localStorage.setItem(SKEY, d.session); }
        } catch (e) {}
        params.delete('login');
        history.replaceState(null, '', location.pathname + (params.toString() ? '?' + params.toString() : '') + location.hash);
      }
      const s = localStorage.getItem(SKEY);
      if (!s) return;
      try {
        const r = await fetch(API + '/me', { headers: { Authorization: 'Bearer ' + s } });
        if (r.status === 401) { localStorage.removeItem(SKEY); return; }
        if (r.ok) { setMe(await r.json()); loadSaved(); loadMyEntry(); }
      } catch (e) {}
    })();
  }, []);

const group = WSQ.groups.find((g) => g.id === active);
  const gpicks = picks[active] || {};

const idx = WSQ.groups.findIndex((g) => g.id === active);
  const go = (d) => setActive(WSQ.groups[(idx + d + 12) % 12].id);

return (
    <React.Fragment>
      <header className="hero">
        <div className="wrap">
          <div className="eyebrow"><i className="ball" />Group stage · scenario machine · 48 nations</div>
          <h1>Who <em>still</em> <span className="hl">qualifies?</span></h1>
          <p className="lede">12 groups. Top two go through, plus the eight best third‑placed teams. Set the matchday‑three scores yourself and watch every table react — instantly.</p>
          <div className="stat-stickers">
            <div className="stat"><b>48</b><span>Nations</span></div>
            <div className="stat"><b>12</b><span>Groups</span></div>
            <div className="stat"><b>8</b><span>Best thirds</span></div>
          </div>
          <div className="how">
            <span className="how-step"><b>1</b> Pick a group</span>
            <span className="how-step"><b>2</b> Set the open scores</span>
            <span className="how-step"><b>3</b> Read every team's fate</span>
            <span className="how-step"><b>4</b> Share the link</span>
          </div>
          <div className="h2h">
            <b>New for 2026:</b> level on points? <em>Head-to-head</em> decides before overall goal difference. Most fans don't know this yet. Now you do.
          </div>
          <div className="legend">
            {['through', 'inhands', 'needshelp', 'thirdhope', 'out'].map((k) => (
              <span key={k} className={`lg ${FATE[k].cls}`}><i className="dot" />{FATE[k].label}</span>
            ))}
          </div>
        </div>
      </header>

{(() => {
        const tod = WSQ.groups.map((g) => groupStory(g, scoresRaw)).filter(Boolean).sort((a, b) => b.weight - a.weight)[0];
        return tod ? (
          <div className="wrap">
            <div className="tagofday"><span className="tod-badge">🗣️ TAG of the Day</span><span className="tod-text">{tod.text}</span><span className="tod-grp">Group {tod.gid}</span></div>
            <p className="tod-gloss"><b>TAG</b> = <b>T</b>alk <b>A</b>bout the <b>G</b>roup — the standout storyline a group is generating, drawn only from real results and seeded by the official FIFA ranking.</p>
          </div>
        ) : null;
      })()}

{API && (
        <section className="section acct-band">
          <div className="wrap">
            {me ? (
              <div className="acct">
                <div className="acct-hi">👋 Welcome back, <b>{me.name || me.email.split('@')[0]}</b>{me.team ? (' · your team ' + (T[me.team] ? T[me.team].name : me.team)) : ''}</div>
                <div className="acct-row">
                  <button className="cta" onClick={saveScenario}>💾 Save this scenario</button>
                  <button className="ghost" onClick={challenge}>📣 Challenge a friend</button>
                  <button className="ghost" onClick={signOut}>Sign out</button>
                </div>
                {saved.length > 0 && (
                  <div className="acct-saved">
                    {saved.map((s) => (
                      <span className="acct-sc" key={s.id}>
                        <button className="acct-load" onClick={() => loadScenario(s.hash)}>{s.label || 'Saved scenario'}</button>
                        <button className="acct-del" onClick={() => deleteSaved(s.id)} title="Delete">✕</button>
                      </span>
                    ))}
                  </div>
                )}
                <div className={`acct-lb ${myEntry ? 'on' : ''}`}>
                  {myEntry ? (
                    <>
                      <div className="lb-live">🏆 You're LIVE on the leaderboard</div>
                      <p className="lb-status"><b>{myEntry.handle}</b> · <b>{myEntry.score} pts</b> · rank <b>#{myEntry.rank}</b> of {myEntry.total}{myEntry.played === 0 ? ' · scoring starts when matchday-3 results land' : ` · ${myEntry.exact} exact`}</p>
                      <div className="lb-row">
                        <input type="text" className="lb-handle" placeholder="Your leaderboard name" value={lbHandle} onChange={(e) => setLbHandle(e.target.value)} aria-label="Leaderboard display name" maxLength={24} />
                        <span className="lb-auto">auto-saves ✓</span>
                        <button className="ghost small" onClick={loadMyBracket}>↻ My bracket</button>
                        <button className="ghost small" onClick={leaveLeaderboard}>Leave</button>
                      </div>
                      <p className="lb-note">Your latest prediction counts automatically — no need to submit. Your name shows publicly; your email never does.</p>
                    </>
                  ) : (
                    <>
                      <div className="lb-live prompt">🏆 Join the live leaderboard</div>
                      <p className="lb-note">Set scores in any group and you're <b>on automatically</b> — 3 pts for an exact score, 1 for the right result, scored live.</p>
                      <div className="lb-row">
                        <input type="text" className="lb-handle" placeholder="Your leaderboard name (optional)" value={lbHandle} onChange={(e) => setLbHandle(e.target.value)} aria-label="Leaderboard display name" maxLength={24} />
                        <button className="cta big" onClick={submitLeaderboard}>🏆 Join the leaderboard now</button>
                      </div>
                    </>
                  )}
                </div>
              </div>
            ) : (
              <div className="acct">
                <div className="lb-live prompt">🏆 Sign in to join the live leaderboard</div>
                <div className="acct-hi">Save your scenarios — sign in, no password</div>
                <p className="acct-sub">We email a one-time link. Then your predictions count on the leaderboard <b>automatically</b>, and your saved what-ifs + adopted team follow you across both games.</p>
                <form className="acct-row" onSubmit={requestLink}>
                  <input type="text" required placeholder="Your name" value={authName} onChange={(e) => setAuthName(e.target.value)} aria-label="Your name" maxLength={28} />
                  <input type="email" required placeholder="you@example.com" value={authEmail} onChange={(e) => setAuthEmail(e.target.value)} aria-label="Email for sign-in link" />
                  <button className="cta" type="submit">Send link</button>
                </form>
              </div>
            )}
            {authMsg && <p className="acct-msg">{authMsg}</p>}
          </div>
        </section>
      )}

<section className="section" style={{ paddingTop: '34px' }}>
        <div className="wrap">
          <div className="pitch">
            <div className="pitch-head">
              <div>
                <span className="kicker">⚽ The scenario machine</span>
                <h2 className="sec-title">Run the group stage</h2>
                <p className="sec-sub">Pick a group, set matchday three, and every table — and the best-thirds cut — reacts as you go.</p>
                {API && <span className="live-flag"><i />Official results lock in live as matches finish</span>}
              </div>
            </div>

<LockCountdown rows={scoresRaw} onPredict={(g) => { setActive(g); setTimeout(() => { const el = document.querySelector('.matches-panel'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 60); }} />

<main className="board">
              <section className="panel standings-panel">
                <div className="panel-head">
                  <div className="ph-left">
                    <button className="nav" onClick={() => go(-1)} aria-label="previous group">‹</button>
                    <h2>Group {active}</h2>
                    <button className="nav" onClick={() => go(1)} aria-label="next group">›</button>
                  </div>
                  <button className="ghost" onClick={resetGroup} disabled={!Object.keys(gpicks).length}>Reset group</button>
                </div>
                <Standings group={group} picks={gpicks} rev={scoresRev} />
                <GroupPulse group={group} rows={scoresRaw} rev={scoresRev} />
              </section>

<section className="panel matches-panel">
                <div className="panel-head"><h3>Set results</h3><span className="ph-hint">tap ▲▼ or a quick result</span></div>
                <Matches group={group} picks={gpicks} rows={scoresRaw} onSet={onSet} onClear={onClear} />
              </section>
            </main>

<section className="panel thirds-panel">
              <div className="panel-head">
                <div>
                  <h3>Best thirds — live cut</h3>
                  <p className="ph-sub">The eight best third-placed teams advance — by points, then goal difference, then goals scored. Updates as you set scores in any group.</p>
                </div>
              </div>
              <BestThirds allPicks={picks} rev={scoresRev} />
            </section>
          </div>

<div className="actions" style={{ marginTop: '26px' }}>
            <button className="cta" onClick={share}>Share this scenario →</button>
            <button className="ghost" onClick={resetAll}>Reset everything</button>
          </div>
        </div>
      </section>

{API && (
        <section className="section community">
          <div className="wrap">
            <div className="comm-head">
              <span className="kicker saffron">🌍 The community</span>
              <h2 className="sec-title">Live, right now</h2>
            </div>
            <div className="comm-counts-row">
              <div className="comm-stat">
                <b>{community ? community.players.toLocaleString() : '—'}</b>
                <span><i className="live-dot" />fans signed in</span>
              </div>
              <div className="comm-stat">
                <b>{community ? community.adoptions.toLocaleString() : '—'}</b>
                <span><i className="live-dot" />teams adopted</span>
              </div>
              <div className="comm-stat">
                <b>{community && community.views != null ? community.views.toLocaleString() : '—'}</b>
                <span><i className="live-dot" />page visits</span>
              </div>
              <a className="comm-cta" href="https://trykarkedekho.com/wc26/adopt-a-team" target="_blank" rel="noopener">No team yet? Adopt one →</a>
            </div>
            <div className="comm-boards">
              <div className="comm-board">
                <h3>🏆 Top adopted nations</h3>
                {nations.length === 0 ? (
                  <p className="comm-empty">Be the first to adopt a nation — the board fills up as fans join.</p>
                ) : (
                  <ol className="comm-list">
                    {nations.map((x, i) => (
                      <li key={x.code} className={i < 3 ? 'top' : ''}>
                        <span className="rk">{i + 1}</span>
                        <Chip code={x.code} size={18} />
                        <span className="nm">{T[x.code] ? T[x.code].name : x.code}</span>
                        <span className="ct">{x.count.toLocaleString()}</span>
                      </li>
                    ))}
                  </ol>
                )}
              </div>
              <div className="comm-board">
                <h3>🏆 Top predictors</h3>
                {board.length === 0 ? (
                  <div className="comm-empty loud">
                    <b>🏆 Be the first predictor!</b>
                    <p>{me ? 'Set your matchday-3 scores — you join automatically.' : 'Sign in, set your matchday-3 scores — you join automatically.'} 3 pts for an exact score, 1 for the right result.</p>
                  </div>
                ) : (
                  <ol className="comm-list">
                    {board.map((x, i) => (
                      <li key={x.handle + i} className={`${i < 3 ? 'top' : ''} ${myEntry && myEntry.handle === x.handle ? 'me' : ''}`}>
                        <span className="rk">{i + 1}</span>
                        <span className="nm">{x.handle}{myEntry && myEntry.handle === x.handle ? ' (you)' : ''}</span>
                        <span className="ct">{x.score} pts</span>
                      </li>
                    ))}
                  </ol>
                )}
                <p className="comm-foot">Scored live from official matchday-3 results.</p>
                <div className="lb-help">
                  <p><b>Why is everyone on 0?</b> You score only when a match you predicted <b>finishes</b> — 3 pts for an exact score, 1 for the right result. Most predicted games are still to come, so points start landing as results do.</p>
                  <p><b>Your name not on the board?</b> You appear only after you set predictions <b>while signed in</b>, and each pick has to be in <b>before that match kicks off</b> to count. Predict early.</p>
                </div>
              </div>
            </div>
            <FeedbackForm me={me} />
          </div>
        </section>
      )}

<EX.Quotes />
      <EX.Facts />

<EX.Legends />

<footer className="foot">
        <div className="wrap">
          <a className="adopt" href="https://trykarkedekho.com/wc26/adopt-a-team" target="_blank" rel="noopener">
            <b>New to football, or no team to call your own?</b> The group stage just kicked off — everyone's still in it. Adopt a nation in 60 seconds, then run their scenarios. <span className="arrow">Adopt a team →</span>
          </a>
          <p className="fine">Built for fun at <a href="https://trykarkedekho.com" target="_blank" rel="noopener">trykarkedekho.com</a> — <em>try kar ke dekho</em>. Unofficial fan project, not affiliated with any governing body. Official results locked 🔒; everything else is your imagination. Ties beyond goals scored fall to fair-play points and rankings — we flag those (†) instead of guessing.</p>
        </div>
      </footer>

<div className={`toast ${toast ? 'show' : ''}`}>{toast}</div>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);