<?php
session_start();
require '../db.php'; // Conexão com banco

// Verificar se o usuário está logado
if (!isset($_SESSION['usuario_id'])) {
    header("Location: https://agar.advopack.net/pages/login.html");
    exit();
}

// Verificar o nível do usuário
$user_id = $_SESSION['usuario_id'];
$query = "SELECT nivel FROM usuarios WHERE id = ?";
$stmt = $pdo->prepare($query);
$stmt->execute([$user_id]);
$user = $stmt->fetch();

if ($user['nivel'] == 'Admin') {
    header("Location: admin/pages/admin.html");
    exit();
}

// Consulta SQL para contar o número de jogos
$queryCount = "SELECT COUNT(*) AS total_games FROM jogos";
$resultCount = $pdo->query($queryCount);

// Recupera o número de jogos
$countData = $resultCount->fetch(PDO::FETCH_ASSOC);
$totalGames = $countData['total_games'];



?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GameStore+ - Descubra Seus Próximos Jogos</title>
    <link rel="stylesheet" href="../css/main.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <script type="module" async src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Fgamestore5913back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.10"></script>
  <script type="module" defer src="https://static.rocket.new/rocket-shot.js?v=0.0.1"></script>
  </head>
<body class="min-h-screen bg-gradient-to-br from-primary-900 via-primary-800 to-secondary-800 font-roboto">
    <!-- Gaming Background Pattern -->
    <div class="fixed inset-0 opacity-10">
        <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><defs><pattern id=%22gaming-grid%22 width=%2210%22 height=%2210%22 patternUnits=%22userSpaceOnUse%22><path d=%22M 10 0 L 0 0 0 10%22 fill=%22none%22 stroke=%22%2374abdb%22 stroke-width=%220.5%22/></pattern></defs><rect width=%22100%22 height=%22100%22 fill=%22url(%23gaming-grid)%22/></svg>');"></div>
        <div class="absolute top-10 left-10 w-32 h-32 bg-accent-400 rounded-full opacity-20 blur-xl"></div>
        <div class="absolute bottom-20 right-20 w-48 h-48 bg-primary-400 rounded-full opacity-15 blur-2xl"></div>
        <div class="absolute top-1/2 left-1/4 w-24 h-24 bg-secondary-400 rounded-full opacity-25 blur-lg"></div>
    </div>

    <!-- Fixed Header -->
    <header class="fixed top-0 left-0 right-0 z-50 bg-primary-900/95 backdrop-blur-sm border-b border-primary-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center">
                    <a href="game_feed_dashboard.html" class="flex items-center space-x-2">
                        <div class="w-8 h-8 bg-gradient-to-br from-accent-400 to-accent-600 rounded-lg flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="text-xl font-poppins font-bold text-white">GameStore<span class="text-accent-400">+</span></span>
                    </a>
                </div>

                <!-- Search Bar -->
                <div class="hidden md:flex flex-1 max-w-lg mx-8">
                    <div class="relative w-full">
                        <input 
                            type="text" 
                            placeholder="Buscar jogos, gêneros, desenvolvedores..." 
                            class="w-full bg-primary-800/50 border border-primary-600 rounded-gaming pl-10 pr-4 py-2 text-white placeholder-secondary-400 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500 transition-gaming"
                        >
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Navigation -->
                <nav class="hidden lg:flex items-center space-x-8">
                    <a href="game_feed_dashboard.html" class="text-accent-400 font-medium">Jogos</a>
                    <a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming font-medium">Ofertas</a>
                    <a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming font-medium">Comunidade</a>
                    <a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming font-medium">Suporte</a>
                </nav>

                <!-- User Actions -->
                <div class="flex items-center space-x-4">
                    <!-- Wishlist -->
                    <button class="relative text-secondary-300 hover:text-accent-400 transition-gaming">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                        </svg>
                        <span class="absolute -top-2 -right-2 bg-accent-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                    </button>

                    <!-- Cart -->
                    <button class="relative text-secondary-300 hover:text-accent-400 transition-gaming">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17M17 13v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-6m8 0V9a2 2 0 00-2-2H9a2 2 0 00-2 2v4.01"/>
                        </svg>
                        <span class="absolute -top-2 -right-2 bg-accent-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">1</span>
                    </button>

  <!-- User Profile -->
