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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Copa Colombia - Sorteo Cuartos de Final</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <style>
    @keyframes pulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }

      100% {
        transform: scale(1);
      }
    }

    .team-card {
      transition: all 0.3s ease;
    }

    .team-card:hover {
      transform: translateY(-5px);
    }

    .match-card {
      animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pulse {
      animation: pulse 1s infinite;
    }

    .bracket-team {
      transition: all 0.3s ease;
    }

    .bracket-team:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  </style>
</head>

<body class="bg-gray-900 min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <header class="text-center mb-12">
      <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Copa Colombia 2024</h1>
      <h2 class="text-2xl md:text-3xl text-yellow-500">Sorteo Cuartos de Final</h2>
    </header>

    <div class="text-center mb-8">
      <button id="drawButton"
        class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-105">
        Iniciar Sorteo
      </button>
    </div>

    <div id="drawingStatus" class="text-center mb-8 hidden">
      <p class="text-xl text-yellow-500 pulse">Realizando sorteo...</p>
    </div>

    <div id="matches" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
      <!-- Matches will be inserted here -->
    </div>

    <div id="bracketContainer" class="hidden mt-12">
      <h2 class="text-3xl text-center text-yellow-500 mb-8">Cuadro de Eliminación</h2>
      <div class="relative w-full" style="height: 600px">
        <!-- Bracket structure -->
        <div class="absolute inset-0 flex justify-center items-center">
          <!-- Quarter Finals - Left Side -->
          <div class="absolute left-0 flex flex-col justify-around h-full" style="width: 280px">
            <div id="qf1" class="bracket-team bg-gray-800 rounded p-4 mb-4"></div>
            <div id="qf2" class="bracket-team bg-gray-800 rounded p-4 mb-4"></div>
            <div id="qf3" class="bracket-team bg-gray-800 rounded p-4 mb-4"></div>
            <div id="qf4" class="bracket-team bg-gray-800 rounded p-4"></div>
          </div>

          <!-- Semi Finals - Left Side -->
          <div class="absolute left-1/4 flex flex-col justify-around h-2/3" style="width: 280px">
            <div id="sf1" class="bracket-team bg-gray-800 rounded p-4"></div>
            <div id="sf2" class="bracket-team bg-gray-800 rounded p-4"></div>
          </div>

          <!-- Trophy -->
          <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
            <span class="text-6xl">🏆</span>
          </div>

          <!-- Semi Finals - Right Side -->
          <div class="absolute right-1/4 flex flex-col justify-around h-2/3" style="width: 280px">
            <div id="sf3" class="bracket-team bg-gray-800 rounded p-4"></div>
            <div id="sf4" class="bracket-team bg-gray-800 rounded p-4"></div>
          </div>

          <!-- Quarter Finals - Right Side -->
          <div class="absolute right-0 flex flex-col justify-around h-full" style="width: 280px">
            <div id="qf5" class="bracket-team bg-gray-800 rounded p-4 mb-4"></div>
            <div id="qf6" class="bracket-team bg-gray-800 rounded p-4 mb-4"></div>
            <div id="qf7" class="bracket-team bg-gray-800 rounded p-4 mb-4"></div>
            <div id="qf8" class="bracket-team bg-gray-800 rounded p-4"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const teams = [
      {
        name: "Club Deportes Tolima S. A.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/6beaeb2b-c9d7-4ba6-3627-338aae76e800/4k"
      },
      {
        name: "Club Deportivo Junior F.C. S. A.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/aabd52bb-53fd-4933-6cad-6e464a8d5800/4k"
      },
      {
        name: "Asociación Deportivo Cali",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/51f9d727-ab30-4167-351f-96996bc2f200/4k"
      },
      {
        name: "Deportivo Pereira S. A.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/8968c03e-2f18-4b82-5e1e-65d71cefdc00/4k"
      },
      {
        name: "Alianza Fútbol Club",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/c0828480-b8f1-4b5d-d3b5-9ba4706cd500/4k"
      },
      {
        name: "Llaneros Fútbol Club S.A.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/b3533cd1-ea54-43ed-4e4e-ec2b7ccd6300/4k"
      },
      {
        name: "Millonarios Fútbol Club S. A.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/86aae8e1-ea23-492b-f96e-c871ba800300/4k"
      },
      {
        name: "La Equidad Seguros S. A.",
        image: "https://imagedelivery.net/laUJq2BgAbSmQ7ly_N90fg/a410e928-c374-4fa4-1d37-93cbc76e6700/4k"
      }
    ];

    function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }

    function generateMatches() {
      const shuffledTeams = shuffleArray([...teams]);
      const matches = [];

      for (let i = 0; i < shuffledTeams.length; i += 2) {
        matches.push({
          homeTeam: shuffledTeams[i],
          awayTeam: shuffledTeams[i + 1]
        });
      }

      return matches;
    }

    function createTeamElement(team) {
      return `
                <div class="flex items-center space-x-3">
                    <img src="${team.image}" alt="${team.name}" class="w-8 h-8 object-contain">
                    <span class="text-white text-sm">${team.name}</span>
                </div>
            `;
    }

    function displayMatch(match, index) {
      const delay = index * 0.5;
      const matchHTML = `
                <div class="match-card bg-gray-800 rounded-lg p-4 shadow-lg" style="animation-delay: ${delay}s">
                    <div class="flex flex-col items-center space-y-4">
                        <div class="team-card w-full bg-gray-700 rounded-lg p-4 flex items-center space-x-4">
                            <img src="${match.homeTeam.image}" alt="${match.homeTeam.name}" class="w-16 h-16 object-contain">
                            <span class="text-white font-semibold text-sm md:text-base">${match.homeTeam.name}</span>
                        </div>
                        <div class="text-yellow-500 text-2xl font-bold">VS</div>
                        <div class="team-card w-full bg-gray-700 rounded-lg p-4 flex items-center space-x-4">
                            <img src="${match.awayTeam.image}" alt="${match.awayTeam.name}" class="w-16 h-16 object-contain">
                            <span class="text-white font-semibold text-sm md:text-base">${match.awayTeam.name}</span>
                        </div>
                    </div>
                </div>
            `;

      document.getElementById('matches').insertAdjacentHTML('beforeend', matchHTML);
    }

    function displayBracket(matches) {
      // Display quarter-finals
      matches.forEach((match, index) => {
        document.getElementById(`qf${index * 2 + 1}`).innerHTML = createTeamElement(match.homeTeam);
        document.getElementById(`qf${index * 2 + 2}`).innerHTML = createTeamElement(match.awayTeam);
      });

      // Show bracket container
      document.getElementById('bracketContainer').classList.remove('hidden');
    }

    document.getElementById('drawButton').addEventListener('click', async function () {
      this.disabled = true;
      this.classList.add('opacity-50');
      document.getElementById('matches').innerHTML = '';
      document.getElementById('drawingStatus').classList.remove('hidden');
      document.getElementById('bracketContainer').classList.add('hidden');

      // Generate matches but wait before displaying
      const matches = generateMatches();

      // Wait for 3 seconds
      await new Promise(resolve => setTimeout(resolve, 3000));

      document.getElementById('drawingStatus').classList.add('hidden');

      // Display matches one by one
      matches.forEach((match, index) => {
        displayMatch(match, index);
      });

      // Display bracket after matches
      setTimeout(() => {
        displayBracket(matches);
      }, matches.length * 500 + 500);

      // Re-enable button after all displays are complete
      setTimeout(() => {
        this.disabled = false;
        this.classList.remove('opacity-50');
      }, matches.length * 500 + 1000);
    });
  </script>
</body>

</html>