<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Análise do Catálogo de Jogos - Game Store Admin</title>
    <link rel="stylesheet" href="../css/main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <script type="module" async src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Fgamestore9284back.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="bg-background font-inter">
    <!-- Sidebar Navigation -->
    <div class="flex min-h-screen">
        <aside class="w-64 bg-surface shadow-elevated border-r border-border-light">
            <div class="p-6">
                <!-- Logo -->
                <div class="flex items-center space-x-3 mb-8">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                        </svg>
                    </div>
                    <div>
                        <h1 class="text-lg font-semibold text-text-primary">GameStore</h1>
                        <p class="text-xs text-text-secondary">Admin Dashboard</p>
                    </div>
                </div>

                <!-- Navigation Menu -->
                <nav class="space-y-2">
                    <a href="admin.html" class="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-secondary-50 hover:text-text-primary rounded-lg transition-smooth">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>
                        </svg>
                        <span>Visão Geral</span>
                    </a>
                    <a href="GestaoUser.php" class="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-secondary-50 hover:text-text-primary rounded-lg transition-smooth">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                        <span>Análise de Usuários</span>
                    </a>
                    <a href="sales_performance_hub.html" class="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-secondary-50 hover:text-text-primary rounded-lg transition-smooth">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                        </svg>
                        <span>Performance de Vendas</span>
                    </a>
                    <a href="game_catalog_analytics.php" class="flex items-center space-x-3 px-4 py-3 bg-primary-50 text-primary-700 rounded-lg font-medium">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM21 17a2 2 0 11-4 0 2 2 0 014 0zM7 12h14l-1-5H6l-1 5z"/>
                        </svg>
                        <span>Catálogo de Jogos</span>
                    </a>
                </nav>
            </div>

            <!-- User Profile -->
            <div class="absolute bottom-0 left-0 right-0 p-6 border-t border-border-light">
                <div class="flex items-center space-x-3">
                    <img src="https://img.rocket.new/generatedImages/rocket_gen_img_117dbac63-1763295212937.png" 
                         alt="Foto do perfil do administrador" 
                         class="w-10 h-10 rounded-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 class="flex-1">
                        <p class="text-sm font-medium text-text-primary">Carlos Silva</p>
                        <p class="text-xs text-text-secondary">Administrador</p>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 overflow-auto">
            <!-- Header -->
            <header class="bg-surface border-b border-border-light px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-semibold text-text-primary">Análise do Catálogo de Jogos</h1>
                        <p class="text-text-secondary">Insights de performance, popularidade e otimização do catálogo</p>
                    </div>
                    
                    <!-- Global Controls -->
                    <div class="flex items-center space-x-4">
                        <!-- Search -->
                        <div class="relative">
                            <input type="text" 
                                   placeholder="Buscar jogos..." 
                                   class="pl-10 pr-4 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 w-64">
                            <svg class="w-4 h-4 text-text-secondary absolute left-3 top-3" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </div>
                        
                        <!-- Refresh Button -->
                        <button class="flex items-center space-x-2 px-3 py-2 bg-primary text-white rounded-lg hover:bg-primary-700 transition-smooth">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            <span class="text-sm">Atualizar</span>
                        </button>
                        
                        <!-- Export Button -->
                        <button class="flex items-center space-x-2 px-3 py-2 border border-border rounded-lg hover:bg-secondary-50 transition-smooth">
                            <svg class="w-4 h-4 text-text-secondary" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 16l-6-6h4V4h4v6h4l-6 6zM20 18v2H4v-2h16z"/>
                            </svg>
                            <span class="text-sm text-text-secondary">Exportar</span>
                        </button>
                    </div>
                </div>
            </header>

           <!-- Dashboard Content -->