<div class="relative">
    <!-- Botão que abre o dropdown -->
    <button class="flex items-center space-x-2 text-white hover:text-accent-400 transition-gaming" onclick="toggleDropdown()">
        <img src="https://img.rocket.new/generatedImages/rocket_gen_img_141f27d40-1763294845306.png" alt="Foto do perfil do usuário" class="w-8 h-8 rounded-full border-2 border-accent-400" onerror="this.src='https://images.unsplash.com/photo-1584824486509-112e4181ff6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; this.onerror=null;">
        <span class="hidden md:block font-medium"><?php echo htmlspecialchars($_SESSION['usuario_nome']); ?></span>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>
    
    <!-- Dropdown Menu -->
    <div id="dropdownMenu" class="absolute right-0 mt-2 bg-white border rounded-md shadow-lg hidden">
        <ul>
            <li><a href="perfil.php" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Perfil</a></li>
            <li><a href="login.html" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Sair</a></li>
        </ul>
    </div>
</div>

<script>
// Função para alternar a visibilidade do dropdown
function toggleDropdown() {
    const dropdown = document.getElementById('dropdownMenu');
    dropdown.classList.toggle('show'); // Trocar 'hidden' por 'show' para controle da visibilidade
}

// Fechar o dropdown se o usuário clicar fora
window.onclick = function(event) {
    const dropdown = document.getElementById('dropdownMenu');
    // Se o clique foi fora do dropdown ou do botão de perfil
    if (!event.target.matches('.flex, .flex *')) {
        if (dropdown.classList.contains('show')) {
            dropdown.classList.remove('show'); // Remover a classe 'show' para esconder o dropdown
        }
    }
}
</script>


<style>
    
    /* Estilo geral do botão do perfil */
.relative {
    position: relative;
}

/* Estilo do dropdown */
#dropdownMenu {
    display: none;
    position: absolute;
    right: 0;
    margin-top: 10px;
    width: 200px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Garante que o dropdown fique acima de outros elementos */
}

/* Itens dentro do dropdown */
#dropdownMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#dropdownMenu ul li {
    border-bottom: 1px solid #eee;
}

#dropdownMenu ul li:last-child {
    border-bottom: none; /* Remove a borda inferior do último item */
}

/* Estilo para os links dentro do dropdown */
#dropdownMenu a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Efeito de hover para os links */
#dropdownMenu a:hover {
    background-color: #f5f5f5;
    color: #1a202c;
}

/* Mostrar o dropdown */
#dropdownMenu.show {
    display: block;
}

/* Opção de hover para o botão (perfil) */
button:hover {
    color: #ffbb33; /* Cor de destaque quando o botão for hover */
}

/* Ajuste para os ícones */
button svg {
    transition: transform 0.3s ease;
}

/* Animar o ícone do dropdown */
button:hover svg {
    transform: rotate(180deg);
}

    
</style>

                    <!-- Mobile Menu Button -->
                    <button class="md:hidden text-white hover:text-accent-400 transition-gaming">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="relative z-10 pt-16">
        <!-- Hero Section -->
        <section class="relative bg-gradient-to-r from-primary-900 via-primary-800 to-secondary-800 py-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <!-- Hero Content -->
                    <div class="text-white">
                        <h1 class="text-4xl lg:text-6xl font-poppins font-bold mb-6">
                            Descubra Sua Próxima
                            <span class="text-gradient bg-gradient-to-r from-accent-400 to-accent-600 bg-clip-text text-transparent">Obsessão Gaming</span>
                        </h1>
                        <p class="text-xl text-secondary-300 mb-8 leading-relaxed">
                            Explore nossa curadoria inteligente de jogos, descubra títulos únicos e conecte-se com uma comunidade apaixonada por gaming.
                        </p>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <button class="btn-primary bg-gradient-to-r from-accent-500 to-accent-600 hover:from-accent-600 hover:to-accent-700 text-white font-semibold py-3 px-8 rounded-gaming shadow-gaming transition-gaming transform hover:scale-105">
                                Explorar Jogos
                            </button>
                            <button class="border-2 border-accent-400 text-accent-400 hover:bg-accent-400 hover:text-white font-semibold py-3 px-8 rounded-gaming transition-gaming">
                                Ver Ofertas
                            </button>
                        </div>
                    </div>

                    <!-- Featured Game Showcase -->
                    <div class="relative">
                        <div class="bg-surface/10 backdrop-blur-sm rounded-gaming-lg p-6 border border-primary-200/20">
                            <div class="aspect-video rounded-gaming overflow-hidden mb-4">
                                <img src="https://img.rocket.new/generatedImages/rocket_gen_img_18821baf7-1763506895191.png" alt="Jogo em destaque - Cyberpunk Adventure" class="w-full h-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1584824486509-112e4181ff6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; this.onerror=null;">
                            </div>
                            <h3 class="text-xl font-poppins font-bold text-white mb-2">Cyberpunk Adventure</h3>
                            <p class="text-secondary-300 mb-4">Aventura futurística com gráficos impressionantes</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <span class="text-2xl font-bold text-accent-400">R$ 89,90</span>
                                    <span class="text-sm text-secondary-400 line-through">R$ 129,90</span>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                    </svg>
                                    <span class="text-white font-medium">4.8</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Filters and Sorting -->
        <section class="bg-surface/95 backdrop-blur-sm border-b border-primary-200/20 sticky top-16 z-40">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                    <!-- Genre Filters -->
           <?php



