<?php
// index.php
require 'config/db.php';
require __DIR__ . '/addons/game_system/functions.php'; 
require __DIR__ . '/addons/game_system/hero_addon.php'; 


$promo = get_hero_promo($pdo);

// Lógica de juegos (Directorio)
try {
    $stmt = $pdo->prepare("SELECT id, name, slug FROM games ORDER BY name ASC");
    $stmt->execute();
    $all_games = $stmt->fetchAll(PDO::FETCH_ASSOC);

    $grouped_games = [];
    foreach ($all_games as $game) {
        $first_letter = strtoupper(substr($game['name'], 0, 1));
        if (!preg_match('/[A-Z]/', $first_letter)) { $first_letter = '#'; }
        $grouped_games[$first_letter][] = $game;
    }
} catch (PDOException $e) {
    die("Error al cargar el directorio.");
}

include 'includes/header.php'; 
?>

<style>
    .fun-layout { display: flex; gap: 40px; margin-top: 30px; position: relative; padding-bottom: 100px; max-width: 1400px; margin-inline: auto; }
    
    /* Directorio & ABC */
    .fun-abc { width: 40px; position: sticky; top: 100px; height: fit-content; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
    .abc-link { color: var(--text-gray); font-size: 12px; font-weight: 900; text-decoration: none; text-align: center; transition: 0.2s; opacity: 0.4; }
    .abc-link:hover { color: var(--primary); opacity: 1; transform: scale(1.4); }

    /* Z-INDEX alto para que el Hero Promo no tape los clicks */
    .fun-directory { flex: 1; position: relative; z-index: 150; } 
    .game-group { margin-bottom: 60px; scroll-margin-top: 110px; position: relative; }
    .letter-title { font-family: 'Syncopate', sans-serif; font-size: 22px; color: var(--primary); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 30px; }
    
    .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 30px; }
    .game-item { position: relative; z-index: 10; }
    .game-item h4 { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
    
    .cat-links { position: relative; z-index: 20; }
    .cat-links a { 
        display: block; 
        font-size: 13px; 
        color: var(--text-gray); 
        text-decoration: none; 
        margin-bottom: 8px; 
        transition: 0.2s; 
        padding: 2px 0;
    }
    .cat-links a:hover { color: var(--primary); padding-left: 8px; }

    /* --- SECCIÓN HERO PROMO --- */
    .fun-promo { 
        width: 580px; 
        position: sticky; 
        top: 100px; 
        height: fit-content; 
        z-index: 50; 
        pointer-events: none; 
    }
    
    .promo-container { position: relative; width: 100%; height: 580px; pointer-events: none; }
    .promo-circle, .stat-badge, .promo-container a, .promo-overlay { pointer-events: auto; }

    .promo-circle {
        width: 580px; height: 580px;
        background: url('<?php echo htmlspecialchars($promo['image_url']); ?>');
        background-size: cover; background-position: center;
        border-radius: 50%; border: 2px solid var(--border);
        position: relative; overflow: hidden;
        box-shadow: 0 25px 60px rgba(0,0,0,0.8);
        transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .promo-circle:hover { transform: scale(1.02) rotate(1deg); border-color: var(--primary); }

    .promo-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(45deg, rgba(0,0,0,0.85) 20%, transparent 80%);
        display: flex; flex-direction: column; justify-content: center; padding: 60px;
    }
    
    .promo-title { font-family: 'Syncopate', sans-serif; font-size: 48px; color: #fff; line-height: 1; transform: rotate(-5deg); text-shadow: 4px 4px 0px #000; margin-bottom: 10px; text-transform: uppercase; }
    .promo-subtitle { font-size: 14px; letter-spacing: 6px; color: var(--primary); font-weight: 900; transform: rotate(-5deg); margin-left: 10px; }

    .promo-stats { 
        display: flex; gap: 20px; justify-content: center; 
        position: absolute; bottom: -30px; left: 0; right: 0;
        z-index: 100;
        pointer-events: none;
    }

    .stat-badge { 
        width: 100px; height: 100px; background: rgba(13, 17, 23, 0.9); 
        backdrop-filter: blur(10px); border: 1px solid rgba(0, 255, 136, 0.2); 
        border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; 
        color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: floating 4s ease-in-out infinite; 
        pointer-events: auto;
    }

    .stat-badge i { font-size: 20px; margin-bottom: 6px; color: var(--primary); }
    @keyframes floating { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } }

    @media (max-width: 1300px) {
        .fun-promo { width: 400px; }
        .promo-circle { width: 400px; height: 400px; }
        .promo-title { font-size: 32px; }
    }

    @media (max-width: 1100px) {
        .fun-layout { flex-direction: column; }
        .fun-abc { display: none; }
        .fun-promo { width: 100%; position: relative; top: 0; margin-bottom: 60px; pointer-events: auto; order: -1; }
        .promo-circle { width: 100%; height: 400px; border-radius: 20px; }
    }
</style>

<div class="pa-container">
    <div class="fun-layout">
        
        <aside class="fun-abc">
            <a href="#letter-#" class="abc-link">#</a>
            <?php foreach(range('A', 'Z') as $char): ?>
                <a href="#letter-<?php echo $char; ?>" class="abc-link"><?php echo $char; ?></a>
            <?php endforeach; ?>
        </aside>

        <main class="fun-directory">
            <?php foreach($grouped_games as $letter => $games): ?>
                <section class="game-group" id="letter-<?php echo $letter; ?>">
                    <div class="letter-title"><?php echo $letter; ?></div>
                    <div class="games-grid">
                        <?php foreach($games as $game): ?>
                            <div class="game-item">
                                <h4><?php echo htmlspecialchars($game['name']); ?></h4>
                                <div class="cat-links">
                                    <?php 
                                    // LÓGICA DE CATEGORÍAS GLOBALES + ESPECÍFICAS
                                    $st_cat = $pdo->prepare("
                                        SELECT name, slug FROM categories 
                                        WHERE game_id = ? OR game_id IS NULL 
                                        ORDER BY (game_id IS NULL) DESC, name ASC 
                                        LIMIT 8
                                    ");
                                    $st_cat->execute([$game['id']]);
                                    $categories = $st_cat->fetchAll();
                                    
                                    if($categories):
                                        foreach($categories as $cat): ?>
                                            <a href="catalog.php?game=<?php echo urlencode($game['slug']); ?>&category=<?php echo urlencode($cat['slug']); ?>">
                                                <i class="fa-solid fa-caret-right" style="font-size: 10px; opacity: 0.3;"></i> 
                                                <?php echo htmlspecialchars($cat['name']); ?>
                                            </a>
                                        <?php endforeach; 
                                    else: ?>
                                        <span style="color:#444; font-size:11px;">No tags available</span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </section>
            <?php endforeach; ?>
        </main>

        <aside class="fun-promo">
            <div class="promo-container">
                <?php 
                $slug = isset($promo['target_game_slug']) ? trim($promo['target_game_slug']) : '';
                $has_link = (!empty($slug) && $slug !== '#');
                ?>

                <?php if($has_link): ?>
                    <a href="catalog.php?game=<?php echo urlencode($slug); ?>" style="text-decoration:none; display:block;">
                <?php endif; ?>

                    <div class="promo-circle" style="cursor: <?php echo $has_link ? 'pointer' : 'default'; ?>;">
                        <div class="promo-overlay">
                            <div class="promo-title"><?php echo nl2br(htmlspecialchars($promo['title'])); ?></div>
                            <div class="promo-subtitle"><?php echo htmlspecialchars($promo['subtitle']); ?></div>
                        </div>
                    </div>

                <?php if($has_link): ?>
                    </a>
                <?php endif; ?>
                
                <div class="promo-stats">
                    <div class="stat-badge"><i class="fa-solid fa-user-shield"></i><span>Secure</span></div>
                    <div class="stat-badge"><i class="fa-solid fa-bolt"></i><span>Fast</span></div>
                    <div class="stat-badge"><i class="fa-solid fa-award"></i><span>Quality</span></div>
                </div>
            </div>
        </aside>

    </div>
</div>

<?php include 'includes/footer.php'; ?>