// Home tab — hero image, key stats, mini podium
function HomeTab({ medals, goto }) {
  const { TEAMS, PLAYERS, GAMES } = window.LEA30;
  const score = (m) => m.gold * 3 + m.silver * 2 + m.bronze * 1;
  const ranked = ['orange', 'yellow', 'green', 'blue']
    .map(tk => ({ tk, m: medals[tk] || { gold: 0, silver: 0, bronze: 0 } }))
    .sort((a, b) => score(b.m) - score(a.m));
  const totalScore = ranked.reduce((s, r) => s + score(r.m), 0);
  const top3 = [ranked[1], ranked[0], ranked[2]]; // 2nd, 1st, 3rd visual order
  const positions = ['p2', 'p1', 'p3'];

  return (
    <div>
      <div className="home-hero">
        <img className="hero-photo smooth" src="assets/logo-photo.png" alt="Léa 30" />
        <div className="hero-badge">
          <span>OLÉAMPICS XXX</span>
          <span className="date">MAY 8 — 10 · 26</span>
        </div>
      </div>

      <div className="home-stat-grid">
        <div className="stat-tile">
          <div className="v">{PLAYERS.length}</div>
          <div className="k">PLAYERS</div>
        </div>
        <div className="stat-tile">
          <div className="v">4</div>
          <div className="k">TEAMS</div>
        </div>
        <div className="stat-tile">
          <div className="v">{GAMES.length}</div>
          <div className="k">GAMES</div>
        </div>
      </div>

      <div className="section-title">CURRENT PODIUM</div>
      <div className="home-podium">
        <div className="podium">
          {totalScore === 0 ? (
            ['p2', 'p1', 'p3'].map((place, idx) => {
              const placeNum = place === 'p1' ? 1 : place === 'p2' ? 2 : 3;
              return (
                <div key={place} className={`col ${place}`}>
                  <div className="lbl" style={{ '--team-col': 'var(--ink-3)' }}>TBD</div>
                  <div className="block" style={{ '--team-col': 'var(--ink-3)', opacity: 0.45 }}>{placeNum}</div>
                </div>
              );
            })
          ) : (
            top3.map((r, idx) => {
              if (!r) return <div key={idx} />;
              const team = TEAMS[r.tk];
              const place = positions[idx];
              const placeNum = place === 'p1' ? 1 : place === 'p2' ? 2 : 3;
              return (
                <div key={r.tk} className={`col ${place}`}>
                  <div className="lbl" style={{ '--team-col': team.color }}>{team.label}</div>
                  <div className="block" style={{ '--team-col': team.color }}>{placeNum}</div>
                </div>
              );
            })
          )}
        </div>
        {totalScore === 0 && (
          <div style={{ textAlign: 'center', fontFamily: 'var(--pixel)', fontSize: 9, color: 'var(--ink-3)', marginTop: 8, letterSpacing: '.1em' }}>
            LET THE GAMES BEGIN
          </div>
        )}
      </div>

      <div className="divider" />
    </div>
  );
}

window.HomeTab = HomeTab;