// Consulta para pegar os gêneros únicos
$queryGenres = "SELECT DISTINCT genres FROM jogos";
$genresResult = $pdo->query($queryGenres);

// Verifica se existem gêneros na tabela
$genres = [];
if ($genresResult->rowCount() > 0) {
    while ($row = $genresResult->fetch(PDO::FETCH_ASSOC)) {
        $genres[] = $row['genres']; // Adiciona os gêneros à lista
    }
}
?>

<!-- Filtros de Gênero -->
<div class="flex flex-wrap gap-2">
    <button id="filter-all" class="px-4 py-2 bg-accent-500 text-white rounded-gaming font-medium transition-gaming">
        Todos
    </button>

    <?php foreach ($genres as $genre): ?>
        <button id="filter-<?php echo strtolower(str_replace(' ', '-', $genre)); ?>" class="px-4 py-2 bg-secondary-100 text-secondary-700 hover:bg-accent-500 hover:text-white rounded-gaming font-medium transition-gaming">
            <?php echo $genre; ?>
        </button>
    <?php endforeach; ?>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const filters = document.querySelectorAll('[id^="filter-"]');
    
    filters.forEach(filter => {
        filter.addEventListener("click", function () {
            const filterType = filter.id.split('-')[1]; // Captura o tipo do filtro (ex: "acao", "rpg", etc.)
            applyFilter(filterType);
        });
    });

    function applyFilter(filterType) {
        // Enviar a solicitação para atualizar os jogos com o filtro selecionado
        fetchGames(filterType);
    }

    function fetchGames(filterType) {
        // A URL que processa a consulta com o filtro no PHP
        fetch(`?filter=${filterType}`)
            .then(response => response.text())
            .then(data => {
                const gamesContainer = document.getElementById("games-container");
                if (gamesContainer) {
                    gamesContainer.innerHTML = data; // Atualizar os cards com a nova lista de jogos
                } else {
                    console.error("Elemento 'games-container' não encontrado!");
                }
            })
            .catch(error => console.error('Erro ao carregar jogos:', error));
    }
});

</script>





             
                </div>
            </div>
        </section>

        <!-- Game Cards Grid -->
        <section class="py-8 bg-background">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Section Header -->
                <div class="flex items-center justify-between mb-8">
                    <h2 class="text-2xl font-poppins font-bold text-primary-900">Jogos em Destaque</h2>
                   

<span class="text-secondary-600"><?php echo $totalGames; ?> jogos encontrados</span>

                </div>

                <!-- Games Grid -->
                
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="gamesGrid">
                    
                    
<?php


// Capturar o filtro via GET
$filter = isset($_GET['filter']) ? $_GET['filter'] : '';

// Iniciar a consulta SQL
$query = "SELECT * FROM jogos";

// Se houver um filtro, aplicá-lo na consulta
if ($filter && $filter !== 'all') {
    // Filtro de gênero, fazendo a busca por LIKE
    $query .= " WHERE genres LIKE :filter";
}

// Preparar e executar a consulta
$stmt = $pdo->prepare($query);

// Se houver um filtro, aplicá-lo na consulta
if ($filter && $filter !== 'all') {
    $filterValue = '%' . ucfirst($filter) . '%'; // Capitaliza o filtro para garantir correspondência (ex: "Ação" -> "Ação")
    $stmt->bindParam(':filter', $filterValue, PDO::PARAM_STR);
}

$stmt->execute();