<div class="p-6">
    <!-- Filter Panel -->
    <div class="card p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-text-primary">Opções</h3>
         
        </div>

       

        <!-- Botões de Ação -->
        <div class="mt-6 flex justify-between">
            <button 
                class="bg-primary text-white px-6 py-2 rounded-lg text-sm hover:bg-primary-700 transition-smooth"
                onclick="openAddGameModal()">Cadastrar Novo Jogo</button>

            <!-- Outros botões -->
            <button 
                class="bg-secondary text-white px-6 py-2 rounded-lg text-sm hover:bg-secondary-700 transition-smooth">
                Outros Ações
            </button>
        </div>
    </div>
</div>




<!-- Modal de Cadastro de Jogo -->
<div id="addGameModal" class="custom-modal hidden">
    <div class="custom-modal-content">
        <h3 class="text-xl font-semibold text-text-primary mb-4 text-center">Cadastrar Novo Jogo</h3>

        <form id="addGameForm" enctype="multipart/form-data" class="space-y-4" onsubmit="return validateForm()">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label for="title" class="block text-sm font-medium text-text-secondary">Título</label>
                    <input type="text" id="title" name="title" class="input-field" required>
                </div>
                <div>
                    <label for="price" class="block text-sm font-medium text-text-secondary">Preço</label>
                    <input type="number" id="price" name="price" class="input-field" required>
                </div>
                <div>
                    <label for="originalPrice" class="block text-sm font-medium text-text-secondary">Preço Original</label>
                    <input type="number" id="originalPrice" name="originalPrice" class="input-field" required>
                </div>
                <div class="col-span-2">
                    <label for="description" class="block text-sm font-medium text-text-secondary">Descrição</label>
                    <textarea id="description" name="description" class="input-field" required></textarea>
                </div>
                <div class="col-span-2">
                    <label for="features" class="block text-sm font-medium text-text-secondary">Características</label>
                    <textarea id="features" name="features" class="input-field"></textarea>
                </div>
                <div class="col-span-2">
                    <label for="genres" class="block text-sm font-medium text-text-secondary">Gêneros</label>
                    <input type="text" id="genres" name="genres" class="input-field" required>
                </div>
                <div class="col-span-2">
                    <label for="developer" class="block text-sm font-medium text-text-secondary">Desenvolvedor</label>
                    <input type="text" id="developer" name="developer" class="input-field" required>
                </div>
                <div class="col-span-2">
                    <label for="releaseDate" class="block text-sm font-medium text-text-secondary">Data de Lançamento</label>
                    <input type="date" id="releaseDate" name="releaseDate" class="input-field" required>
                </div>
                <div class="col-span-2">
                    <label for="platforms" class="block text-sm font-medium text-text-secondary">Plataformas</label>
                    <input type="text" id="platforms" name="platforms" class="input-field" required>
                </div>
                <div class="col-span-2">
                    <label for="systemRequirements" class="block text-sm font-medium text-text-secondary">Requisitos de Sistema</label>
                    <textarea id="systemRequirements" name="systemRequirements" class="input-field"></textarea>
                </div>

                <!-- Campos de upload das imagens (somente Imagem 1) -->
                <div class="col-span-2">
                    <label for="image1" class="block text-sm font-medium text-text-secondary">Imagem 1</label>
                    <input type="file" id="image1" name="images[]" class="input-field" accept="image/*">
                </div>
            </div>

            <div class="mt-4 flex justify-between">
                <button type="submit" class="btn-primary">Cadastrar</button>
                <button type="button" onclick="closeAddGameModal()" class="btn-secondary">Cancelar</button>
            </div>
        </form>
    </div>
</div>


<script>
// Função para validar o formulário
function validateForm() {
    let title = document.getElementById('title').value;
    let price = document.getElementById('price').value;
    let releaseDate = document.getElementById('releaseDate').value;
    let genres = document.getElementById('genres').value;
    let developer = document.getElementById('developer').value;

    // Verificar se os campos obrigatórios não estão vazios
    if (title === '' || price === '' || releaseDate === '' || genres === '' || developer === '') {
        alert('Por favor, preencha todos os campos obrigatórios.');
        return false;
    }

    // Verificar se a data de lançamento está no formato correto (YYYY-MM-DD)
    let datePattern = /^\d{4}-\d{2}-\d{2}$/;
    if (!releaseDate.match(datePattern)) {
        alert('Por favor, insira uma data válida no formato YYYY-MM-DD.');
        return false;
    }

    return true;
}

