<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Game Collection</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <style>
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      margin: 0;
    }

    /* Ikon pengaturan animasi */
    #settingsIcon:hover {
      transform: rotate(45deg);
      transition: transform 0.3s ease-in-out;
    }

    /* Popup overlay */
    #settingsPopup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    /* Popup konten */
    .popup-content {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
      text-align: center;
      width: 90%;
      max-width: 400px;
    }

    /* Animasi FAQ */
    .faq-answer {
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    .faq-answer.show {
      display: block;
      opacity: 1;
    }

    /* FAQ pertanyaan */
    .faq-question {
      cursor: pointer;
      color: #4b6cb7;
      font-weight: bold;
      text-decoration: underline;
      transition: color 0.3s ease;
    }

    .faq-question:hover {
      color: #1d3c6a;
    }

    /* Kartu FAQ */
    .faq-card {
      background-color: #2d3748;
      padding: 16px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease-in-out;
    }

    .faq-card:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    }

    /* FAQ Text */
    .faq-text {
      margin-top: 10px;
      color: #e2e8f0;
    }

  </style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-purple-800 to-pink-700 text-white min-h-screen flex flex-col relative">

  <!-- Tombol Pengaturan -->
  <div class="absolute top-4 right-4 z-50">
    <button id="settingsIcon" onclick="toggleSettingsPopup()" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-full shadow-lg transform transition-transform">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6" viewBox="0 0 24 24">
        <path d="M12 2a1 1 0 011 1v1.071a8.96 8.96 0 013.354.688l.759-.757a1 1 0 111.414 1.414l-.757.759a8.962 8.962 0 01.688 3.354H21a1 1 0 110 2h-1.071a8.962 8.962 0 01-.688 3.354l.757.759a1 1 0 11-1.414 1.414l-.759-.757a8.962 8.962 0 01-3.354.688V21a1 1 0 11-2 0v-1.071a8.96 8.96 0 01-3.354-.688l-.759.757a1 1 0 11-1.414-1.414l.757-.759a8.962 8.962 0 01-.688-3.354H3a1 1 0 110-2h1.071a8.962 8.962 0 01.688-3.354l-.757-.759a1 1 0 111.414-1.414l.759.757A8.96 8.96 0 0111 4.071V3a1 1 0 011-1zm-1 12a3 3 0 106 0 3 3 0 00-6 0z" />
      </svg>
    </button>
  </div>

  <!-- Popup Pengaturan -->
  <div id="settingsPopup">
    <div class="popup-content">
      <h2 class="text-xl font-bold mb-4">Pilih Tema</h2>
      <button onclick="setTheme('dark')" class="bg-gray-800 text-white px-4 py-2 rounded-full hover:bg-gray-700 mb-2 w-full">🌙 Mode Gelap</button>
      <button onclick="setTheme('light')" class="bg-gray-200 text-black px-4 py-2 rounded-full hover:bg-gray-300 w-full">☀️ Mode Terang</button>
      <button onclick="toggleSettingsPopup()" class="mt-4 text-red-500 hover:underline">Tutup</button>
    </div>
  </div>

<!-- Header -->
<header class="text-center py-24 bg-gray-900 text-white">
  <h1 class="text-5xl font-bold tracking-tight mb-4" data-aos="fade-down">
    🎮 Game Collection
  </h1>
  <p class="text-xl text-gray-400 font-light mb-8" data-aos="fade-up">
    Selamat datang di koleksi game kami! Pilih game favoritmu dan nikmati pengalaman bermain yang seru.
  </p>
  <a href="#game-list" class="inline-block text-lg text-indigo-400 hover:text-indigo-500 font-medium transition-all transform hover:scale-105 mb-4" data-aos="fade-up">
    Mulai Bermain
  </a>
</header>

  <!-- Game List -->