// Verificar se existem jogos
if ($stmt->rowCount() > 0) {
    // Para cada jogo, criar o card
    while ($game = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $isFree = $game['price'] == 0 || strtolower($game['title']) == 'valorant';  // Ajuste conforme necessário
        $discountPercentage = 0;
        if ($game['originalPrice'] > 0 && $game['price'] < $game['originalPrice']) {
            $discountPercentage = round((($game['originalPrice'] - $game['price']) / $game['originalPrice']) * 100);
        }
        ?>
        <!-- Game Card -->
        <div class="card card-hover bg-surface rounded-gaming-lg overflow-hidden shadow-gaming transition-gaming transform hover:scale-105 cursor-pointer" onclick="openGameModal('<?php echo $game['id']; ?>')">
            <div class="relative">
                <div class="aspect-video overflow-hidden">
                    <img src="https://agar.advopack.net/uploads/<?php echo $game['image1']; ?>" alt="<?php echo $game['title']; ?>" class="w-full h-full object-cover transition-gaming hover:scale-110" onerror="this.src='https://images.unsplash.com/photo-1584824486509-112e4181ff6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; this.onerror=null;">
                </div>
                <!-- Desconto -->
                <?php if ($discountPercentage > 0): ?>
                    <div class="absolute top-2 left-2">
                        <span class="bg-error-500 text-white text-xs font-bold px-2 py-1 rounded">-<?php echo $discountPercentage; ?>%</span>
                    </div>
                <?php endif; ?>
                <!-- Grátis -->
                <?php if ($isFree): ?>
                    <div class="absolute top-2 left-2">
                        <span class="bg-success-500 text-white text-xs font-bold px-2 py-1 rounded">GRÁTIS</span>
                    </div>
                <?php endif; ?>
            </div>

            <div class="p-4">
                <h3 class="font-poppins font-semibold text-primary-900 mb-2 line-clamp-2"><?php echo $game['title']; ?></h3>
                <p class="text-secondary-600 text-sm mb-3 line-clamp-2"><?php echo $game['description']; ?></p>
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center space-x-1">
                        <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                        <span class="text-sm font-medium text-primary-900"><?php echo $game['rating']; ?></span>
                        <span class="text-xs text-secondary-500">(<?php echo $game['reviews']; ?>)</span>
                    </div>
                    <div class="flex flex-wrap gap-1">
                        <?php
                        // Mostrar gêneros
                        $genres = explode(',', $game['genres']);
                        foreach ($genres as $genre) {
                            echo '<span class="bg-accent-100 text-accent-700 text-xs px-2 py-1 rounded">' . trim($genre) . '</span>';
                        }
                        ?>
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                        <?php if ($isFree): ?>
                            <span class="text-xl font-bold text-success-600">Gratuito</span>
                        <?php else: ?>
                            <span class="text-xl font-bold text-primary-900">R$ <?php echo number_format($game['price'], 2, ',', '.'); ?></span>
                            <?php if ($game['originalPrice'] > 0): ?>
                                <span class="text-sm text-secondary-400 line-through">R$ <?php echo number_format($game['originalPrice'], 2, ',', '.'); ?></span>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                    <!-- Botão -->
                    <button class="bg-accent-500 hover:bg-accent-600 text-white px-4 py-2 rounded-gaming text-sm font-medium transition-gaming">
                        <?php echo $isFree ? 'Jogar' : 'Comprar'; ?>
                    </button>
                </div>
            </div>
        </div>
        <?php
    }
} else {
    echo "<p>Nenhum jogo encontrado.</p>";
}
?>





<?php


// Consulta SQL para buscar os jogos
$query = "SELECT * FROM jogos";
$result = $pdo->query($query);

// Inicializa um array para armazenar os dados dos jogos
$gamesData = [];

if ($result->rowCount() > 0) {
    while ($game = $result->fetch(PDO::FETCH_ASSOC)) {
        $gamesData[$game['id']] = [
            'title' => $game['title'],
            'price' => number_format($game['price'], 2, ',', '.'),
            'originalPrice' => $game['originalPrice'] ? number_format($game['originalPrice'], 2, ',', '.') : null,
            'rating' => $game['rating'],
            'reviews' => $game['reviews'],
            'description' => $game['description'],
            'features' => explode(',', $game['features']), // Supondo que as features sejam separadas por vírgulas
            'genres' => explode(',', $game['genres']), // Supondo que os gêneros sejam separados por vírgulas
            'developer' => $game['developer'],
            'releaseDate' => $game['releaseDate'],
            'platforms' => explode(',', $game['platforms']), // Supondo que as plataformas sejam separadas por vírgulas
            'systemRequirements' => [
                'minimum' => $game['systemRequirements'],
                'recommended' => $game['systemRequirements'] // Adapte conforme necessário
            ],
            'image1' => $game['image1']
        ];
    }
}

