Untitled

export default function EsportsLeaderboard() {
  const initialTeams = [
    { place: 1, team: 'OVERDOZEE', points: 3638 },
    { place: 2, team: 'TEAM MOIRAI', points: 3213 },
    { place: 3, team: 'OVERDOZEE CIS', points: 1734 },
    { place: 4, team: 'Kin', points: 1680 },
    { place: 5, team: 'Strive eSports', points: 1678 },
    { place: 6, team: 'VOLARE', points: 1469 },
    { place: 7, team: 'Winzy', points: 1460 },
    { place: 8, team: 'Zenith', points: 1446 },
    { place: 9, team: 'Renascença', points: 1384 },
    { place: 10, team: 'Ivory Mantis', points: 1148 },
  ];

  const [teams, setTeams] = React.useState(initialTeams);
  const [selected, setSelected] = React.useState([]);
  const [teamName, setTeamName] = React.useState('');
  const [points, setPoints] = React.useState('');

  const bgImage = 'sandbox:/mnt/data/image(2).png';
  const logoImage = 'sandbox:/mnt/data/logogif (2).gif';

  const toggleSelect = (team) => {
    setSelected((prev) =>
      prev.includes(team)
        ? prev.filter((t) => t !== team)
        : [...prev, team]
    );
  };

  const removeSelected = () => {
    setTeams((prev) => prev.filter((t) => !selected.includes(t.team)));
    setSelected([]);
  };

  const addTeam = () => {
    if (!teamName || !points) return;

    const updated = [
      ...teams,
      {
        place: teams.length + 1,
        team: teamName,
        points: Number(points),
      },
    ].sort((a, b) => b.points - a.points)
      .map((team, index) => ({ ...team, place: index + 1 }));

    setTeams(updated);
    setTeamName('');
    setPoints('');
  };

  return (
    <div
      className="min-h-screen w-full bg-cover bg-center text-white p-6"
      style={{
        backgroundImage: `linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.92)), url(${bgImage})`,
      }}
    >
      <div className="max-w-5xl mx-auto">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-5xl font-black tracking-wide">Leaderboard</h1>
            <p className="text-gray-300 mt-2">
              Select teams, remove them, or add new ones.
            </p>
          </div>

          <img
            src={logoImage}
            alt="Logo"
            className="w-28 h-28 rounded-3xl shadow-2xl border border-white/20"
          />
        </div>

        <div className="bg-white/10 backdrop-blur-xl rounded-3xl border border-white/10 overflow-hidden shadow-2xl">
          <table className="w-full">
            <thead className="bg-white/10 text-left uppercase text-sm tracking-wider">
              <tr>
                <th className="p-4">Select</th>
                <th className="p-4">Placement</th>
                <th className="p-4">Team</th>
                <th className="p-4 text-right">Points</th>
              </tr>
            </thead>

            <tbody>
              {teams.map((team) => (
                <tr
                  key={team.team}
                  className={`border-t border-white/10 transition-all ${
                    selected.includes(team.team)
                      ? 'bg-purple-500/30'
                      : 'hover:bg-white/5'
                  }`}
                >
                  <td className="p-4">
                    <input
                      type="checkbox"
                      checked={selected.includes(team.team)}
                      onChange={() => toggleSelect(team.team)}
                      className="w-5 h-5"
                    />
                  </td>

                  <td className="p-4 font-bold text-lg">#{team.place}</td>

                  <td className="p-4 font-semibold text-lg">{team.team}</td>

                  <td className="p-4 text-right font-bold text-xl">
                    {team.points}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="grid md:grid-cols-3 gap-4 mt-8">
          <input
            type="text"
            placeholder="Team name"
            value={teamName}
            onChange={(e) => setTeamName(e.target.value)}
            className="bg-white/10 border border-white/10 rounded-2xl px-4 py-3 outline-none"
          />

          <input
            type="number"
            placeholder="Points"
            value={points}
            onChange={(e) => setPoints(e.target.value)}
            className="bg-white/10 border border-white/10 rounded-2xl px-4 py-3 outline-none"
          />

          <button
            onClick={addTeam}
            className="bg-purple-600 hover:bg-purple-500 transition-all rounded-2xl font-bold text-lg"
          >
            Add Team
          </button>
        </div>

        <div className="flex gap-4 mt-6">
          <button
            onClick={removeSelected}
            className="px-6 py-3 rounded-2xl bg-red-600 hover:bg-red-500 font-bold transition-all"
          >
            Remove Selected
          </button>

          <button
            onClick={() => setSelected(teams.map((t) => t.team))}
            className="px-6 py-3 rounded-2xl bg-white/10 hover:bg-white/20 font-bold transition-all"
          >
            Select All
          </button>

          <button
            onClick={() => setSelected([])}
            className="px-6 py-3 rounded-2xl bg-white/10 hover:bg-white/20 font-bold transition-all"
          >
            Clear Selection
          </button>
        </div>
      </div>
    </div>
  );
}