<!-- Game List -->
<div class="container mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 p-6">
  <div class="bg-white text-black rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300" data-aos="zoom-in">
    <img src="https://i.ibb.co.com/19DXfHW/47b88f57dd24d048e3f0f9eb5cdcd52d.jpg" alt="Tic-Tac-Toe" class="w-full h-48 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold mb-2">Tictactoe</h2>
      <p class="text-gray-600 mb-4">Mainkan XOXO dengan bisa memilih level game vs ai!</p>
      
      <!-- Game Rating -->
      <div class="flex items-center mb-4">
        <span class="text-yellow-400">★★★★★</span>
        <span class="text-gray-500">4.5</span>
      </div>

      <a href="game.html" class="bg-purple-600 hover:bg-purple-800 text-white py-2 px-4 rounded block text-center transition-transform transform hover:scale-105">Play Now</a>
    </div>
  </div>
</div>

  <!-- FAQ Section -->
  <section class="py-8 px-4 bg-gray-800 text-white">
    <h2 class="text-3xl font-bold text-center mb-6" data-aos="fade-right">Frequently Asked Questions</h2>
    <div class="space-y-4">
      <div class="faq-card" data-aos="fade-up">
        <div class="faq-question" onclick="toggleFAQAnswer(0)">❓ Apa itu Game Collection?</div>
        <div class="faq-answer faq-text" id="faq-answer-0">Game Collection adalah platform tempat Anda dapat memainkan berbagai jenis game langsung di browser tanpa perlu mengunduh apapun.</div>
      </div>
      <div class="faq-card" data-aos="fade-up">
        <div class="faq-question" onclick="toggleFAQAnswer(1)">❓ Bagaimana cara bermain game di sini?</div>
        <div class="faq-answer faq-text" id="faq-answer-1">Cukup klik tombol 'Play Now' pada game yang Anda pilih dan nikmati permainannya!</div>
      </div>
      <div class="faq-card" data-aos="fade-up">
        <div class="faq-question" onclick="toggleFAQAnswer(2)">❓ Apakah saya perlu login untuk bermain?</div>
        <div class="faq-answer faq-text" id="faq-answer-2">Tidak perlu login. Cukup pilih game dan mulai bermain.</div>
      </div>
    </div>
  </section>

  <!-- Contact Us Section -->
  <section class="bg-gray-800 text-white py-8 px-4">
    <h2 class="text-3xl font-bold text-center mb-6" data-aos="fade-right">Contact Us</h2>
    <div class="text-center">
      <p class="text-lg mb-4">Ada pertanyaan atau saran? Contact kami sekarang.</p>
      <div class="space-x-4">
        <a href="https://t.me/anggazyydevl" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">Telegram</a>
        <a href="https://wa.me/6288804148639" target="_blank" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded">WhatsApp</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="mt-auto text-center py-6 bg-gray-800 text-gray-400">
    <p>© 2024 Game Collection | Dibuat Oleh ❤️ Anggazyy developer.</p>
    <a href="#top" class="text-blue-300 hover:underline">Kembali ke Atas</a>
  </footer>

  <!-- AOS Animation Script -->
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init(); // Initialize AOS (Animation on Scroll)

    // Toggle Settings Popup
    function toggleSettingsPopup() {
      const popup = document.getElementById('settingsPopup');
      popup.style.display = (popup.style.display === 'flex') ? 'none' : 'flex';
    }

    // Set Theme (Dark or Light)
    function setTheme(theme) {
      if (theme === 'dark') {
        document.body.classList.add('bg-gray-900', 'text-white');
        document.body.classList.remove('bg-white', 'text-black');
        localStorage.setItem('theme', 'dark');
      } else {
        document.body.classList.add('bg-white', 'text-black');
        document.body.classList.remove('bg-gray-900', 'text-white');
        localStorage.setItem('theme', 'light');
      }
      toggleSettingsPopup();
    }

    // Load Theme from localStorage
    document.addEventListener('DOMContentLoaded', () => {
      const savedTheme = localStorage.getItem('theme') || 'light';
      setTheme(savedTheme);
    });

    // Toggle FAQ Answer
    function toggleFAQAnswer(index) {
      const answer = document.getElementById(`faq-answer-${index}`);
      answer.classList.toggle('show');
    }
  </script>
</body>
</html>