// Converte o array PHP para JSON
$gamesDataJson = json_encode($gamesData);
?>

    <!-- JavaScript -->
    <script>
       // Coloca os dados dos jogos dentro de uma variável JavaScript
const gameData = <?php echo $gamesDataJson; ?>;

// Função para abrir o modal com os dados do jogo
function openGameModal(gameId) {
    const modal = document.getElementById('gameModal');
    const modalTitle = document.getElementById('modalTitle');
    const modalContent = document.getElementById('modalContent');

    const game = gameData[gameId];

    if (!game) return;

    modalTitle.textContent = game.title;

    modalContent.innerHTML = `
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Game Images -->
            <div>
                <div class="aspect-video rounded-gaming overflow-hidden mb-4">
                    <img src="https://agar.advopack.net/uploads/${game.image1}" alt="${game.title}" class="w-full h-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1584824486509-112e4181ff6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; this.onerror=null;">
 </div>
            </div>

            <!-- Game Info -->
            <div>
                <!-- Price and Rating -->
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center space-x-2">
                        <span class="text-3xl font-bold text-primary-900">${game.price}</span>
                        ${game.originalPrice ? `<span class="text-lg text-secondary-400 line-through">${game.originalPrice}</span>` : ''}
                    </div>
                    <div class="flex items-center space-x-1">
                        <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                        <span class="text-lg font-medium text-primary-900">${game.rating}</span>
                        <span class="text-secondary-500">(${game.reviews})</span>
                    </div>
                </div>

                <!-- Genres -->
                <div class="flex flex-wrap gap-2 mb-6">
                    ${game.genres.map(genre => `
                        <span class="bg-accent-100 text-accent-700 px-3 py-1 rounded-gaming text-sm font-medium">${genre}</span>
                    `).join('')}
                </div>

                <!-- Description -->
                <p class="text-secondary-600 mb-6 leading-relaxed">${game.description}</p>

                <!-- Features -->
                <div class="mb-6">
                    <h4 class="font-poppins font-semibold text-primary-900 mb-3">Características Principais:</h4>
                    <ul class="space-y-2">
                        ${game.features.map(feature => `
                            <li class="flex items-center space-x-2">
                                <svg class="w-4 h-4 text-success-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                <span class="text-secondary-700">${feature}</span>
                            </li>
                        `).join('')}
                    </ul>
                </div>

                <!-- Game Details -->
                <div class="grid grid-cols-2 gap-4 mb-6 text-sm">
                    <div>
                        <span class="font-medium text-secondary-700">Desenvolvedor:</span>
                        <p class="text-secondary-600">${game.developer}</p>
                    </div>
                    <div>
                        <span class="font-medium text-secondary-700">Lançamento:</span>
                        <p class="text-secondary-600">${game.releaseDate}</p>
                    </div>
                    <div class="col-span-2">
                        <span class="font-medium text-secondary-700">Plataformas:</span>
                        <p class="text-secondary-600">${game.platforms.join(', ')}</p>
                    </div>
                </div>

                <!-- System Requirements -->
                <div class="mb-8">
                    <h4 class="font-poppins font-semibold text-primary-900 mb-3">Requisitos do Sistema:</h4>
                    <div class="bg-secondary-50 rounded-gaming p-4 space-y-3">
                        <div>
                            <span class="font-medium text-secondary-700">Mínimo:</span>
                            <p class="text-sm text-secondary-600">${game.systemRequirements.minimum}</p>
                        </div>
                        <div>
                            <span class="font-medium text-secondary-700">Recomendado:</span>
                            <p class="text-sm text-secondary-600">${game.systemRequirements.recommended}</p>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex space-x-4">
                    <button class="flex-1 bg-accent-500 hover:bg-accent-600 text-white font-semibold py-3 px-6 rounded-gaming transition-gaming">
                        Comprar Agora
                    </button>
                    <button class="bg-secondary-100 hover:bg-secondary-200 text-secondary-700 font-semibold py-3 px-6 rounded-gaming transition-gaming">
                        Adicionar à Lista
                    </button>
                </div>
            </div>
        </div>
    `;

    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

// Função para fechar o modal
function closeGameModal() {
    const modal = document.getElementById('gameModal');
    modal.classList.add('hidden');
    document.body.style.overflow = 'auto';
}

// Fechar o modal ao clicar fora
document.getElementById('gameModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeGameModal();
    }
});
    </script>
                    
                    
                    

                  
                    <!-- Game Card 8 
                    <div class="card card-hover bg-surface rounded-gaming-lg overflow-hidden shadow-gaming transition-gaming transform hover:scale-105 cursor-pointer" onclick="openGameModal('rocket-league')">
                        <div class="relative">
                            <div class="aspect-video overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1559313910-94b027ad7bfe" alt="Rocket League - Jogo de futebol com carros" class="w-full h-full object-cover transition-gaming hover:scale-110" onerror="this.src='https://images.unsplash.com/photo-1584824486509-112e4181ff6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; this.onerror=null;">
                            </div>
                            <div class="absolute top-2 left-2">
                                <span class="bg-success-500 text-white text-xs font-bold px-2 py-1 rounded">GRÁTIS</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <button class="p-2 bg-black/50 rounded-full text-white hover:bg-accent-500 transition-gaming">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-poppins font-semibold text-primary-900 mb-2 line-clamp-2">Rocket League</h3>
                            <p class="text-secondary-600 text-sm mb-3 line-clamp-2">Futebol com carros! Combine futebol com condução em uma das experiências multiplayer mais únicas e emocionantes já criadas.</p>
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center space-x-1">
                                    <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                    </svg>
                                    <span class="text-sm font-medium text-primary-900">4.4</span>
                                    <span class="text-xs text-secondary-500">(4,321)</span>
                                </div>
                                <div class="flex flex-wrap gap-1">
                                    <span class="bg-accent-100 text-accent-700 text-xs px-2 py-1 rounded">Esportes</span>
                                    <span class="bg-accent-100 text-accent-700 text-xs px-2 py-1 rounded">Competitivo</span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <span class="text-xl font-bold text-success-600">Gratuito</span>
                                </div>
                                <button class="bg-success-500 hover:bg-success-600 text-white px-4 py-2 rounded-gaming text-sm font-medium transition-gaming">
                                    Jogar
                                </button>
                            </div>
                        </div>
                    </div>
                </div> -->

            
                <!-- Load More Button -->
