// views/Home.jsx — Live Today dashboard
function LiveView({ onRoute, matchState, clock }) {
  const F = window.WCL_FEATURED;
  const today = window.WCL_TODAY;
  const trophyOdds = window.WCL_TROPHY_ODDS;
  const kpi = window.WCL_KPIS;
  const ck = clock || window.WCL_CLOCK.compute('live');

  const state = matchState; // 'pre' | 'live' | 'final'

  // The Live page is only "live" during the tournament window.
  if (ck.phase === 'pre')  return <LiveClosedState clock={ck} onRoute={onRoute} />;
  if (ck.phase === 'post') return <LivePostState clock={ck} onRoute={onRoute} />;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">{ck.dateLabel}, 2026 · Day {ck.dayN}/{ck.totalDays} · Matchday 2</div>
          <h1 className="type-h1">Live today</h1>
          <div className="sub">6 matches · 2 live now · model refit 14m ago</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-secondary btn-sm"><I.Filter size={14} /> Filters</button>
          <button className="btn btn-primary btn-sm" onClick={() => onRoute('leaderboard')}><I.Crown size={14} /> Make today's picks</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="col4" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-label">Live now</div>
          <div className="kpi-value" style={{ color: 'var(--live-red)' }}>{kpi.live_now}</div>
          <div className="kpi-delta">ARG vs CRO · MEX vs CAN</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Goals today</div>
          <div className="kpi-value">{kpi.goals_today}</div>
          <div className="kpi-delta up">+1.2 vs tournament avg</div>
        </div>
        <div className="kpi spark">
          <div className="kpi-label">Tournament goals / game</div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <div className="kpi-value">{kpi.goals_avg_tournament}</div>
            <div style={{ width: 80, color: 'var(--pitch)' }}>
              <Sparkline data={[2.5,2.7,2.6,2.8,3.0,2.9,2.84]} color="currentColor" fill />
            </div>
          </div>
          <div className="kpi-delta">9-edition rolling avg 2.71</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Upsets today</div>
          <div className="kpi-value">{kpi.upsets}</div>
          <div className="kpi-delta">FRA 3-0 SEN was the chalk · MEX-CAN running -EV</div>
        </div>
      </div>

      {/* Featured match hero */}
      <FeaturedMatch state={state} onRoute={onRoute} />

      <div className="col2" style={{ marginTop: 16 }}>
        {/* Today's fixtures */}
        <section className="panel">
          <div className="panel-head">
            <h3>Today's fixtures</h3>
            <a className="link subtle" onClick={() => onRoute('matches')}>All fixtures <I.ChevR size={12} /></a>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {today.map(t => <FixtureRow key={t.id} row={t} onClick={() => onRoute('match')} />)}
          </div>
        </section>

        {/* Trophy odds (model vs market) */}
        <section className="panel">
          <div className="panel-head">
            <h3>To lift the trophy</h3>
            <div className="seg">
              <button className="active">Model</button>
              <button>Market</button>
              <button>Δ</button>
            </div>
          </div>
          <table className="table" style={{ tableLayout: 'fixed' }}>
            <thead>
              <tr>
                <th style={{ width: 28 }}>#</th>
                <th>Team</th>
                <th style={{ width: 90 }}>Model</th>
                <th style={{ width: 90 }}>Market</th>
                <th style={{ width: 60, textAlign: 'right' }}>Δ24h</th>
              </tr>
            </thead>
            <tbody>
              {trophyOdds.slice(0, 8).map((r, i) => (
                <tr key={r.team} onClick={() => onRoute('team', { code: r.team })} style={{ cursor: 'pointer' }}>
                  <td className="mono subtle">{i + 1}</td>
                  <td className="strong"><TeamRow code={r.team} /></td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="probbar model" style={{ flex: 1 }}><span style={{ width: (r.model / 0.15) * 100 + '%' }} /></div>
                      <span className="mono" style={{ width: 36, textAlign: 'right' }}>{(r.model * 100).toFixed(1)}%</span>
                    </div>
                  </td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="probbar" style={{ flex: 1 }}><span style={{ width: (r.market / 0.15) * 100 + '%' }} /></div>
                      <span className="mono" style={{ width: 36, textAlign: 'right' }}>{(r.market * 100).toFixed(1)}%</span>
                    </div>
                  </td>
                  <td className="mono" style={{ textAlign: 'right', color: r.trend.startsWith('+') ? 'var(--success)' : r.trend.startsWith('-') ? 'var(--destructive)' : 'var(--foreground-muted)' }}>{r.trend}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </div>

      <div className="col2" style={{ marginTop: 16 }}>
        <DailyChallenge />
        <GroupStandings onRoute={onRoute} />
      </div>

      <section className="panel" style={{ marginTop: 16 }}>
        <div className="panel-head">
          <h3>Golden Boot · Top scorer odds</h3>
          <a className="link subtle">Full board <I.ChevR size={12} /></a>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 28 }}>#</th>
              <th>Player</th>
              <th style={{ width: 100 }}>Team</th>
              <th style={{ width: 80, textAlign: 'right' }}>Goals</th>
              <th style={{ width: 100, textAlign: 'right' }}>Decimal</th>
              <th style={{ width: 110, textAlign: 'right' }}>Implied %</th>
              <th>30-day shift</th>
            </tr>
          </thead>
          <tbody>
            {window.WCL_GOLDEN_BOOT.map((p, i) => (
              <tr key={p.player}>
                <td className="mono subtle">{i + 1}</td>
                <td className="strong">{p.player}</td>
                <td><TeamRow code={p.team} /></td>
                <td className="mono" style={{ textAlign: 'right' }}>{p.goals}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{p.odds.toFixed(2)}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{(100 / p.odds).toFixed(1)}%</td>
                <td style={{ color: 'var(--foreground-muted)' }}>
                  <Sparkline data={Array.from({ length: 16 }, (_, k) => Math.sin(k * 0.4 + i) + i * 0.1 + k * 0.05)} color={i % 2 ? 'var(--pitch)' : 'var(--upcoming)'} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </div>
  );
}

// ---------- Featured match card ----------
function FeaturedMatch({ state, onRoute }) {
  const F = window.WCL_FEATURED;
  const score = state === 'live' ? F.live.score : state === 'final' ? F.final.score : [null, null];
  const wp = state === 'pre' ? [F.odds.modelHome, F.odds.modelDraw, F.odds.modelAway] : F.live.winProb;

  return (
    <section className="match-hero">
      <div className="meta-strip">
        <div className="stage-tag">
          {state === 'live' && <span className="hd-pulse"><span className="dot" /> LIVE</span>}
          {state === 'pre'  && <span className="badge preview"><I.Clock size={11} /> Pre-match</span>}
          {state === 'final' && <span className="badge neutral">Full time</span>}
          <span>{F.stage}</span>
        </div>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <span><I.Stadium size={12} style={{ verticalAlign: '-2px' }} /> {F.venue}, {F.city}</span>
          <span><I.Whistle size={12} style={{ verticalAlign: '-2px' }} /> {F.ref}</span>
          <span><I.Users size={12} style={{ verticalAlign: '-2px' }} /> {F.attendance.toLocaleString()}</span>
        </div>
      </div>

      <div className="scoreline">
        <div className="team">
          <Flag code={F.home} size="xl" />
          <div className="crest">{window.WCL_TEAMS[F.home].name}<small>FIFA #{window.WCL_TEAMS[F.home].fifa} · 4-3-3</small></div>
        </div>
        <div style={{ textAlign: 'center' }}>
          {state === 'pre' ? (
            <div>
              <div className="ko-time">20:00</div>
              <div className="clock pre">Kicks off in 1h 14m</div>
            </div>
          ) : (
            <div>
              <div className="score">
                <span>{score[0]}</span>
                <span className="colon">–</span>
                <span>{score[1]}</span>
              </div>
              {state === 'live' ? (
                <div className="clock">{F.live.minute}' · {F.live.period}</div>
              ) : (
                <div className="clock ft">FULL TIME</div>
              )}
            </div>
          )}
        </div>
        <div className="team away">
          <Flag code={F.away} size="xl" />
          <div className="crest" style={{ textAlign: 'right' }}>{window.WCL_TEAMS[F.away].name}<small>FIFA #{window.WCL_TEAMS[F.away].fifa} · 4-3-3</small></div>
        </div>
      </div>

      {/* Win prob */}
      <div style={{ marginTop: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8, fontSize: 11, color: 'var(--foreground-muted)' }}>
          <span style={{ letterSpacing: '0.08em', textTransform: 'uppercase' }}>{state === 'pre' ? 'Pre-match model' : state === 'live' ? 'Live win probability' : 'Final · pre-match was'}</span>
          <span className="mono">refit {state === 'live' ? '8s ago' : '14m ago'}</span>
        </div>
        <WinProb home={wp[0]} draw={wp[1]} away={wp[2]} codes={[F.home, F.away]} />
      </div>

      {/* Mini event ribbon (only live/final) */}
      {(state === 'live' || state === 'final') && (
        <div className="timeline" style={{ marginTop: 10 }}>
          <div className="timeline-track">
            <div className="ht" />
            {(state === 'live') && <div className="now" style={{ left: (F.live.minute / 90 * 100) + '%' }} />}
            {F.events.filter(e => e.kind === 'goal' || e.kind === 'yc' || e.kind === 'rc' || e.kind === 'sub').map((e, i) =>
              <div key={i} className={'ev ' + e.kind} style={{ left: (e.min / 90 * 100) + '%' }} title={`${e.min}' ${e.text}`} />
            )}
          </div>
        </div>
      )}

      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 12 }}>
        <button className="btn btn-secondary btn-sm" onClick={() => onRoute('match')}><I.Activity size={14} /> Live stats</button>
        <button className="btn btn-secondary btn-sm" onClick={() => onRoute('team', { code: F.home })}><I.Shield size={14} /> Team page</button>
        <button className="btn btn-primary btn-sm" onClick={() => onRoute('match')}>Open match <I.ChevR size={14} /></button>
      </div>
    </section>
  );
}

// ---------- Fixture row ----------
function FixtureRow({ row, onClick }) {
  const isLive = row.state === 'live';
  const isSoon = row.state === 'soon';
  return (
    <div className="fixture" onClick={onClick}>
      <span className="stage">
        {isLive && <span className="live-dot" />}
        {row.group}
      </span>
      <span className="team">
        <Flag code={row.home} />
        <span className="name">{window.WCL_TEAMS[row.home].name}</span>
      </span>
      <span className={'score-cell' + (isSoon ? ' ko' : '')}>
        {isSoon ? row.ko :
          <span>
            <span>{row.score[0]} – {row.score[1]}</span>
            {isLive && <span className="min">{row.minute}'</span>}
            {!isLive && !isSoon && <span className="min" style={{ color: 'var(--foreground-muted)' }}>FT</span>}
          </span>}
      </span>
      <span className="team away">
        <Flag code={row.away} />
        <span className="name">{window.WCL_TEAMS[row.away].name}</span>
      </span>
      <span style={{ textAlign: 'right' }}>
        <I.ChevR size={14} className="subtle" />
      </span>
    </div>
  );
}

// ---------- Daily challenge ("World Cup Ranks"-style) ----------
function DailyChallenge() {
  const D = window.WCL_DAILY;
  const [items, setItems] = React.useState(D.items);
  const [submitted, setSubmitted] = React.useState(false);
  const [dragIdx, setDragIdx] = React.useState(null);

  function move(i, dir) {
    const j = i + dir;
    if (j < 0 || j >= items.length) return;
    const next = items.slice();
    [next[i], next[j]] = [next[j], next[i]];
    setItems(next);
  }
  function submit() { setSubmitted(true); }
  function reset() { setItems(D.items.slice().sort(() => 0.5 - Math.random())); setSubmitted(false); }

  React.useEffect(() => {
    setItems(D.items.slice().sort(() => 0.5 - Math.random()));
  }, []);

  return (
    <section className="rank-card">
      <div className="panel-head" style={{ marginBottom: 8 }}>
        <h3 style={{ display: 'flex', alignItems: 'center', gap: 8, margin: 0, fontSize: 14, fontWeight: 600 }}>
          Daily challenge
          <span className="badge live" style={{ background: 'color-mix(in oklch, var(--trophy) 20%, transparent)', color: 'var(--trophy)', borderColor: 'color-mix(in oklch, var(--trophy) 40%, transparent)' }}>STREAK · {D.streak}</span>
        </h3>
        <span className="subtle" style={{ fontSize: 11 }}>{D.global.played.toLocaleString()} played today</span>
      </div>
      <p className="subtle" style={{ fontSize: 13, margin: '0 0 12px' }}>{D.q}</p>

      <div className="rank-list">
        {items.map((code, i) => {
          const correctIdx = D.correct.indexOf(code);
          const right = submitted && correctIdx === i;
          const wrong = submitted && correctIdx !== i;
          return (
            <div key={code} className="rank-item" style={{
              borderColor: right ? 'var(--success)' : wrong ? 'var(--destructive)' : undefined,
              background: right ? 'color-mix(in oklch, var(--success) 12%, transparent)' :
                          wrong ? 'color-mix(in oklch, var(--destructive) 12%, transparent)' : undefined,
            }}>
              <span className="rank-num">{i + 1}</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Flag code={code} />
                <span style={{ color: 'var(--foreground)', fontWeight: 500, fontSize: 13 }}>{window.WCL_TEAMS[code].name}</span>
                {submitted && (
                  <span className="mono subtle" style={{ fontSize: 11 }}>
                    answer: #{correctIdx + 1}
                  </span>
                )}
              </span>
              <span style={{ display: 'flex', gap: 4 }}>
                {!submitted && (
                  <>
                    <button className="btn btn-ghost btn-sm btn-icon" onClick={() => move(i, -1)} aria-label="up" style={{ width: 24, height: 24 }}><I.ChevDown size={12} style={{ transform: 'rotate(180deg)' }} /></button>
                    <button className="btn btn-ghost btn-sm btn-icon" onClick={() => move(i, 1)} aria-label="down" style={{ width: 24, height: 24 }}><I.ChevDown size={12} /></button>
                  </>
                )}
                {submitted && (right ? <I.Check size={16} style={{ color: 'var(--success)' }} /> : <I.X size={16} style={{ color: 'var(--destructive)' }} />)}
              </span>
            </div>
          );
        })}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14, gap: 8 }}>
        <span className="subtle" style={{ fontSize: 12 }}>
          {submitted ?
            <>{items.filter((c, i) => D.correct[i] === c).length}/{items.length} correct · Model agreed {Math.round(D.global.perfect * 100)}% globally</>
            : <>Drag to reorder · most likely first</>}
        </span>
        <div style={{ display: 'flex', gap: 6 }}>
          {!submitted ? (
            <button className="btn btn-primary btn-sm" onClick={submit}>Lock in</button>
          ) : (
            <button className="btn btn-secondary btn-sm" onClick={reset}>Reset</button>
          )}
        </div>
      </div>
    </section>
  );
}

