/* screens/Home.jsx — landing / hero. window.HomeScreen */
function useCountdown(target) {
  const { useState, useEffect } = React;
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, []);
  const diff = target.getTime() - now;
  const live = diff <= 0;
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  return { live, d, h, m, s };
}

function HomeScreen({ store, go }) {
  const cd = useCountdown(window.WC.KICKOFF);
  const { results, ko } = store.state;
  const bracket = window.WCLogic.buildBracket(results, ko);
  const champ = bracket.champ;
  const winners = window.WC.groupOrder.map((g) => {
    const st = bracket.st[g];
    return st.complete ? st[0].code : null;
  });
  const predicted = Object.values(results).filter((r) => r && r.o).length;

  const Count = ({ v, l }) => (
    <div className="cd__cell">
      <div className="cd__num tnum">{String(v).padStart(2, '0')}</div>
      <div className="cd__lbl">{l}</div>
    </div>
  );

  return (
    <div className="home">
      <section className="hero bg-stadium">
        <div className="hero__glow" />
        <div className="hero__inner page">
          <div className="hero__copy">
            <div className="eyebrow row" style={{ gap: 8 }}>
              <span className="dot-g" /> FIFA World Cup 26 · USA · Canada · Mexico
            </div>
            <h1 className="hero__title display">
              Call all <span className="hl">104</span><br />matches.
            </h1>
            <p className="hero__lede">
              Predict every group, fill the knockout board, crown your champion —
              then watch your bracket light up as the tournament plays out under the floodlights.
            </p>
            <div className="hero__cta row" style={{ gap: 12, flexWrap: 'wrap' }}>
              <Btn size="lg" onClick={() => go('group')}>Make your predictions <IconArrow size={18} /></Btn>
              <Btn variant="ghost" size="lg" onClick={() => go('summary')}><IconShare size={16} /> See my bracket</Btn>
            </div>
            <div className="hero__meta row" style={{ gap: 20 }}>
              <span className="muted" style={{ fontSize: 13 }}>{predicted}/104 matches predicted</span>
              <span className="muted" style={{ fontSize: 13 }}>·</span>
              <span className="muted" style={{ fontSize: 13 }}>Your champion: <b style={{ color: 'var(--gold-bright)' }}>{champ ? window.WC.team(champ).name : 'undecided'}</b></span>
            </div>
            <a
              href="https://ko-fi.com/beram"
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => window.bwcpTrack && window.bwcpTrack('bwcp_tip_clicked')}
              style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 16, padding: '8px 16px', fontSize: 13, fontWeight: 600, color: 'var(--gold)', textDecoration: 'none', border: '1px solid var(--gold-deep)', borderRadius: 100, background: 'var(--gold-dim)', transition: 'background .15s' }}
              onMouseEnter={e => { e.currentTarget.style.background = 'var(--gold-glow)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'var(--gold-dim)'; }}
            >
              ☕ Buy me a coffee
            </a>
          </div>

          <aside className="hero__panel">
            <div className="cd">
              {cd.live ? (
                <div className="cd__live">
                  <Pill tone="live">Tournament live</Pill>
                  <div className="cd__livebig display">Matches underway</div>
                </div>
              ) : (
                <>
                  <div className="cd__head"><IconClock size={14} /> Kick-off · Estadio Azteca</div>
                  <div className="cd__grid">
                    <Count v={cd.d} l="days" /><Count v={cd.h} l="hrs" /><Count v={cd.m} l="min" /><Count v={cd.s} l="sec" />
                  </div>
                  <div className="cd__date">Mexico 🇲🇽 v South Africa 🇿🇦 · Jun 11, 2026</div>
                </>
              )}
            </div>

            <div className="champ-card">
              <div className="champ-card__lbl"><IconTrophy size={14} /> Your predicted champion</div>
              {champ ? (
                <div className="champ-card__team">
                  <span className="champ-card__flag">{window.WC.team(champ).flag}</span>
                  <span className="champ-card__name display">{window.WC.team(champ).name}</span>
                </div>
              ) : (
                <div className="champ-card__empty">Fill your bracket to crown a winner</div>
              )}
              <div className="champ-card__winners">
                {winners.map((c, i) => (
                  <span key={i} className="cw" title={c ? window.WC.team(c).name : 'TBD'}>
                    {c ? window.WC.team(c).flag : <span style={{ color: 'var(--ink-faint)' }}>·</span>}
                  </span>
                ))}
              </div>
            </div>
          </aside>
        </div>
      </section>

      <section className="page stats">
        {[['48', 'Teams'], ['12', 'Groups'], ['104', 'Matches'], ['39', 'Days of football'], ['1', 'Champion']].map(([n, l]) => (
          <div className="stat" key={l}><div className="stat__n display">{n}</div><div className="stat__l">{l}</div></div>
        ))}
      </section>

      <section className="page how">
        <div className="eyebrow">How it works</div>
        <div className="how__grid">
          {[
            ['01', 'Predict the groups', 'Set a result — and an optional scoreline — for all 72 group matches. Standings update live as you go.', () => go('group'), <IconGrid size={20} />],
            ['02', 'Build the bracket', 'Your top two from each group plus the eight best third-placed teams auto-fill the knockout board. Click to override.', () => go('knockout'), <IconBracket size={20} />],
            ['03', 'Share & track', 'Get a unique link, share a bracket card, then track your accuracy match-by-match through the final.', () => go('summary'), <IconTarget size={20} />],
          ].map(([n, t, d, fn, ic]) => (
            <button className="how__card" key={n} onClick={fn}>
              <div className="how__top"><span className="how__n display">{n}</span><span className="how__ic">{ic}</span></div>
              <div className="how__t">{t}</div>
              <div className="how__d">{d}</div>
              <div className="how__go row" style={{ gap: 6 }}>Open <IconArrow size={14} /></div>
            </button>
          ))}
        </div>
      </section>
    </div>
  );
}
window.HomeScreen = HomeScreen;