<?php include_once __DIR__ . '/layout/header.php'; ?>

<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-white mb-2"><?= $pageTitle ?></h1>
        <p class="text-gray-400"><?= $pageDescription ?></p>
    </div>
    
    <!-- Search Bar -->
    <div class="mb-8">
        <div class="relative max-w-md mx-auto">
            <input type="text" id="categorySearch" placeholder="Search categories..." 
                   class="w-full bg-card-bg text-white border border-gray-800 rounded-lg px-4 py-3 pl-12 focus:outline-none focus:border-primary transition-colors">
            <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <?php foreach ($categories as $category): ?>
            <a href="/category/<?= $category['slug'] ?>" class="bg-card-bg rounded-xl p-6 hover:bg-card-hover transition-all border border-gray-800/50 hover:border-primary/50">
                <div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-gamepad text-primary text-xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-white mb-2"><?= htmlspecialchars($category['name']) ?></h3>
                <p class="text-gray-400 mb-4"><?= $category['game_count'] ?> games</p>
                <div class="flex justify-between items-center text-primary">
                    <span>Browse games</span>
                    <i class="fas fa-arrow-right"></i>
                </div>
            </a>
        <?php endforeach; ?>
    </div>
    
    <?php if ($totalPages > 1): ?>
    <div class="mt-8 flex justify-center">
        <div class="inline-flex rounded-full overflow-hidden shadow-lg">
            <?php if ($page > 1): ?>
                <a href="/categories?page=<?= $page - 1 ?>" class="px-4 py-2 text-sm font-medium text-white bg-card-bg hover:bg-card-hover transition-colors">
                    <i class="fas fa-chevron-left mr-1"></i> Previous
                </a>
            <?php else: ?>
                <span class="px-4 py-2 text-sm font-medium text-gray-500 bg-card-bg cursor-not-allowed">
                    <i class="fas fa-chevron-left mr-1"></i> Previous
                </span>
            <?php endif; ?>
            
            <span class="px-4 py-2 text-sm font-medium text-white bg-primary">
                Page <?= $page ?> of <?= $totalPages ?>
            </span>
            
            <?php if ($page < $totalPages): ?>
                <a href="/categories?page=<?= $page + 1 ?>" class="px-4 py-2 text-sm font-medium text-white bg-card-bg hover:bg-card-hover transition-colors">
                    Next <i class="fas fa-chevron-right ml-1"></i>
                </a>
            <?php else: ?>
                <span class="px-4 py-2 text-sm font-medium text-gray-500 bg-card-bg cursor-not-allowed">
                    Next <i class="fas fa-chevron-right ml-1"></i>
                </span>
            <?php endif; ?>
        </div>
    </div>
    <?php endif; ?>
</div>

<script>
// Search functionality
const searchInput = document.getElementById('categorySearch');
const categoryCards = document.querySelectorAll('.grid > a');

searchInput.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    
    categoryCards.forEach(card => {
        const categoryName = card.querySelector('h3').textContent.toLowerCase();
        
        if (categoryName.includes(searchTerm)) {
            card.style.display = '';
        } else {
            card.style.display = 'none';
        }
    });
});
</script>

<?php include_once __DIR__ . '/layout/footer.php'; ?>