// ---------- Group standings (Group D) ----------
function GroupStandings({ onRoute }) {
  const G = window.WCL_GROUPS.D;
  return (
    <section className="panel">
      <div className="panel-head">
        <h3>Group D · standings</h3>
        <div className="seg">
          <button className="active">D</button>
          <button onClick={() => {}}>B</button>
          <button>Σ</button>
        </div>
      </div>
      <table className="table">
        <thead>
          <tr>
            <th style={{ width: 22 }}>#</th>
            <th>Team</th>
            <th style={{ textAlign: 'right' }}>MP</th>
            <th style={{ textAlign: 'right' }}>W</th>
            <th style={{ textAlign: 'right' }}>D</th>
            <th style={{ textAlign: 'right' }}>L</th>
            <th style={{ textAlign: 'right' }}>GD</th>
            <th style={{ textAlign: 'right' }}>PTS</th>
            <th style={{ width: 90, textAlign: 'right' }}>Advance</th>
          </tr>
        </thead>
        <tbody>
          {G.teams.map((t, i) => (
            <tr key={t.team} onClick={() => onRoute('team', { code: t.team })} style={{ cursor: 'pointer' }}>
              <td className="mono" style={{ color: i < 2 ? 'var(--pitch)' : 'var(--foreground-muted)' }}>{i + 1}</td>
              <td className="strong"><TeamRow code={t.team} /></td>
              <td className="mono" style={{ textAlign: 'right' }}>{t.mp}</td>
              <td className="mono" style={{ textAlign: 'right' }}>{t.w}</td>
              <td className="mono" style={{ textAlign: 'right' }}>{t.d}</td>
              <td className="mono" style={{ textAlign: 'right' }}>{t.l}</td>
              <td className="mono" style={{ textAlign: 'right' }}>{(t.gf - t.ga > 0 ? '+' : '') + (t.gf - t.ga)}</td>
              <td className="mono strong" style={{ textAlign: 'right' }}>{t.pts}</td>
              <td className="mono" style={{ textAlign: 'right', color: i < 2 ? 'var(--pitch)' : 'var(--foreground-muted)' }}>
                {[0.92, 0.41, 0.36, 0.31][i]?.toFixed(2) || '0.00'}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  );
}

Object.assign(window, { LiveView, HomeView: LiveView, FeaturedMatch, FixtureRow, DailyChallenge, GroupStandings, LiveClosedState, LivePostState });

// ---------- Live page when the tournament has not kicked off yet ----------
function LiveClosedState({ clock, onRoute }) {
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">{clock.dateLabel}, 2026 · Pre-tournament</div>
          <h1 className="type-h1">Live coverage opens June 11</h1>
          <div className="sub">Live scores, win-probability and the match timeline go live when the opening match kicks off.</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('matches')}><I.Calendar size={14} /> Fixtures</button>
          <button className="btn btn-primary btn-sm" onClick={() => onRoute('home')}><I.Home size={14} /> Overview</button>
        </div>
      </div>

      <section className="match-hero" style={{ textAlign: 'center', padding: '48px 28px' }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>Kick-off in</div>
        <CountdownClock target={clock.start} big />
        <div className="sub" style={{ marginTop: 18, fontSize: 14 }}>
          {window.WCL_2026.meta.openingMatch.city} · {window.WCL_TEAMS[window.WCL_2026.meta.openingMatch.home]?.name} vs South Africa · {clock.startLabel}
        </div>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 22 }}>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('wc2026')}><I.Trophy size={14} /> 2026 details</button>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('bracket')}><I.Bracket size={14} /> Predicted bracket</button>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('odds')}><I.Sigma size={14} /> Trophy odds</button>
        </div>
      </section>

      <div className="col2" style={{ marginTop: 16 }}>
        <section className="panel">
          <div className="panel-head"><h3>To lift the trophy</h3><a className="link subtle" onClick={() => onRoute('odds')}>Full board <I.ChevR size={12} /></a></div>
          <table className="table">
            <thead><tr><th style={{ width: 28 }}>#</th><th>Team</th><th style={{ width: 90, textAlign: 'right' }}>Model</th></tr></thead>
            <tbody>
              {window.WCL_TROPHY_ODDS.slice(0, 8).map((r, i) => (
                <tr key={r.team} onClick={() => onRoute('team', { code: r.team })} style={{ cursor: 'pointer' }}>
                  <td className="mono subtle">{i + 1}</td>
                  <td className="strong"><TeamRow code={r.team} /></td>
                  <td className="mono" style={{ textAlign: 'right' }}>{(r.model * 100).toFixed(1)}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
        <DailyChallenge />
      </div>
    </div>
  );
}

// ---------- Live page after the final ----------
function LivePostState({ clock, onRoute }) {
  const champ = 'ARG';
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">{clock.dateLabel}, 2026 · Tournament concluded</div>
          <h1 className="type-h1">That's a wrap on World Cup 26</h1>
          <div className="sub">104 matches across 39 days. Live coverage is closed — explore the records and the road to 2030.</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('stats')}><I.Sigma size={14} /> Final stats</button>
          <button className="btn btn-primary btn-sm" onClick={() => onRoute('alltime')}><I.Trophy size={14} /> All-time records</button>
        </div>
      </div>
      <section className="match-hero" style={{ textAlign: 'center', padding: '40px 28px' }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>Champions</div>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 12 }}><Flag code={champ} size="xl" /></div>
        <div className="strong" style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em' }}>{window.WCL_TEAMS[champ].name}</div>
        <div className="sub" style={{ marginTop: 6 }}>Projected winners · lifted at MetLife Stadium</div>
      </section>
    </div>
  );
}

