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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quadrangular Draw - Division 2</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

    * {
      box-sizing: border-box;
      font-family: "Montserrat", sans-serif;
    }

    body {
      transition: background-color 0.2s linear;
    }

    body.dark {
      background-color: #292c35;
      color: #fff;
    }

    body.dark .bg-white {
      background-color: #1a1a1a;
    }

    body.dark .bg-gray-50 {
      background-color: #2d2d2d;
    }

    body.dark .text-gray-600 {
      color: #a0aec0;
    }

    .logo-animation {
      animation: floatAnimation 3s ease-in-out infinite;
    }

    @keyframes floatAnimation {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-10px);
      }

      100% {
        transform: translateY(0px);
      }
    }

    .checkbox {
      opacity: 0;
      position: absolute;
    }

    .checkbox-label {
      background-color: #111;
      width: 50px;
      height: 26px;
      border-radius: 50px;
      position: relative;
      padding: 5px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .fa-moon {
      color: #f1c40f;
    }

    .fa-sun {
      color: #f39c12;
    }

    .checkbox-label .ball {
      background-color: #fff;
      width: 22px;
      height: 22px;
      position: absolute;
      left: 2px;
      top: 2px;
      border-radius: 50%;
      transition: transform 0.2s linear;
    }

    .checkbox:checked+.checkbox-label .ball {
      transform: translateX(24px);
    }

    .team-card {
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateY(20px);
    }

    .team-card.show {
      opacity: 1;
      transform: translateY(0);
    }

    .team-card:hover {
      transform: scale(1.02);
    }

    .group-container {
      min-height: 400px;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }

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

    .pulse {
      animation: pulse 0.5s ease-in-out;
    }
  </style>
</head>

<body class="min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <!-- Theme Toggle -->
    <div class="fixed top-4 right-4 z-50">
      <input type="checkbox" class="checkbox" id="checkbox">
      <label for="checkbox" class="checkbox-label">
        <i class="fas fa-moon"></i>
        <i class="fas fa-sun"></i>
        <span class="ball"></span>
      </label>
    </div>

    <!-- Logo and Title -->
    <div class="flex flex-col items-center mb-8">
      <img src="https://www.thesportsdb.com/images/media/league/badge/l2h1ao1615832028.png" alt="Division 2 Logo"
        class="w-32 h-32 mb-4 logo-animation">
      <h1 class="text-4xl font-bold text-center" data-translate="title">Quadrangular Draw - Division 2</h1>
    </div>

    <div class="flex justify-center mb-8">
      <button id="startDraw"
        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300"
        data-translate="startButton">
        Start Draw
      </button>
    </div>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- Group A -->
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-4 text-center" data-translate="groupA">Group A</h2>
        <div id="groupA" class="group-container space-y-4"></div>
      </div>

      <!-- Group B -->
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-4 text-center" data-translate="groupB">Group B</h2>
        <div id="groupB" class="group-container space-y-4"></div>
      </div>
    </div>
  </div>

  <!-- Import teams data first -->
  <script src="teams.js"></script>

  <script>
    // Translations
    const translations = {
      'en': {
        title: 'Quadrangular Draw - Division 2',
        startButton: 'Start Draw',
        groupA: 'Group A',
        groupB: 'Group B'
      },
      'es': {
        title: 'Sorteo Cuadrangular - División 2',
        startButton: 'Iniciar Sorteo',
        groupA: 'Grupo A',
        groupB: 'Grupo B'
      },
      'pt': {
        title: 'Sorteio Quadrangular - Divisão 2',
        startButton: 'Iniciar Sorteio',
        groupA: 'Grupo A',
        groupB: 'Grupo B'
      },
      'fr': {
        title: 'Tirage au Sort Quadrangulaire - Division 2',
        startButton: 'Commencer le Tirage',
        groupA: 'Groupe A',
        groupB: 'Groupe B'
      },
      'de': {
        title: 'Quadrangular-Auslosung - Division 2',
        startButton: 'Auslosung Starten',
        groupA: 'Gruppe A',
        groupB: 'Gruppe B'
      },
      'it': {
        title: 'Sorteggio Quadrangolare - Divisione 2',
        startButton: 'Inizia Sorteggio',
        groupA: 'Gruppo A',
        groupB: 'Gruppo B'
      }
    };

    // Main Application Code
    const qualifiedTeams = [
      "Real Cartagena F.C. S. A.",
      "Orsomarso Sport Club S. A.",
      "Barranquilla Fútbol Club S. A.",
      "Club Llaneros S. A.",
      "Boca Juniors de Cali S. A.",
      "Boyacá Chicó Fútbol Club S. A.",
      "Corporación Nuevo Cúcuta Deportivo",
      "Club Deportivo Leones F.C."
    ];

    // Detect user's browser language
    const userLanguage = (navigator.language || navigator.userLanguage).split('-')[0];

    // Function to translate the page
    function translatePage(language) {
      const elements = document.querySelectorAll('[data-translate]');
      elements.forEach(element => {
        const key = element.getAttribute('data-translate');
        if (translations[language] && translations[language][key]) {
          element.textContent = translations[language][key];
        }
      });
    }

    // Initialize translation
    function initializeTranslation() {
      const supportedLanguages = Object.keys(translations);
      const language = supportedLanguages.includes(userLanguage) ? userLanguage : 'en';
      translatePage(language);
    }

    // Theme management
    const checkbox = document.getElementById("checkbox");

    function setTheme(isDark) {
      document.body.classList.toggle('dark', isDark);
      checkbox.checked = isDark;
      localStorage.setItem('darkMode', isDark);
    }

    const savedTheme = localStorage.getItem('darkMode');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

    if (savedTheme !== null) {
      setTheme(savedTheme === 'true');
    } else {
      setTheme(prefersDark.matches);
    }

    prefersDark.addEventListener('change', (e) => {
      if (localStorage.getItem('darkMode') === null) {
        setTheme(e.matches);
      }
    });

    checkbox.addEventListener("change", () => {
      setTheme(checkbox.checked);
    });

    // Draw functionality
    function getTeamData(teamName) {
      return teamsData.find(team => team.name === teamName);
    }

    function createTeamCard(team) {
      const teamData = getTeamData(team);
      return `
                <div class="team-card bg-gray-50 rounded-lg p-4 flex items-center space-x-4">
                    <img src="${teamData.image}" alt="${teamData.name}" class="w-16 h-16 object-contain">
                    <div>
                        <h3 class="font-semibold">${teamData.name}</h3>
                        <p class="text-gray-600">${teamData.abbreviation}</p>
                    </div>
                </div>
            `;
    }

    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 showTeamWithAnimation(element, delay) {
      setTimeout(() => {
        element.classList.add('show');
        element.classList.add('pulse');
        setTimeout(() => element.classList.remove('pulse'), 500);
      }, delay);
    }

    function performDraw() {
      const groupA = document.getElementById('groupA');
      const groupB = document.getElementById('groupB');

      groupA.innerHTML = '';
      groupB.innerHTML = '';

      // Set first teams
      groupA.innerHTML += createTeamCard("Real Cartagena F.C. S. A.");
      groupB.innerHTML += createTeamCard("Orsomarso Sport Club S. A.");

      // Get remaining teams
      const remainingTeams = qualifiedTeams.filter(team =>
        team !== "Real Cartagena F.C. S. A." &&
        team !== "Orsomarso Sport Club S. A."
      );

      // Shuffle remaining teams
      const shuffledTeams = shuffleArray([...remainingTeams]);

      // Show first teams with animation
      const allTeamCards = document.querySelectorAll('.team-card');
      showTeamWithAnimation(allTeamCards[0], 0);
      showTeamWithAnimation(allTeamCards[1], 500);

      // Distribute remaining teams
      shuffledTeams.forEach((team, index) => {
        setTimeout(() => {
          if (index < 3) {
            groupA.innerHTML += createTeamCard(team);
          } else {
            groupB.innerHTML += createTeamCard(team);
          }
          const newCard = document.querySelectorAll('.team-card:not(.show)')[0];
          showTeamWithAnimation(newCard, 100);
        }, (index + 2) * 500);
      });
    }

    // Start Draw Button
    document.getElementById('startDraw').addEventListener('click', function () {
      this.disabled = true;
      this.classList.add('opacity-50');
      performDraw();

      setTimeout(() => {
        this.disabled = false;
        this.classList.remove('opacity-50');
      }, 4000);
    });

    // Initialize translation when DOM is loaded
    document.addEventListener('DOMContentLoaded', initializeTranslation);
  </script>
</body>

</html>