<div class="text-center mt-12">
    <button class="bg-accent-500 hover:bg-accent-600 text-white font-semibold py-3 px-8 rounded-gaming shadow-gaming transition-gaming transform hover:scale-105" onclick="window.location.reload();">
        Carregar Mais Jogos
    </button>
</div>

            </div>
        </section>

        <!-- Trending Section -->
        <section class="py-16 bg-gradient-to-r from-primary-900 to-secondary-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-poppins font-bold text-white mb-4">Tendências da Semana</h2>
                    <p class="text-secondary-300 text-lg">Os jogos mais populares entre nossa comunidade</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- Trending Game 1 -->
                    <div class="bg-surface/10 backdrop-blur-sm rounded-gaming-lg p-6 border border-primary-200/20 text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-accent-400 to-accent-600 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-2xl font-bold text-white">#1</span>
                        </div>
                        <h3 class="text-xl font-poppins font-bold text-white mb-2">Cyberpunk 2077</h3>
                        <p class="text-secondary-300 mb-4">+45% de interesse esta semana</p>
                        <div class="flex items-center justify-center space-x-1 mb-4">
                            <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                            <span class="text-white font-medium">4.2</span>
                        </div>
                        <button class="bg-accent-500 hover:bg-accent-600 text-white px-6 py-2 rounded-gaming font-medium transition-gaming">
                            Ver Detalhes
                        </button>
                    </div>

                    <!-- Trending Game 2 -->
                    <div class="bg-surface/10 backdrop-blur-sm rounded-gaming-lg p-6 border border-primary-200/20 text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-secondary-400 to-secondary-600 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-2xl font-bold text-white">#2</span>
                        </div>
                        <h3 class="text-xl font-poppins font-bold text-white mb-2">The Witcher 3</h3>
                        <p class="text-secondary-300 mb-4">+32% de interesse esta semana</p>
                        <div class="flex items-center justify-center space-x-1 mb-4">
                            <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                            <span class="text-white font-medium">4.9</span>
                        </div>
                        <button class="bg-accent-500 hover:bg-accent-600 text-white px-6 py-2 rounded-gaming font-medium transition-gaming">
                            Ver Detalhes
                        </button>
                    </div>

                    <!-- Trending Game 3 -->
                    <div class="bg-surface/10 backdrop-blur-sm rounded-gaming-lg p-6 border border-primary-200/20 text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-warning-400 to-warning-600 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-2xl font-bold text-white">#3</span>
                        </div>
                        <h3 class="text-xl font-poppins font-bold text-white mb-2">Valorant</h3>
                        <p class="text-secondary-300 mb-4">+28% de interesse esta semana</p>
                        <div class="flex items-center justify-center space-x-1 mb-4">
                            <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                            <span class="text-white font-medium">4.6</span>
                        </div>
                        <button class="bg-accent-500 hover:bg-accent-600 text-white px-6 py-2 rounded-gaming font-medium transition-gaming">
                            Ver Detalhes
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Game Detail Modal -->
    <div id="gameModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-surface rounded-gaming-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
                <!-- Modal Header -->
                <div class="flex items-center justify-between p-6 border-b border-secondary-200">
                    <h2 id="modalTitle" class="text-2xl font-poppins font-bold text-primary-900">Detalhes do Jogo</h2>
                    <button onclick="closeGameModal()" class="text-secondary-400 hover:text-secondary-600 transition-gaming">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <!-- Modal Content -->
                <div id="modalContent" class="p-6">
                    <!-- Content will be dynamically loaded -->
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="relative z-10 bg-primary-900/95 backdrop-blur-sm border-t border-primary-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- Company Info -->
                <div class="col-span-1 md:col-span-2">
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-8 h-8 bg-gradient-to-br from-accent-400 to-accent-600 rounded-lg flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="text-xl font-poppins font-bold text-white">GameStore<span class="text-accent-400">+</span></span>
                    </div>
                    <p class="text-secondary-300 mb-4 leading-relaxed">
                        Sua plataforma premium para descobrir, comprar e jogar os melhores games. Conectamos gamers apaixonados com experiências únicas e uma comunidade vibrante.
                    </p>
                    <div class="flex space-x-4">
                        <a href="javascript:void(0)" class="text-secondary-400 hover:text-accent-400 transition-gaming">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"/>
                            </svg>
                        </a>
                        <a href="javascript:void(0)" class="text-secondary-400 hover:text-accent-400 transition-gaming">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"/>
                            </svg>
                        </a>
                        <a href="javascript:void(0)" class="text-secondary-400 hover:text-accent-400 transition-gaming">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M12.017 0C18.067 0 20.017 1.95 20.017 8v4c0 6.05-1.95 8-8 8h-4c-6.05 0-8-1.95-8-8V8c0-6.05 1.95-8 8-8h4zm-2 5a5 5 0 100 10 5 5 0 000-10zm6.5-.25a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zM10.017 7a3 3 0 110 6 3 3 0 010-6z" clip-rule="evenodd"/>
                            </svg>
                        </a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div>
                    <h3 class="text-white font-poppins font-semibold mb-4">Links Rápidos</h3>
                    <ul class="space-y-2">
                        <li><a href="game_feed_dashboard.html" class="text-secondary-300 hover:text-accent-400 transition-gaming">Jogos</a></li>
                        <li><a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming">Ofertas</a></li>
                        <li><a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming">Lançamentos</a></li>
                        <li><a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming">Comunidade</a></li>
                        <li><a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming">Suporte</a></li>
                    </ul>
                </div>

                <!-- Support -->
                <div>
                    <h3 class="text-white font-poppins font-semibold mb-4">Suporte</h3>
                    <ul class="space-y-2">
                        <li><a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming">Central de Ajuda</a></li>
                        <li><a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming">Contato</a></li>
                        <li><a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming">Política de Privacidade</a></li>
                        <li><a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming">Termos de Uso</a></li>
                        <li><a href="javascript:void(0)" class="text-secondary-300 hover:text-accent-400 transition-gaming">Reembolsos</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-primary-700 mt-8 pt-8 text-center">
                <p class="text-secondary-400 text-sm">
                    © 2025 GameStore+. Todos os direitos reservados. | Desenvolvido com ❤️ para gamers brasileiros
                </p>
            </div>
        </div>
    </footer>



   
<script id="dhws-dataInjector" src="../public/dhws-data-injector.js"></script>
</body>
</html>