const { useEffect: useEffectLand, useState: useStateLand } = React;

function LandingPage({ onEnter }) {
  const [visible, setVisible] = useStateLand(false);

  useEffectLand(() => {
    const t = setTimeout(() => setVisible(true), 60);
    return () => clearTimeout(t);
  }, []);

  const players    = DB.players;
  const matchCount = DB.matches.length;
  const topPlayer  = [...players].sort((a, b) => b.wins - a.wins)[0];

  return (
    <div className="landing-screen">
      <div className={`landing-content ${visible ? "landing-in" : ""}`}>

        {/* Logo */}
        <div className="landing-logo">
          <div className="landing-suit">♠</div>
          <div className="landing-title">لوحة السماور</div>
          <div className="landing-sub">طرنيب · تركس · نزال بلا رحمة</div>
        </div>

        {/* Player avatars */}
        {players.length > 0 && (
          <div className="landing-players">
            {players.map(p => (
              <Avatar key={p.id} player={p} size={50} showTag={false} />
            ))}
          </div>
        )}

        {/* Stats */}
        <div className="landing-stats">
          <div className="landing-stat">
            <div className="landing-stat-num" style={{ color: "var(--gold)" }}>{matchCount}</div>
            <div className="landing-stat-label">مباراة</div>
          </div>
          <div className="landing-stat">
            <div className="landing-stat-num" style={{ color: "var(--neon-cyan)" }}>{players.length}</div>
            <div className="landing-stat-label">لاعب</div>
          </div>
          {topPlayer && topPlayer.wins > 0 && (
            <div className="landing-stat">
              <div style={{ display: "flex", justifyContent: "center", marginBottom: 3 }}>
                <Avatar player={topPlayer} size={34} showTag={false} />
              </div>
              <div className="landing-stat-label" style={{ color: "var(--gold)" }}>الصدارة</div>
            </div>
          )}
        </div>

        {/* Enter button */}
        <button className="landing-enter" onClick={onEnter}>
          ادخل اللعبة <span style={{ fontFamily: "Rakkas, serif" }}>♠</span>
        </button>

        <div className="landing-footer">طرنيب و تركس · نسخة السماور</div>
      </div>
    </div>
  );
}

Object.assign(window, { LandingPage });