// ---------- Reusable countdown clock ----------
function CountdownClock({ target, big }) {
  const [, force] = React.useReducer(x => x + 1, 0);
  React.useEffect(() => { const t = setInterval(force, 1000); return () => clearInterval(t); }, []);
  const now = window.WCL_CLOCK.compute('countdown').now; // simulated "now" so the count is stable & meaningful
  let diff = Math.max(0, target - now);
  const days = Math.floor(diff / 86400000); diff -= days * 86400000;
  const hrs = Math.floor(diff / 3600000);   diff -= hrs * 3600000;
  const mins = Math.floor(diff / 60000);    diff -= mins * 60000;
  const secs = Math.floor(diff / 1000);
  const unit = (v, l) => (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: big ? 76 : 52 }}>
      <span style={{ fontSize: big ? 52 : 30, fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--foreground)', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>{String(v).padStart(2, '0')}</span>
      <span className="eyebrow" style={{ marginTop: 8, fontSize: 10 }}>{l}</span>
    </div>
  );
  return (
    <div style={{ display: 'flex', gap: big ? 18 : 12, justifyContent: 'center', alignItems: 'flex-start' }}>
      {unit(days, 'Days')}<span style={{ fontSize: big ? 44 : 26, color: 'var(--foreground-muted)', lineHeight: big ? '52px' : '30px' }}>:</span>
      {unit(hrs, 'Hrs')}<span style={{ fontSize: big ? 44 : 26, color: 'var(--foreground-muted)', lineHeight: big ? '52px' : '30px' }}>:</span>
      {unit(mins, 'Min')}<span style={{ fontSize: big ? 44 : 26, color: 'var(--foreground-muted)', lineHeight: big ? '52px' : '30px' }}>:</span>
      {unit(secs, 'Sec')}
    </div>
  );
}
Object.assign(window, { CountdownClock });