// Função para abrir a modal
function openAddGameModal() {
    document.getElementById('addGameModal').classList.add('show');
}

// Função para fechar a modal
function closeAddGameModal() {
    document.getElementById('addGameModal').classList.remove('show');
}

// Função para enviar os dados do formulário via AJAX
document.getElementById('addGameForm').addEventListener('submit', function(e) {
    e.preventDefault(); // Impede o envio tradicional do formulário

    var formData = new FormData(this); // Cria o objeto FormData com todos os dados do formulário

    fetch('salvar_jogo.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text()) // Resposta do servidor
    .then(data => {
        alert(data);  // Exibe a mensagem retornada do servidor (sucesso ou erro)
        closeAddGameModal(); // Fecha a modal
    })
    .catch(error => {
        console.error('Erro ao enviar o formulário:', error);
    });
});
</script>





<style>
    /* Modal Style */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    z-index: 1000;
    overflow: hidden;
    transition: visibility 0.3s ease;
}

.custom-modal.show {
    visibility: visible;
}

.custom-modal-content {
    background: white;
    border-radius: 8px;
    padding: 20px;
    width: 80%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.custom-modal-content h3 {
    font-size: 24px;
    color: #333;
}

.input-field {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.textarea {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 120px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid .col-span-2 {
    grid-column: span 2;
}

.btn-primary,
.btn-secondary {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.btn-primary {
    background-color: #007bff;
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    border: none;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Scrollbar */
.custom-modal-content::-webkit-scrollbar {
    width: 8px;
}

.custom-modal-content::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.custom-modal-content::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

</style>










               <?php
include_once($_SERVER['DOCUMENT_ROOT'] . '/db.php'); // Conexão com o banco de dados

// Consulta SQL para obter os dados necessários
$sql = "SELECT rating FROM jogos"; 
$stmt = $pdo->prepare($sql);
$stmt->execute();

// Armazene os resultados em um array
$jogos = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Calcular o total de jogos e a média das avaliações
$totalJogos = count($jogos);

// Calcular a média das avaliações
$totalAvaliacoes = 0;
foreach ($jogos as $jogo) {
    $totalAvaliacoes += $jogo['rating']; // Soma todas as avaliações
}

$mediaAvaliacoes = ($totalAvaliacoes > 0) ? number_format($totalAvaliacoes / $totalJogos, 1, ',', '.') : 0; // Média das avaliações
?>



<!-- KPI Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Total de Jogos -->
    <div class="card p-6">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-sm font-medium text-text-secondary">Total de Jogos</h3>
            <div class="w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM21 17a2 2 0 11-4 0 2 2 0 014 0zM7 12h14l-1-5H6l-1 5z"/>
                </svg>
            </div>
        </div>
        <div class="flex items-end justify-between">
            <div>
                <p class="text-2xl font-semibold text-text-primary font-data"><?php echo $totalJogos; ?></p>
                <div class="flex items-center mt-1">
                    <svg class="w-4 h-4 text-success-500 mr-1" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M7 14l5-5 5 5"/>
                    </svg>
                    <span class="text-sm text-success-600 font-medium">+<?php echo $totalJogos; ?> este mês</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Avaliação Média -->
    <div class="card p-6">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-sm font-medium text-text-secondary">Avaliação Média</h3>
            <div class="w-8 h-8 bg-accent-100 rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-accent-600" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                </svg>
            </div>
        </div>
        <div class="flex items-end justify-between">
            <div>
                <p class="text-2xl font-semibold text-text-primary font-data"><?php echo $mediaAvaliacoes; ?></p>
                <div class="flex items-center mt-1">
                    <svg class="w-4 h-4 text-success-500 mr-1" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M7 14l5-5 5 5"/>
                    </svg>
                    <span class="text-sm text-success-600 font-medium">+0,3 pontos</span>
                </div>
            </div>
        </div>
    </div>
</div>



<?php
include_once($_SERVER['DOCUMENT_ROOT'] . '/db.php'); // Inclui a conexão

// Consulta SQL para obter os 5 jogos com maior avaliação
$sql = "SELECT id, title, price, originalPrice, rating, reviews, genres, developer, image1, vendas 
        FROM jogos 
        ORDER BY rating DESC 
        LIMIT 5";  // Limita a 5 jogos com as maiores avaliações

$stmt = $pdo->prepare($sql); // Supondo que $pdo seja a conexão no db.php
$stmt->execute();

// Armazene os resultados em um array
$jogos = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<!-- Main Content Grid -->
<div class="grid grid-cols-1 xl:grid-cols-12 gap-6 mb-8">
    <!-- Game Popularity Ranking Table -->
    <div class="xl:col-span-9">
        <div class="card p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-text-primary">Ranking de Popularidade</h3>
                <div class="flex items-center space-x-2">
                    <button class="px-3 py-1 text-sm bg-primary-50 text-primary-700 rounded-lg">
                        Vendas
                    </button>
                    <button class="px-3 py-1 text-sm text-text-secondary hover:bg-secondary-50 rounded-lg">
                        Avaliação
                    </button>
                    <button class="px-3 py-1 text-sm text-text-secondary hover:bg-secondary-50 rounded-lg">
                        Receita
                    </button>
                </div>
            </div>
            
            <!-- Table -->
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-border-light">
                            <th class="text-left py-3 px-4 text-sm font-medium text-text-secondary">Posição</th>
                            <th class="text-left py-3 px-4 text-sm font-medium text-text-secondary">Jogo</th>
                            <th class="text-left py-3 px-4 text-sm font-medium text-text-secondary">Categoria</th>
                            <th class="text-left py-3 px-4 text-sm font-medium text-text-secondary">Preço</th>
                            <th class="text-left py-3 px-4 text-sm font-medium text-text-secondary">Vendas</th>
                            <th class="text-left py-3 px-4 text-sm font-medium text-text-secondary">Avaliação</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border-light">
                        <?php foreach ($jogos as $index => $jogo): ?>
                        <tr class="hover:bg-secondary-50 transition-smooth">
                            <td class="py-4 px-4">
                                <div class="flex items-center">
                                    <span class="w-6 h-6 bg-accent text-white text-xs font-semibold rounded-full flex items-center justify-center"><?php echo $index + 1; ?></span>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <div class="flex items-center space-x-3">
                                    <img src="https://agar.advopack.net/uploads/<?php echo htmlspecialchars($jogo['image1']); ?>" alt="Capa do jogo <?php echo htmlspecialchars($jogo['title']); ?>" class="w-12 h-12 rounded-lg object-cover">

                                    <div>
                                        <p class="text-sm font-medium text-text-primary"><?php echo htmlspecialchars($jogo['title']); ?></p>
                                        <p class="text-xs text-text-secondary"><?php echo htmlspecialchars($jogo['developer']); ?></p>
                                    </div>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="px-2 py-1 text-xs bg-primary-100 text-primary-700 rounded-full"><?php echo htmlspecialchars($jogo['genres']); ?></span>
                            </td>
                            <td class="py-4 px-4">
                                <span class="text-sm font-medium text-text-primary font-data">R$ <?php echo number_format($jogo['price'], 2, ',', '.'); ?></span>
                            </td>
                            <td class="py-4 px-4">
                                <span class="text-sm font-medium text-text-primary font-data"><?php echo $jogo['vendas']; ?></span>
                            </td>
                            <td class="py-4 px-4">
                                <div class="flex items-center space-x-1">
                                    <span class="text-sm font-medium text-text-primary font-data"><?php echo $jogo['rating']; ?></span>
                                    <svg class="w-4 h-4 text-accent" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                                    </svg>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


                    <!-- Right Panel -->
                    <div class="xl:col-span-3 space-y-6">
                        <!-- Top Performing Games Leaderboard -->
                        <div class="card p-6">
                            <h3 class="text-lg font-semibold text-text-primary mb-4">Top Performers</h3>
                            <div class="space-y-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 bg-accent text-white text-xs font-semibold rounded-full flex items-center justify-center">1</div>
                                    <div class="flex-1">
                                        <p class="text-sm font-medium text-text-primary">Cyberpunk 2077</p>
                                        <p class="text-xs text-text-secondary">R$ 169.203 em receita</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 bg-secondary-400 text-white text-xs font-semibold rounded-full flex items-center justify-center">2</div>
                                    <div class="flex-1">
                                        <p class="text-sm font-medium text-text-primary">FIFA 24</p>
                                        <p class="text-xs text-text-secondary">R$ 186.777 em receita</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 bg-secondary-400 text-white text-xs font-semibold rounded-full flex items-center justify-center">3</div>
                                    <div class="flex-1">
                                        <p class="text-sm font-medium text-text-primary">Call of Duty</p>
                                        <p class="text-xs text-text-secondary">R$ 179.149 em receita</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- New Release Tracking -->
                        <div class="card p-6">
                            <h3 class="text-lg font-semibold text-text-primary mb-4">Novos Lançamentos</h3>
                            <div class="space-y-4">
                                <div class="p-3 bg-primary-50 rounded-lg">
                                    <div class="flex items-center justify-between mb-2">
                                        <p class="text-sm font-medium text-text-primary">Spider-Man 2</p>
                                        <span class="px-2 py-1 text-xs bg-success-100 text-success-700 rounded-full">Novo</span>
                                    </div>
                                    <p class="text-xs text-text-secondary mb-2">Lançado há 3 dias</p>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm font-medium text-text-primary font-data">127 vendas</span>
                                        <span class="text-xs text-success-600">+45% vs previsão</span>
                                    </div>
                                </div>

                                <div class="p-3 bg-warning-50 rounded-lg">
                                    <div class="flex items-center justify-between mb-2">
                                        <p class="text-sm font-medium text-text-primary">Forza Horizon 5</p>
                                        <span class="px-2 py-1 text-xs bg-warning-100 text-warning-700 rounded-full">Pré-venda</span>
                                    </div>
                                    <p class="text-xs text-text-secondary mb-2">Lança em 5 dias</p>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm font-medium text-text-primary font-data">89 pré-vendas</span>
                                        <span class="text-xs text-text-secondary">Meta: 150</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Price-to-Performance Scatter Plot -->
                <div class="card p-6 mb-8">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-text-primary">Correlação Preço vs Performance</h3>
                        <div class="flex items-center space-x-4">
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 bg-primary rounded-full"></div>
                                <span class="text-sm text-text-secondary">Alta Performance</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 bg-accent rounded-full"></div>
                                <span class="text-sm text-text-secondary">Média Performance</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 bg-error rounded-full"></div>
                                <span class="text-sm text-text-secondary">Baixa Performance</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Scatter Plot -->
                    <div class="h-80 bg-secondary-50 rounded-lg flex items-center justify-center relative overflow-hidden">
                        <svg class="w-full h-full" viewBox="0 0 800 320">
                            <!-- Grid Lines -->
                            <defs>
                                <pattern id="grid" width="40" height="32" patternUnits="userSpaceOnUse">
                                    <path d="M 40 0 L 0 0 0 32" fill="none" stroke="#E2E8F0" stroke-width="1"/>
                                </pattern>
                            </defs>
                            <rect width="100%" height="100%" fill="url(#grid)" />
                            
                            <!-- High Performance Games -->
                            <circle cx="150" cy="80" r="12" fill="#1E40AF" opacity="0.8"/>
                            <circle cx="200" cy="100" r="8" fill="#1E40AF" opacity="0.8"/>
                            <circle cx="350" cy="60" r="15" fill="#1E40AF" opacity="0.8"/>
                            <circle cx="400" cy="90" r="10" fill="#1E40AF" opacity="0.8"/>
                            <circle cx="500" cy="70" r="14" fill="#1E40AF" opacity="0.8"/>
                            
                            <!-- Medium Performance Games -->
                            <circle cx="100" cy="150" r="6" fill="#F59E0B" opacity="0.8"/>
                            <circle cx="250" cy="140" r="9" fill="#F59E0B" opacity="0.8"/>
                            <circle cx="300" cy="160" r="7" fill="#F59E0B" opacity="0.8"/>
                            <circle cx="450" cy="130" r="11" fill="#F59E0B" opacity="0.8"/>
                            <circle cx="600" cy="145" r="8" fill="#F59E0B" opacity="0.8"/>
                            
                            <!-- Low Performance Games -->
                            <circle cx="80" cy="220" r="4" fill="#EF4444" opacity="0.8"/>
                            <circle cx="180" cy="240" r="5" fill="#EF4444" opacity="0.8"/>
                            <circle cx="280" cy="230" r="6" fill="#EF4444" opacity="0.8"/>
                            <circle cx="380" cy="250" r="4" fill="#EF4444" opacity="0.8"/>
                            <circle cx="480" cy="235" r="7" fill="#EF4444" opacity="0.8"/>
                            <circle cx="580" cy="245" r="5" fill="#EF4444" opacity="0.8"/>
                            
                            <!-- Trend Line -->
                            <line x1="50" y1="200" x2="750" y2="120" stroke="#64748B" stroke-width="2" stroke-dasharray="5,5" opacity="0.6"/>
                        </svg>
                        
                        <!-- Axis Labels -->
                        <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 text-xs text-text-secondary">
                            Preço (R$)
                        </div>
                        <div class="absolute left-4 top-1/2 transform -translate-y-1/2 -rotate-90 text-xs text-text-secondary">
                            Performance (Vendas)
                        </div>
                    </div>
                </div>

                <!-- Catalog Health & Optimization -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- Catalog Health Section -->
                    <div class="card p-6">
                        <h3 class="text-lg font-semibold text-text-primary mb-4">Saúde do Catálogo</h3>
                        <div class="space-y-4">
                            <!-- Inventory Alerts -->
                            <div class="p-4 bg-warning-50 border border-warning-200 rounded-lg">
                                <div class="flex items-start space-x-3">
                                    <svg class="w-5 h-5 text-warning-600 mt-0.5" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                    </svg>
                                    <div>
                                        <p class="text-sm font-medium text-warning-800">Alerta de Estoque</p>
                                        <p class="text-xs text-warning-700">23 jogos com baixa rotatividade nos últimos 60 dias</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Pricing Recommendations -->
                            <div class="p-4 bg-primary-50 border border-primary-200 rounded-lg">
                                <div class="flex items-start space-x-3">
                                    <svg class="w-5 h-5 text-primary-600 mt-0.5" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                                    </svg>
                                    <div>
                                        <p class="text-sm font-medium text-primary-800">Recomendação de Preço</p>
                                        <p class="text-xs text-primary-700">15 jogos podem ter preços otimizados para aumentar vendas</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Seasonal Performance -->
                            <div class="p-4 bg-success-50 border border-success-200 rounded-lg">
                                <div class="flex items-start space-x-3">
                                    <svg class="w-5 h-5 text-success-600 mt-0.5" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <div>
                                        <p class="text-sm font-medium text-success-800">Tendência Sazonal</p>
                                        <p class="text-xs text-success-700">Jogos de ação têm 34% mais vendas no período atual</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Game Lifecycle Analysis -->
                    <div class="card p-6">
                        <h3 class="text-lg font-semibold text-text-primary mb-4">Análise do Ciclo de Vida</h3>
                        <div class="space-y-4">
                            <!-- Lifecycle Chart -->
                            <div class="h-32 bg-secondary-50 rounded-lg flex items-center justify-center relative overflow-hidden">
                                <svg class="w-full h-full" viewBox="0 0 400 128">
                                    <!-- Launch Phase -->
                                    <path d="M20,100 Q60,60 100,80" fill="none" stroke="#10B981" stroke-width="3"/>
                                    <text x="60" y="115" text-anchor="middle" class="text-xs fill-success-600">Lançamento</text>
                                    
                                    <!-- Growth Phase -->
                                    <path d="M100,80 Q140,40 180,50" fill="none" stroke="#F59E0B" stroke-width="3"/>
                                    <text x="140" y="115" text-anchor="middle" class="text-xs fill-accent-600">Crescimento</text>
                                    
                                    <!-- Maturity Phase -->
                                    <path d="M180,50 Q220,45 260,55" fill="none" stroke="#1E40AF" stroke-width="3"/>
                                    <text x="220" y="115" text-anchor="middle" class="text-xs fill-primary-600">Maturidade</text>
                                    
                                    <!-- Decline Phase -->
                                    <path d="M260,55 Q300,70 340,90" fill="none" stroke="#EF4444" stroke-width="3"/>
                                    <text x="300" y="115" text-anchor="middle" class="text-xs fill-error-600">Declínio</text>
                                </svg>
                            </div>

                            <!-- Optimization Suggestions -->
                            <div class="space-y-3">
                                <div class="flex items-start space-x-3">
                                    <div class="w-2 h-2 bg-success-500 rounded-full mt-2"></div>
                                    <div>
                                        <p class="text-sm font-medium text-text-primary">Fase de Lançamento</p>
                                        <p class="text-xs text-text-secondary">Aumentar visibilidade com promoções direcionadas</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-3">
                                    <div class="w-2 h-2 bg-accent rounded-full mt-2"></div>
                                    <div>
                                        <p class="text-sm font-medium text-text-primary">Fase de Crescimento</p>
                                        <p class="text-xs text-text-secondary">Manter preços premium e expandir marketing</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-3">
                                    <div class="w-2 h-2 bg-primary rounded-full mt-2"></div>
                                    <div>
                                        <p class="text-sm font-medium text-text-primary">Fase de Maturidade</p>
                                        <p class="text-xs text-text-secondary">Implementar descontos estratégicos</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-3">
                                    <div class="w-2 h-2 bg-error rounded-full mt-2"></div>
                                    <div>
                                        <p class="text-sm font-medium text-text-primary">Fase de Declínio</p>
                                        <p class="text-xs text-text-secondary">Considerar remoção ou liquidação</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Loading Indicator -->
    <div id="loadingIndicator" class="fixed top-4 right-4 bg-primary text-white px-4 py-2 rounded-lg shadow-lg hidden">
        <div class="flex items-center space-x-2">
            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="text-sm">Atualizando dados...</span>
        </div>
    </div>

    <script>
        // Simulate data refresh
        function refreshData() {
            const indicator = document.getElementById('loadingIndicator');
            indicator.classList.remove('hidden');
            
            setTimeout(() => {
                indicator.classList.add('hidden');
            }, 2000);
        }

        // Manual refresh button
        document.querySelector('button[class*="bg-primary"]').addEventListener('click', refreshData);

        // Game detail view simulation
        document.querySelectorAll('button[class*="text-primary"]').forEach(button => {
            button.addEventListener('click', function() {
                alert('Visualizando detalhes do jogo...');
            });
        });

        // Filter functionality simulation
        document.querySelectorAll('select').forEach(select => {
            select.addEventListener('change', function() {
                refreshData();
            });
        });

        // Search functionality simulation
        document.querySelector('input[type="text"]').addEventListener('input', function() {
            if (this.value.length > 2) {
                refreshData();
            }
        });
    </script>
<script id="dhws-dataInjector" src="../public/dhws-data-injector.js"></script>
</body>
</html>