<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OCL Standings</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <style>
    .standings-row:hover {
      background-color: rgba(59, 130, 246, 0.1);
    }

    .playoff-position {
      background-color: rgba(16, 185, 129, 0.1);
    }

    .playoff-position:hover {
      background-color: rgba(16, 185, 129, 0.2);
    }

    @media (max-width: 640px) {
      .stats-cell {
        font-size: 0.75rem;
        padding: 0.5rem 0.25rem;
      }
    }
  </style>
</head>

<body class="bg-gray-100 min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <header class="text-center mb-8">
      <h1 class="text-4xl font-bold text-blue-900 mb-2">OCL Standings</h1>
      <p class="text-gray-600">Season 2024</p>
      <div class="mt-4 flex items-center justify-center space-x-4">
        <div class="flex items-center">
          <div class="w-4 h-4 bg-green-500 bg-opacity-10 border border-green-500"></div>
          <span class="ml-2 text-sm text-gray-600">Playoff Qualification</span>
        </div>
      </div>
    </header>

    <div class="bg-white rounded-lg shadow-lg overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr class="bg-blue-900 text-white">
            <th class="px-4 py-3 text-left">Pos</th>
            <th class="px-4 py-3 text-left">Team</th>
            <th class="px-4 py-3 text-center">MP</th>
            <th class="px-4 py-3 text-center">W</th>
            <th class="px-4 py-3 text-center">D</th>
            <th class="px-4 py-3 text-center">L</th>
            <th class="px-4 py-3 text-center">GF</th>
            <th class="px-4 py-3 text-center">GA</th>
            <th class="px-4 py-3 text-center">GD</th>
            <th class="px-4 py-3 text-center">Pts</th>
          </tr>
        </thead>
        <tbody id="standings-body">
          <!-- JavaScript will populate this -->
        </tbody>
      </table>
    </div>
  </div>

  <script>
    const teams = {
      "Manchester City": {
        name: "Manchester City Football Club",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/d858d088-3cb1-41c0-b89b-9f1079a7d500/4k",
        mp: 5, w: 5, d: 0, l: 0, gf: 17, ga: 4, gd: 13, pts: 15
      },
      "Villarreal": {
        name: "Villarreal Club de Fútbol, S.A.D.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/05bb6454-b2ce-411a-9a11-38c171a91300/4k",
        mp: 4, w: 3, d: 1, l: 0, gf: 14, ga: 4, gd: 10, pts: 10
      },
      "Stade Rennais": {
        name: "Stade Rennais Football Club",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/b19d31d3-7ea7-42c7-6c4b-55d40f27d000/4k",
        mp: 5, w: 3, d: 0, l: 2, gf: 10, ga: 8, gd: 2, pts: 9
      },
      "Real Madrid": {
        name: "Real Madrid Club de Fútbol",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/a57950e7-cf70-445d-3986-551ff3e4fa00/4k",
        mp: 5, w: 2, d: 1, l: 2, gf: 10, ga: 17, gd: -7, pts: 7
      },
      "Arsenal": {
        name: "Arsenal Football Club",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/d56104b5-56f3-4193-8abf-ccf3d9c49100/4k",
        mp: 5, w: 3, d: 0, l: 2, gf: 15, ga: 5, gd: 10, pts: 9
      },
      "Manchester United": {
        name: "Manchester United Football Club",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/af313c62-d15d-4373-c4ce-3abdf020e600/4k",
        mp: 5, w: 2, d: 1, l: 2, gf: 13, ga: 12, gd: 1, pts: 7
      },
      "Atletico de Madrid": {
        name: "Club Atlético de Madrid, S.A.D.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/505347f8-785a-4fcd-3fe7-da7ef5c8c000/4k",
        mp: 4, w: 1, d: 1, l: 2, gf: 3, ga: 4, gd: -1, pts: 4
      },
      "Barcelona": {
        name: "Futbol Club Barcelona",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/a2d32a57-b096-4821-ccf1-bd55f276cc00/4k",
        mp: 5, w: 2, d: 0, l: 3, gf: 9, ga: 11, gd: -2, pts: 6
      },
      "AC Milan": {
        name: "Associazione Calcio Milan",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/8068def8-d96f-4c86-0f80-97885dfcd900/4k",
        mp: 5, w: 1, d: 1, l: 3, gf: 4, ga: 7, gd: -3, pts: 4
      },
      "Bayern Munchen": {
        name: "Fußball-Club Bayern München e.V.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/53e25818-555c-43b0-26c8-4fab67be2f00/4k",
        mp: 5, w: 2, d: 0, l: 3, gf: 5, ga: 7, gd: -2, pts: 6
      },
      "Liverpool": {
        name: "Liverpool Football Club",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/b9d09c08-7d0d-4fc3-90ab-98fdd3cdee00/4k",
        mp: 5, w: 1, d: 0, l: 4, gf: 5, ga: 16, gd: -11, pts: 3
      },
      "Napoli": {
        name: "Società Sportiva Calcio Napoli",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/0f509e90-881c-4bdc-eb45-643bde396400/4k",
        mp: 5, w: 0, d: 1, l: 4, gf: 1, ga: 11, gd: -10, pts: 1
      }
    };

    function sortTeams() {
      return Object.entries(teams).sort((a, b) => {
        // Sort by points
        if (b[1].pts !== a[1].pts) return b[1].pts - a[1].pts;
        // Then by goal difference
        if (b[1].gd !== a[1].gd) return b[1].gd - a[1].gd;
        // Then by goals for
        if (b[1].gf !== a[1].gf) return b[1].gf - a[1].gf;
        // Then alphabetically
        return a[0].localeCompare(b[0]);
      });
    }

    function updateStandings() {
      const tbody = document.getElementById('standings-body');
      tbody.innerHTML = '';

      const sortedTeams = sortTeams();

      sortedTeams.forEach((team, index) => {
        const [teamName, stats] = team;
        const row = document.createElement('tr');
        row.className = `standings-row border-b transition-colors ${index < 4 ? 'playoff-position' : ''}`;

        row.innerHTML = `
                    <td class="px-4 py-3 font-semibold">${index + 1}</td>
                    <td class="px-4 py-3">
                        <div class="flex items-center space-x-3">
                            <img src="${stats.image}" alt="${teamName}" class="w-8 h-8 object-contain">
                            <span class="font-medium">${teamName}</span>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.mp}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.w}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.d}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.l}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.gf}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.ga}</td>
                    <td class="px-4 py-3 text-center stats-cell">${stats.gd}</td>
                    <td class="px-4 py-3 text-center font-semibold">${stats.pts}</td>
                `;

        tbody.appendChild(row);
      });
    }

    // Initial update
    updateStandings();
  </script>
</body>

</html>