resources/views/categories.blade.php

<x-app-layout>
    <!-- Epic Animated Hero Section -->
    <div class="hero-wrapper min-h-screen relative overflow-hidden">
        <!-- Parallax Background Layers -->
        <div class="parallax-bg absolute inset-0">
            <!-- Layer 1 - Slowest -->
            <div class="parallax-layer" data-speed="0.2">
                <div class="absolute top-20 left-10 w-96 h-96 bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
                <div class="absolute bottom-20 right-10 w-80 h-80 bg-gradient-to-r from-pink-500/10 to-purple-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
            </div>
            
            <!-- Layer 2 - Medium -->
            <div class="parallax-layer" data-speed="0.5">
                <div class="absolute top-1/3 right-1/4 w-64 h-64 bg-gradient-to-r from-cyan-500/15 to-blue-500/15 rounded-full blur-2xl float"></div>
                <div class="absolute bottom-1/3 left-1/4 w-48 h-48 bg-gradient-to-r from-yellow-500/15 to-orange-500/15 rounded-full blur-2xl float" style="animation-delay: 3s;"></div>
            </div>
            
            <!-- Layer 3 - Fastest -->
            <div class="parallax-layer" data-speed="0.8">
                <div class="absolute top-10 right-20 w-32 h-32 bg-gradient-to-r from-green-500/20 to-teal-500/20 rounded-full blur-xl float" style="animation-delay: 1s;"></div>
                <div class="absolute bottom-32 left-32 w-24 h-24 bg-gradient-to-r from-red-500/20 to-pink-500/20 rounded-full blur-xl float" style="animation-delay: 4s;"></div>
            </div>
        </div>
        
        <!-- Animated Particles -->
        <div class="particles absolute inset-0 pointer-events-none">
            <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
            <div class="particle" style="left: 20%; animation-delay: 2s;"></div>
            <div class="particle" style="left: 30%; animation-delay: 4s;"></div>
            <div class="particle" style="left: 40%; animation-delay: 1s;"></div>
            <div class="particle" style="left: 50%; animation-delay: 3s;"></div>
            <div class="particle" style="left: 60%; animation-delay: 5s;"></div>
            <div class="particle" style="left: 70%; animation-delay: 2.5s;"></div>
            <div class="particle" style="left: 80%; animation-delay: 1.5s;"></div>
            <div class="particle" style="left: 90%; animation-delay: 3.5s;"></div>
        </div>
        
        <!-- Hero Content -->
        <div class="hero-content flex items-center justify-center min-h-screen relative z-10 px-4">
            <div class="container-custom py-16 text-center">
                <div class="max-w-6xl mx-auto">
                    <!-- Animated Badge -->
                    <div class="hero-badge mb-8 opacity-0 transform translate-y-10">
                        <div class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-full border border-purple-500/30 backdrop-blur-sm">
                            <i class="fas fa-gamepad text-purple-400 mr-3 text-lg"></i>
                            <span class="text-purple-300 font-semibold text-lg">Premium Gaming Store</span>
                            <div class="ml-3 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        </div>
                    </div>
                    
                    <!-- Main Title with Scroll Animation -->
                    <h1 class="hero-title text-7xl md:text-9xl font-black mb-8 text-white leading-none opacity-0 transform translate-y-20">
                        <span class="inline-block transform hover:scale-110 transition-transform duration-300">G</span><span class="inline-block transform hover:scale-110 transition-transform duration-300">a</span><span class="inline-block transform hover:scale-110 transition-transform duration-300">m</span><span class="inline-block transform hover:scale-110 transition-transform duration-300">i</span><span class="inline-block transform hover:scale-110 transition-transform duration-300">n</span><span class="inline-block transform hover:scale-110 transition-transform duration-300">g</span>
                        <br>
                        <span class="gradient-text inline-block transform hover:scale-110 transition-transform duration-300">S</span><span class="gradient-text inline-block transform hover:scale-110 transition-transform duration-300">t</span><span class="gradient-text inline-block transform hover:scale-110 transition-transform duration-300">o</span><span class="gradient-text inline-block transform hover:scale-110 transition-transform duration-300">r</span><span class="gradient-text inline-block transform hover:scale-110 transition-transform duration-300">e</span>
                    </h1>
                    
                    <!-- Subtitle -->
                    <p class="hero-subtitle text-2xl md:text-3xl text-white/80 mb-16 max-w-4xl mx-auto leading-relaxed opacity-0 transform translate-y-10">
                        Discover premium digital content for your favorite games. From exclusive accounts to rare items, elevate your gaming experience.
                    </p>
                    
                    <!-- Animated Stats -->
                    @php
                        $totalCategories = \App\Models\Product::select('game')->distinct()->whereNotNull('game')->count();
                        $totalItemsSold = \App\Models\Order::count();
                        $totalUsers = \App\Models\User::count();
                    @endphp
                    <div class="hero-stats flex flex-wrap justify-center gap-8 mb-16 opacity-0 transform translate-y-10">
                        <div class="stat-card glass-bg px-8 py-6 rounded-2xl transform hover:scale-105 transition-all duration-300">
                            <div class="text-4xl font-bold text-white counter" data-target="{{ $totalCategories }}">0</div>
                            <div class="text-white/60 text-lg font-medium">Games</div>
                        </div>
                        <div class="stat-card glass-bg px-8 py-6 rounded-2xl transform hover:scale-105 transition-all duration-300">
                            <div class="text-4xl font-bold text-white counter" data-target="{{ $totalItemsSold }}">0</div>
                            <div class="text-white/60 text-lg font-medium">Items Sold</div>
                        </div>
                        <div class="stat-card glass-bg px-8 py-6 rounded-2xl transform hover:scale-105 transition-all duration-300">
                            <div class="text-4xl font-bold text-white counter" data-target="{{ $totalUsers }}">0</div>
                            <div class="text-white/60 text-lg font-medium">Users</div>
                        </div>
                    </div>
                    
                    <!-- CTA Buttons -->
                    <div class="hero-cta flex flex-col sm:flex-row items-center justify-center gap-6 opacity-0 transform translate-y-10">
                        <button onclick="scrollToCategories()" class="btn-primary text-xl px-12 py-5 group">
                            <i class="fas fa-rocket mr-3 group-hover:animate-bounce"></i>
                            <span>Explore Store</span>
                            <i class="fas fa-arrow-down ml-3 group-hover:translate-y-1 transition-transform duration-300"></i>
                        </button>
                        <button onclick="scrollToCategories()" class="btn-secondary text-xl px-12 py-5 group">
                            <i class="fas fa-gamepad mr-3 group-hover:scale-110 transition-transform duration-300"></i>
                            <span>Browse Games</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Scroll Indicator -->
        <div class="scroll-indicator absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white/60 animate-bounce">
            <div class="flex flex-col items-center">
                <span class="text-sm mb-2">Scroll to explore</span>
                <i class="fas fa-chevron-down text-xl"></i>
            </div>
        </div>
    </div>

    <!-- Enhanced Categories Section -->
    <div class="py-20 relative">
        <div class="container-custom">
            <div class="text-center mb-20">
                <div class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full border border-blue-500/30 mb-6">
                    <i class="fas fa-th-large text-blue-400 mr-2"></i>
                    <span class="text-blue-300 font-medium">Browse Categories</span>
                </div>
                <h2 class="text-4xl md:text-6xl font-bold text-white mb-6 gradient-text">Choose Your Game</h2>
                <p class="text-xl text-white/70 max-w-2xl mx-auto">Select a category to browse available items</p>
            </div>

            <!-- Main Categories Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto mb-16" id="mainCategories">
                <!-- Genshin Impact Category -->
                <div class="category-card group cursor-pointer fade-in" onclick="showCategory('genshin')" style="animation-delay: 0.1s;">
                    <div class="card h-full relative overflow-hidden bg-gradient-to-br from-yellow-500/5 to-orange-500/5 border-yellow-500/20 hover:border-yellow-500/40">
                        <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                        
                        <!-- Enhanced Decorative Elements -->
                        <div class="absolute top-4 right-4 w-20 h-20 bg-gradient-to-r from-yellow-400/20 to-orange-400/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                        <div class="absolute bottom-4 left-4 w-16 h-16 bg-gradient-to-r from-orange-400/20 to-yellow-400/20 rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                        <div class="absolute top-1/2 left-4 w-12 h-12 bg-gradient-to-r from-yellow-300/15 to-orange-300/15 rounded-full blur-md group-hover:scale-110 transition-transform duration-600"></div>
                        <div class="absolute bottom-1/3 right-6 w-8 h-8 bg-gradient-to-r from-orange-300/25 to-yellow-300/25 rounded-full blur-sm group-hover:scale-125 transition-transform duration-400"></div>
                        
                        <div class="relative z-10 text-center p-8">
                            <div class="w-28 h-28 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-3xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-2xl shadow-yellow-500/30">
                                <i class="fas fa-star text-5xl text-white group-hover:scale-110 transition-transform duration-300"></i>
                            </div>
                            <h3 class="text-3xl font-bold text-white mb-4 group-hover:text-yellow-300 transition-colors duration-300">Genshin Impact</h3>
                            
                            <div class="flex items-center justify-center space-x-6 text-sm text-white/60 mb-6">
                                <span class="flex items-center bg-black/20 px-3 py-2 rounded-full">
                                    <i class="fas fa-box mr-2 text-yellow-400"></i>
                                    <span class="font-semibold" id="genshin-count">{{ $categoryCounts['Genshin'] ?? 0 }}</span> Items
                                </span>
                                <span class="flex items-center bg-black/20 px-3 py-2 rounded-full">
                                    <i class="fas fa-fire mr-2 text-orange-400"></i>
                                    <span class="font-semibold">Popular</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Honkai Star Rail Category -->
                <div class="category-card group cursor-pointer fade-in" onclick="showCategory('starrail')" style="animation-delay: 0.2s;">
                    <div class="card h-full relative overflow-hidden bg-gradient-to-br from-purple-500/5 to-pink-500/5 border-purple-500/20 hover:border-purple-500/40">
                        <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                        
                        <!-- Enhanced Decorative Elements -->
                        <div class="absolute top-4 right-4 w-20 h-20 bg-gradient-to-r from-purple-400/20 to-pink-400/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                        <div class="absolute bottom-4 left-4 w-16 h-16 bg-gradient-to-r from-pink-400/20 to-purple-400/20 rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                        <div class="absolute top-1/2 left-4 w-12 h-12 bg-gradient-to-r from-purple-300/15 to-pink-300/15 rounded-full blur-md group-hover:scale-110 transition-transform duration-600"></div>
                        <div class="absolute bottom-1/3 right-6 w-8 h-8 bg-gradient-to-r from-pink-300/25 to-purple-300/25 rounded-full blur-sm group-hover:scale-125 transition-transform duration-400"></div>
                        
                        <div class="relative z-10 text-center p-8">
                            <div class="w-28 h-28 bg-gradient-to-r from-purple-500 to-pink-500 rounded-3xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:-rotate-6 transition-all duration-500 shadow-2xl shadow-purple-500/30">
                                <i class="fas fa-rocket text-5xl text-white group-hover:scale-110 transition-transform duration-300"></i>
                            </div>
                            <h3 class="text-3xl font-bold text-white mb-4 group-hover:text-purple-300 transition-colors duration-300">Honkai: Star Rail</h3>
                            
                            <div class="flex items-center justify-center space-x-6 text-sm text-white/60 mb-6">
                                <span class="flex items-center bg-black/20 px-3 py-2 rounded-full">
                                    <i class="fas fa-box mr-2 text-purple-400"></i>
                                    <span class="font-semibold" id="starrail-count">{{ $categoryCounts['Starrail'] ?? 0 }}</span> Items
                                </span>
                                <span class="flex items-center bg-black/20 px-3 py-2 rounded-full">
                                    <i class="fas fa-star mr-2 text-pink-400"></i>
                                    <span class="font-semibold">Featured</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Wuthering Waves Category -->
                <div class="category-card group cursor-pointer fade-in" onclick="showCategory('wutheringwave')" style="animation-delay: 0.3s;">
                    <div class="card h-full relative overflow-hidden bg-gradient-to-br from-cyan-500/5 to-blue-500/5 border-cyan-500/20 hover:border-cyan-500/40">
                        <div class="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-blue-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                        
                        <!-- Enhanced Decorative Elements -->
                        <div class="absolute top-4 right-4 w-20 h-20 bg-gradient-to-r from-cyan-400/20 to-blue-400/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                        <div class="absolute bottom-4 left-4 w-16 h-16 bg-gradient-to-r from-blue-400/20 to-cyan-400/20 rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                        <div class="absolute top-1/2 left-4 w-12 h-12 bg-gradient-to-r from-cyan-300/15 to-blue-300/15 rounded-full blur-md group-hover:scale-110 transition-transform duration-600"></div>
                        <div class="absolute bottom-1/3 right-6 w-8 h-8 bg-gradient-to-r from-blue-300/25 to-cyan-300/25 rounded-full blur-sm group-hover:scale-125 transition-transform duration-400"></div>
                        
                        <div class="relative z-10 text-center p-8">
                            <div class="w-28 h-28 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-3xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-12 transition-all duration-500 shadow-2xl shadow-cyan-500/30">
                                <i class="fas fa-wave-square text-5xl text-white group-hover:scale-110 transition-transform duration-300"></i>
                            </div>
                            <h3 class="text-3xl font-bold text-white mb-4 group-hover:text-cyan-300 transition-colors duration-300">Wuthering Waves</h3>
                            
                            <div class="flex items-center justify-center space-x-6 text-sm text-white/60 mb-6">
                                <span class="flex items-center bg-black/20 px-3 py-2 rounded-full">
                                    <i class="fas fa-box mr-2 text-cyan-400"></i>
                                    <span class="font-semibold" id="wutheringwave-count">{{ $categoryCounts['WutheringWave'] ?? 0 }}</span> Items
                                </span>
                                <span class="flex items-center bg-black/20 px-3 py-2 rounded-full">
                                    <i class="fas fa-bolt mr-2 text-blue-400"></i>
                                    <span class="font-semibold">New</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Beautiful Show More Categories Section -->
            <div class="text-center mb-16" id="showMoreSection">
                <div class="category-card group cursor-pointer fade-in mx-auto max-w-md" onclick="toggleExtraCategories()" style="animation-delay: 0.4s;">
                    <div class="card h-full relative overflow-hidden bg-gradient-to-br from-indigo-500/5 to-purple-500/5 border-indigo-500/20 hover:border-indigo-500/40">
                        <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                        
                        <!-- Decorative Elements -->
                        <div class="absolute top-4 right-4 w-20 h-20 bg-gradient-to-r from-indigo-400/20 to-purple-400/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                        <div class="absolute bottom-4 left-4 w-16 h-16 bg-gradient-to-r from-purple-400/20 to-indigo-400/20 rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                        
                        <div class="relative z-10 text-center p-8">
                            <div class="w-28 h-28 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-3xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-2xl shadow-indigo-500/30">
                                <i class="fas fa-plus text-5xl text-white group-hover:scale-110 transition-transform duration-300" id="toggleIcon"></i>
                            </div>
                            <h3 class="text-3xl font-bold text-white mb-4 group-hover:text-indigo-300 transition-colors duration-300" id="toggleText">Show More Categories</h3>
                            
                            <div class="flex items-center justify-center space-x-6 text-sm text-white/60 mb-6">
                                <span class="flex items-center bg-black/20 px-3 py-2 rounded-full">
                                    <i class="fas fa-gamepad mr-2 text-indigo-400"></i>
                                    <span class="font-semibold">5+</span> More Games
                                </span>
                                <span class="flex items-center bg-black/20 px-3 py-2 rounded-full">
                                    <i class="fas fa-sparkles mr-2 text-purple-400"></i>
                                    <span class="font-semibold">Discover</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Categories (Hidden by default) -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto mb-16 hidden" id="moreCategories">
                <!-- Zenless Zone Zero -->
                <div class="category-card group cursor-pointer" onclick="showCategory('zenless')">
                    <div class="card h-full relative overflow-hidden bg-gradient-to-br from-red-500/5 to-pink-500/5 border-red-500/20 hover:border-red-500/40">
                        <div class="absolute inset-0 bg-gradient-to-br from-red-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                        
                        <!-- Enhanced Decorative Elements -->
                        <div class="absolute top-4 right-4 w-16 h-16 bg-gradient-to-r from-red-400/20 to-pink-400/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                        <div class="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-r from-pink-400/20 to-red-400/20 rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                        <div class="absolute top-1/2 left-4 w-8 h-8 bg-gradient-to-r from-red-300/15 to-pink-300/15 rounded-full blur-md group-hover:scale-110 transition-transform duration-600"></div>
                        <div class="absolute bottom-1/3 right-6 w-6 h-6 bg-gradient-to-r from-pink-300/25 to-red-300/25 rounded-full blur-sm group-hover:scale-125 transition-transform duration-400"></div>
                        
                        <div class="relative z-10 text-center p-6">
                            <div class="w-20 h-20 bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-all duration-500 shadow-xl shadow-red-500/30">
                                <i class="fas fa-city text-3xl text-white"></i>
                            </div>
                            <h3 class="text-xl font-bold text-white mb-3 group-hover:text-red-300 transition-colors duration-300">Zenless Zone Zero</h3>
                            <div class="flex items-center justify-center text-sm text-white/60">
                                <span class="flex items-center bg-black/20 px-2 py-1 rounded-full">
                                    <i class="fas fa-box mr-1 text-red-400"></i>
                                    <span class="font-semibold">0</span> Items
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Arknights -->
                <div class="category-card group cursor-pointer" onclick="showCategory('arknights')">
                    <div class="card h-full relative overflow-hidden bg-gradient-to-br from-indigo-500/5 to-purple-500/5 border-indigo-500/20 hover:border-indigo-500/40">
                        <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                        
                        <!-- Enhanced Decorative Elements -->
                        <div class="absolute top-4 right-4 w-16 h-16 bg-gradient-to-r from-indigo-400/20 to-purple-400/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                        <div class="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-r from-purple-400/20 to-indigo-400/20 rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                        <div class="absolute top-1/2 left-4 w-8 h-8 bg-gradient-to-r from-indigo-300/15 to-purple-300/15 rounded-full blur-md group-hover:scale-110 transition-transform duration-600"></div>
                        <div class="absolute bottom-1/3 right-6 w-6 h-6 bg-gradient-to-r from-purple-300/25 to-indigo-300/25 rounded-full blur-sm group-hover:scale-125 transition-transform duration-400"></div>
                        
                        <div class="relative z-10 text-center p-6">
                            <div class="w-20 h-20 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-all duration-500 shadow-xl shadow-indigo-500/30">
                                <i class="fas fa-chess-knight text-3xl text-white"></i>
                            </div>
                            <h3 class="text-xl font-bold text-white mb-3 group-hover:text-indigo-300 transition-colors duration-300">Arknights</h3>
                            <div class="flex items-center justify-center text-sm text-white/60">
                                <span class="flex items-center bg-black/20 px-2 py-1 rounded-full">
                                    <i class="fas fa-box mr-1 text-indigo-400"></i>
                                    <span class="font-semibold">0</span> Items
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Azur Lane -->
                <div class="category-card group cursor-pointer" onclick="showCategory('azurlane')">
                    <div class="card h-full relative overflow-hidden bg-gradient-to-br from-blue-500/5 to-teal-500/5 border-blue-500/20 hover:border-blue-500/40">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-teal-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                        
                        <!-- Enhanced Decorative Elements -->
                        <div class="absolute top-4 right-4 w-16 h-16 bg-gradient-to-r from-blue-400/20 to-teal-400/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                        <div class="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-r from-teal-400/20 to-blue-400/20 rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                        <div class="absolute top-1/2 left-4 w-8 h-8 bg-gradient-to-r from-blue-300/15 to-teal-300/15 rounded-full blur-md group-hover:scale-110 transition-transform duration-600"></div>
                        <div class="absolute bottom-1/3 right-6 w-6 h-6 bg-gradient-to-r from-teal-300/25 to-blue-300/25 rounded-full blur-sm group-hover:scale-125 transition-transform duration-400"></div>
                        
                        <div class="relative z-10 text-center p-6">
                            <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-all duration-500 shadow-xl shadow-blue-500/30">
                                <i class="fas fa-ship text-3xl text-white"></i>
                            </div>
                            <h3 class="text-xl font-bold text-white mb-3 group-hover:text-blue-300 transition-colors duration-300">Azur Lane</h3>
                            <div class="flex items-center justify-center text-sm text-white/60">
                                <span class="flex items-center bg-black/20 px-2 py-1 rounded-full">
                                    <i class="fas fa-box mr-1 text-blue-400"></i>
                                    <span class="font-semibold">0</span> Items
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                @if(isset($customGames) && $customGames->count() > 0)
                    @foreach($customGames as $index => $customGame)
                    @php
                        // Use stored styling from database
                        $gameIcon = $customGame->icon;
                        $gameGradient = $customGame->color_gradient;
                        
                        // Get product count for this custom game
                        $productCount = \App\Models\Product::where('game', $customGame->name)->count();
                        
                        // Extract color names from gradient for consistent theming
                        $gradientParts = explode(' ', $gameGradient);
                        $primaryColor = str_replace(['from-', '-500'], '', $gradientParts[0] ?? 'purple');
                        $secondaryColor = str_replace(['to-', '-500'], '', $gradientParts[1] ?? 'blue');
                        
                        // Map to predefined color classes to ensure Tailwind generates them
                        $colorClasses = [
                            'red' => [
                                'bg' => 'from-red-500/5 to-pink-500/5',
                                'border' => 'border-red-500/20',
                                'hover_border' => 'hover:border-red-500/40',
                                'bg_hover' => 'from-red-500/10 to-pink-500/10',
                                'decorative1' => 'from-red-400/20 to-pink-400/20',
                                'decorative2' => 'from-pink-400/20 to-red-400/20',
                                'shadow' => 'shadow-red-500/30',
                                'text_hover' => 'group-hover:text-red-300',
                                'icon_color' => 'text-red-400'
                            ],
                            'pink' => [
                                'bg' => 'from-pink-500/5 to-rose-500/5',
                                'border' => 'border-pink-500/20',
                                'hover_border' => 'hover:border-pink-500/40',
                                'bg_hover' => 'from-pink-500/10 to-rose-500/10',
                                'decorative1' => 'from-pink-400/20 to-rose-400/20',
                                'decorative2' => 'from-rose-400/20 to-pink-400/20',
                                'shadow' => 'shadow-pink-500/30',
                                'text_hover' => 'group-hover:text-pink-300',
                                'icon_color' => 'text-pink-400'
                            ],
                            'purple' => [
                                'bg' => 'from-purple-500/5 to-blue-500/5',
                                'border' => 'border-purple-500/20',
                                'hover_border' => 'hover:border-purple-500/40',
                                'bg_hover' => 'from-purple-500/10 to-blue-500/10',
                                'decorative1' => 'from-purple-400/20 to-blue-400/20',
                                'decorative2' => 'from-blue-400/20 to-purple-400/20',
                                'shadow' => 'shadow-purple-500/30',
                                'text_hover' => 'group-hover:text-purple-300',
                                'icon_color' => 'text-purple-400'
                            ],
                            'blue' => [
                                'bg' => 'from-blue-500/5 to-indigo-500/5',
                                'border' => 'border-blue-500/20',
                                'hover_border' => 'hover:border-blue-500/40',
                                'bg_hover' => 'from-blue-500/10 to-indigo-500/10',
                                'decorative1' => 'from-blue-400/20 to-indigo-400/20',
                                'decorative2' => 'from-indigo-400/20 to-blue-400/20',
                                'shadow' => 'shadow-blue-500/30',
                                'text_hover' => 'group-hover:text-blue-300',
                                'icon_color' => 'text-blue-400'
                            ],
                            'green' => [
                                'bg' => 'from-green-500/5 to-teal-500/5',
                                'border' => 'border-green-500/20',
                                'hover_border' => 'hover:border-green-500/40',
                                'bg_hover' => 'from-green-500/10 to-teal-500/10',
                                'decorative1' => 'from-green-400/20 to-teal-400/20',
                                'decorative2' => 'from-teal-400/20 to-green-400/20',
                                'shadow' => 'shadow-green-500/30',
                                'text_hover' => 'group-hover:text-green-300',
                                'icon_color' => 'text-green-400'
                            ],
                            'orange' => [
                                'bg' => 'from-orange-500/5 to-red-500/5',
                                'border' => 'border-orange-500/20',
                                'hover_border' => 'hover:border-orange-500/40',
                                'bg_hover' => 'from-orange-500/10 to-red-500/10',
                                'decorative1' => 'from-orange-400/20 to-red-400/20',
                                'decorative2' => 'from-red-400/20 to-orange-400/20',
                                'shadow' => 'shadow-orange-500/30',
                                'text_hover' => 'group-hover:text-orange-300',
                                'icon_color' => 'text-orange-400'
                            ],
                            'rose' => [
                                'bg' => 'from-rose-500/5 to-pink-500/5',
                                'border' => 'border-rose-500/20',
                                'hover_border' => 'hover:border-rose-500/40',
                                'bg_hover' => 'from-rose-500/10 to-pink-500/10',
                                'decorative1' => 'from-rose-400/20 to-pink-400/20',
                                'decorative2' => 'from-pink-400/20 to-rose-400/20',
                                'shadow' => 'shadow-rose-500/30',
                                'text_hover' => 'group-hover:text-rose-300',
                                'icon_color' => 'text-rose-400'
                            ],
                            'teal' => [
                                'bg' => 'from-teal-500/5 to-cyan-500/5',
                                'border' => 'border-teal-500/20',
                                'hover_border' => 'hover:border-teal-500/40',
                                'bg_hover' => 'from-teal-500/10 to-cyan-500/10',
                                'decorative1' => 'from-teal-400/20 to-cyan-400/20',
                                'decorative2' => 'from-cyan-400/20 to-teal-400/20',
                                'shadow' => 'shadow-teal-500/30',
                                'text_hover' => 'group-hover:text-teal-300',
                                'icon_color' => 'text-teal-400'
                            ],
                            'cyan' => [
                                'bg' => 'from-cyan-500/5 to-blue-500/5',
                                'border' => 'border-cyan-500/20',
                                'hover_border' => 'hover:border-cyan-500/40',
                                'bg_hover' => 'from-cyan-500/10 to-blue-500/10',
                                'decorative1' => 'from-cyan-400/20 to-blue-400/20',
                                'decorative2' => 'from-blue-400/20 to-cyan-400/20',
                                'shadow' => 'shadow-cyan-500/30',
                                'text_hover' => 'group-hover:text-cyan-300',
                                'icon_color' => 'text-cyan-400'
                            ],
                            'indigo' => [
                                'bg' => 'from-indigo-500/5 to-purple-500/5',
                                'border' => 'border-indigo-500/20',
                                'hover_border' => 'hover:border-indigo-500/40',
                                'bg_hover' => 'from-indigo-500/10 to-purple-500/10',
                                'decorative1' => 'from-indigo-400/20 to-purple-400/20',
                                'decorative2' => 'from-purple-400/20 to-indigo-400/20',
                                'shadow' => 'shadow-indigo-500/30',
                                'text_hover' => 'group-hover:text-indigo-300',
                                'icon_color' => 'text-indigo-400'
                            ],
                            'violet' => [
                                'bg' => 'from-violet-500/5 to-purple-500/5',
                                'border' => 'border-violet-500/20',
                                'hover_border' => 'hover:border-violet-500/40',
                                'bg_hover' => 'from-violet-500/10 to-purple-500/10',
                                'decorative1' => 'from-violet-400/20 to-purple-400/20',
                                'decorative2' => 'from-purple-400/20 to-violet-400/20',
                                'shadow' => 'shadow-violet-500/30',
                                'text_hover' => 'group-hover:text-violet-300',
                                'icon_color' => 'text-violet-400'
                            ],
                            'emerald' => [
                                'bg' => 'from-emerald-500/5 to-green-500/5',
                                'border' => 'border-emerald-500/20',
                                'hover_border' => 'hover:border-emerald-500/40',
                                'bg_hover' => 'from-emerald-500/10 to-green-500/10',
                                'decorative1' => 'from-emerald-400/20 to-green-400/20',
                                'decorative2' => 'from-green-400/20 to-emerald-400/20',
                                'shadow' => 'shadow-emerald-500/30',
                                'text_hover' => 'group-hover:text-emerald-300',
                                'icon_color' => 'text-emerald-400'
                            ],
                            'yellow' => [
                                'bg' => 'from-yellow-500/5 to-orange-500/5',
                                'border' => 'border-yellow-500/20',
                                'hover_border' => 'hover:border-yellow-500/40',
                                'bg_hover' => 'from-yellow-500/10 to-orange-500/10',
                                'decorative1' => 'from-yellow-400/20 to-orange-400/20',
                                'decorative2' => 'from-orange-400/20 to-yellow-400/20',
                                'shadow' => 'shadow-yellow-500/30',
                                'text_hover' => 'group-hover:text-yellow-300',
                                'icon_color' => 'text-yellow-400'
                            ]
                        ];
                        
                        $colors = $colorClasses[$primaryColor] ?? $colorClasses['purple'];
                    @endphp
                    <!-- Custom Game Category -->
                    <div class="category-card group cursor-pointer" onclick="showCategory('{{ strtolower(str_replace(' ', '', $customGame->name)) }}')">
                        <div class="card h-full relative overflow-hidden bg-gradient-to-br {{ $colors['bg'] }} border {{ $colors['border'] }} {{ $colors['hover_border'] }}">
                            <div class="absolute inset-0 bg-gradient-to-br {{ $colors['bg_hover'] }} opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                            
                            <!-- Decorative Elements -->
                            <div class="absolute top-4 right-4 w-16 h-16 bg-gradient-to-r {{ $colors['decorative1'] }} rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                            <div class="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-r {{ $colors['decorative2'] }} rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                            
                            <div class="relative z-10 text-center p-6">
                                <div class="w-20 h-20 bg-gradient-to-r {{ $gameGradient }} rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-all duration-500 shadow-xl {{ $colors['shadow'] }}">
                                    <i class="{{ $gameIcon }} text-3xl text-white"></i>
                                </div>
                                <h3 class="text-xl font-bold text-white mb-3 {{ $colors['text_hover'] }} transition-colors duration-300">{{ $customGame->name }}</h3>
                                <div class="flex items-center justify-center text-sm text-white/60">
                                    <span class="flex items-center bg-black/20 px-2 py-1 rounded-full">
                                        <i class="fas fa-box mr-1 {{ $colors['icon_color'] }}"></i>
                                        <span class="font-semibold">{{ $productCount }}</span> Items
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                @endif

                @if(!isset($customGames) || $customGames->isEmpty())
                    <!-- Coming Soon Placeholder (only shown when no custom games exist) -->
                    <div class="category-card group cursor-pointer" onclick="showComingSoon()">
                        <div class="card h-full relative overflow-hidden bg-gradient-to-br from-gray-500/5 to-slate-500/5 border-gray-500/20 hover:border-gray-500/40 border-dashed">
                            <div class="absolute inset-0 bg-gradient-to-br from-gray-500/10 to-slate-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                            
                            <!-- Decorative Elements -->
                            <div class="absolute top-4 right-4 w-16 h-16 bg-gradient-to-r from-gray-400/20 to-slate-400/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                            <div class="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-r from-slate-400/20 to-gray-400/20 rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                            
                            <div class="relative z-10 text-center p-6">
                                <div class="w-20 h-20 bg-gradient-to-r from-gray-500 to-slate-500 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-all duration-500 shadow-xl shadow-gray-500/30">
                                    <i class="fas fa-plus text-3xl text-white"></i>
                                </div>
                                <h3 class="text-xl font-bold text-white mb-3 group-hover:text-gray-300 transition-colors duration-300">More Games</h3>
                                <div class="flex items-center justify-center text-sm text-white/60">
                                    <span class="flex items-center bg-black/20 px-2 py-1 rounded-full">
                                        <i class="fas fa-clock mr-1 text-gray-400"></i>
                                        <span class="font-semibold">Coming Soon</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Enhanced Action Buttons -->
            <div class="text-center space-y-6">
                <div class="flex flex-col sm:flex-row items-center justify-center gap-6">
                    <button onclick="scrollToFeatures()" class="btn-primary text-lg px-10 py-4 group">
                        <i class="fas fa-info-circle mr-3 group-hover:scale-110 transition-transform duration-300"></i>
                        <span>Why Choose Us?</span>
                    </button>
                </div>
                
                <p class="text-white/50 text-sm">
                    <i class="fas fa-shield-alt mr-2 text-green-400"></i>
                    Secure transactions • Instant delivery • 24/7 support
                </p>
            </div>
        </div>
    </div>

    <!-- Enhanced Features Section -->
    <div id="features" class="py-20 bg-gradient-to-r from-purple-900/20 to-blue-900/20">
        <div class="container-custom">
            <div class="text-center mb-16">
                <div class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-green-500/20 to-blue-500/20 rounded-full border border-green-500/30 mb-6">
                    <i class="fas fa-star text-green-400 mr-2"></i>
                    <span class="text-green-300 font-medium">Why Choose Us</span>
                </div>
                <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">Why Choose Us</h2>
                <p class="text-xl text-white/70 max-w-3xl mx-auto">Quality products with reliable service</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="card text-center group hover:scale-105 transition-all duration-300 fade-in" style="animation-delay: 0.1s;">
                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-bolt text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Instant Delivery</h3>
                    <p class="text-white/70 text-sm leading-relaxed">Get your products instantly after purchase</p>
                </div>
                
                <div class="card text-center group hover:scale-105 transition-all duration-300 fade-in" style="animation-delay: 0.2s;">
                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-shield-alt text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Secure Payment</h3>
                    <p class="text-white/70 text-sm leading-relaxed">Protected transactions with secure encryption</p>
                </div>
                
                <div class="card text-center group hover:scale-105 transition-all duration-300 fade-in" style="animation-delay: 0.3s;">
                    <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-rose-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-headset text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">24/7 Support</h3>
                    <p class="text-white/70 text-sm leading-relaxed">Customer support available anytime</p>
                </div>
                
                <div class="card text-center group hover:scale-105 transition-all duration-300 fade-in" style="animation-delay: 0.4s;">
                    <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-medal text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Premium Quality</h3>
                    <p class="text-white/70 text-sm leading-relaxed">High quality accounts and items, verified by experts</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Category Products Modal -->
    <div id="categoryModal" class="fixed inset-0 bg-black/90 backdrop-blur-lg z-50 opacity-0 pointer-events-none transition-all duration-500">
        <div class="min-h-screen flex items-center justify-center p-4">
            <div class="glass-bg max-w-7xl w-full max-h-[90vh] overflow-hidden transform scale-95 transition-all duration-500" id="modalContainer">
                <!-- Enhanced Modal Header -->
                <div class="flex items-center justify-between p-8 border-b border-white/10 bg-gradient-to-r from-black/20 to-black/10">
                    <div class="flex items-center space-x-6">
                        <div id="modalIcon" class="w-20 h-20 rounded-2xl flex items-center justify-center shadow-2xl relative">
                            <!-- Icon will be set by JavaScript -->
                            <div class="absolute inset-0 rounded-2xl bg-gradient-to-r from-white/5 to-white/10 opacity-50"></div>
                        </div>
                        <div>
                            <h2 id="modalTitle" class="text-4xl font-bold text-white mb-2 gradient-text">Category Products</h2>
                            <p id="modalSubtitle" class="text-white/70 text-lg flex items-center">
                                <i class="fas fa-box mr-2 text-purple-400"></i>
                                Loading products...
                            </p>
                        </div>
                    </div>
                    <button onclick="closeModal()" class="w-14 h-14 bg-red-500/20 hover:bg-red-500/30 rounded-xl flex items-center justify-center text-red-400 hover:text-red-300 transition-all duration-300 border border-red-500/30 hover:scale-110 transform">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>

                <!-- Enhanced Modal Content -->
                <div class="p-8 overflow-y-auto max-h-[calc(90vh-140px)] custom-scrollbar">
                    <div id="modalContent" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        <!-- Products will be loaded here -->
                    </div>
                    
                    <!-- Enhanced Loading State -->
                    <div id="loadingState" class="text-center py-20">
                        <div class="relative">
                            <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6 loading-pulse">
                                <i class="fas fa-spinner fa-spin text-3xl text-white"></i>
                            </div>
                            <div class="absolute inset-0 w-20 h-20 mx-auto border-4 border-purple-500/30 rounded-full animate-ping"></div>
                        </div>
                        <h3 class="text-xl font-semibold text-white mb-2">Loading Products</h3>
                        <p class="text-white/60">Fetching the latest items for you...</p>
                    </div>

                    <!-- Enhanced Empty State -->
                    <div id="emptyState" class="text-center py-32 hidden">
                        <div class="relative mx-auto mb-8">
                            <div class="w-32 h-32 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-full flex items-center justify-center mx-auto border border-purple-500/30 shadow-2xl">
                                <i class="fas fa-box-open text-6xl text-purple-400"></i>
                            </div>
                            <div class="absolute top-4 right-4 w-8 h-8 bg-gradient-to-r from-yellow-400/30 to-orange-400/30 rounded-full blur-sm"></div>
                            <div class="absolute bottom-4 left-4 w-6 h-6 bg-gradient-to-r from-pink-400/30 to-purple-400/30 rounded-full blur-sm"></div>
                        </div>
                        <h3 class="text-3xl font-bold text-white mb-4">No Products Available</h3>
                        <p class="text-white/60 mb-8 max-w-md mx-auto text-lg leading-relaxed">This category doesn't have any products yet. Check back soon for new additions!</p>
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <button onclick="closeModal()" class="btn-secondary px-8 py-4">
                                <i class="fas fa-arrow-left mr-2"></i>Back to Categories
                            </button>
                            <button onclick="showComingSoon()" class="btn-primary px-8 py-4">
                                <i class="fas fa-bell mr-2"></i>Notify Me
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <style>
        /* Smooth button animations */
        #showMoreBtn {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        #showMoreBtn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        #showMoreIcon {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        #showMoreText {
            transition: all 0.3s ease;
        }
        
        /* Smooth category container transitions */
        #moreCategories {
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Enhanced category card animations */
        .category-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
    </style>



    <script>
        const categoryData = {
            genshin: {
                title: 'Genshin Impact',
                subtitle: 'Premium Teyvat Collection',
                icon: 'fas fa-star',
                gradient: 'from-yellow-500 to-orange-500',
                game: 'Genshin'
            },
            starrail: {
                title: 'Honkai: Star Rail',
                subtitle: 'Stellar Adventure Items',
                icon: 'fas fa-rocket',
                gradient: 'from-purple-500 to-pink-500',
                game: 'Starrail'
            },
            wutheringwave: {
                title: 'Wuthering Waves',
                subtitle: 'Resonator Collection',
                icon: 'fas fa-wave-square',
                gradient: 'from-cyan-500 to-blue-500',
                game: 'WutheringWave'
            },
            zenless: {
                title: 'Zenless Zone Zero',
                subtitle: 'Urban Fantasy Collection',
                icon: 'fas fa-city',
                gradient: 'from-red-500 to-pink-500',
                game: 'ZenlessZoneZero'
            },
            arknights: {
                title: 'Arknights',
                subtitle: 'Strategic Defense Items',
                icon: 'fas fa-chess-knight',
                gradient: 'from-indigo-500 to-purple-500',
                game: 'Arknights'
            },
            azurlane: {
                title: 'Azur Lane',
                subtitle: 'Naval Combat Collection',
                icon: 'fas fa-ship',
                gradient: 'from-blue-500 to-teal-500',
                game: 'AzurLane'
            }
            @if(isset($customGames))
                @foreach($customGames as $customGame)
                    ,{{ strtolower(str_replace(' ', '', $customGame->name)) }}: {
                        title: '{{ $customGame->name }}',
                        subtitle: 'Custom Game Collection',
                        icon: '{{ $customGame->icon }}',
                        gradient: '{{ $customGame->color_gradient }}',
                        game: '{{ $customGame->name }}'
                    }
                @endforeach
            @endif
        };



        // Coming Soon Modal
        function showComingSoon() {
            showNotification('More games coming soon! Stay tuned for updates.', 'info');
        }

        // Enhanced notification system
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-xl shadow-lg transform translate-x-full transition-transform duration-300 ${getNotificationClasses(type)}`;
            notification.innerHTML = `
                <div class="flex items-center space-x-3">
                    <i class="fas ${getNotificationIcon(type)}"></i>
                    <span class="font-medium">${message}</span>
                </div>
            `;

            document.body.appendChild(notification);

            setTimeout(() => {
                notification.classList.remove('translate-x-full');
            }, 100);

            setTimeout(() => {
                notification.classList.add('translate-x-full');
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        }

        function getNotificationClasses(type) {
            switch (type) {
                case 'success':
                    return 'bg-green-500/90 text-white border border-green-400/50 backdrop-blur-sm';
                case 'warning':
                    return 'bg-yellow-500/90 text-white border border-yellow-400/50 backdrop-blur-sm';
                case 'error':
                    return 'bg-red-500/90 text-white border border-red-400/50 backdrop-blur-sm';
                default:
                    return 'bg-blue-500/90 text-white border border-blue-400/50 backdrop-blur-sm';
            }
        }

        function getNotificationIcon(type) {
            switch (type) {
                case 'success':
                    return 'fa-check-circle';
                case 'warning':
                    return 'fa-exclamation-triangle';
                case 'error':
                    return 'fa-times-circle';
                default:
                    return 'fa-info-circle';
            }
        }

        // Enhanced category display with animations
        async function showCategory(categoryKey) {
            const category = categoryData[categoryKey];
            const modal = document.getElementById('categoryModal');
            const modalContainer = document.getElementById('modalContainer');
            const modalIcon = document.getElementById('modalIcon');
            const modalTitle = document.getElementById('modalTitle');
            const modalSubtitle = document.getElementById('modalSubtitle');
            const modalContent = document.getElementById('modalContent');
            const loadingState = document.getElementById('loadingState');
            const emptyState = document.getElementById('emptyState');

            // Set modal header with enhanced styling
            modalIcon.className = `w-16 h-16 bg-gradient-to-r ${category.gradient} rounded-2xl flex items-center justify-center shadow-2xl`;
            modalIcon.innerHTML = `<i class="${category.icon} text-white text-2xl"></i>`;
            modalTitle.textContent = category.title;
            modalSubtitle.textContent = `${category.subtitle} • Loading products...`;

            // Show modal with enhanced animations
            modal.classList.remove('opacity-0', 'pointer-events-none');
            modalContainer.classList.remove('scale-95');
            modalContainer.classList.add('scale-100');
            document.body.style.overflow = 'hidden';

            // Show loading state
            loadingState.classList.remove('hidden');
            modalContent.classList.add('hidden');
            emptyState.classList.add('hidden');

            try {
                // Add artificial delay for better UX
                await new Promise(resolve => setTimeout(resolve, 500));
                
                // Fetch products for this category
                const response = await fetch(`/api/products/category/${category.game}`);
                const products = await response.json();

                // Hide loading state
                loadingState.classList.add('hidden');

                if (products.length === 0) {
                    modalSubtitle.textContent = `${category.subtitle} • No products available`;
                    emptyState.classList.remove('hidden');
                } else {
                    modalSubtitle.textContent = `${category.subtitle} • ${products.length} products found`;
                    modalContent.classList.remove('hidden');
                    renderProducts(products, categoryKey);
                }
            } catch (error) {
                console.error('Error fetching products:', error);
                loadingState.classList.add('hidden');
                modalSubtitle.textContent = `${category.subtitle} • Error loading products`;
                emptyState.classList.remove('hidden');
            }
        }

        // Enhanced product rendering
        function renderProducts(products, categoryKey) {
            const modalContent = document.getElementById('modalContent');
            const category = categoryData[categoryKey];
            
            // Show only first 8 products in preview
            const previewProducts = products.slice(0, 8);
            
            modalContent.innerHTML = previewProducts.map((product, index) => `
                <div class="product-card group cursor-pointer fade-in transform hover:scale-105 transition-all duration-500" style="animation-delay: ${index * 0.1}s;" onclick="window.location.href='/store/${product.game}/${product.slug}'"
                    <div class="glass-bg h-full relative overflow-hidden rounded-2xl border border-white/10 hover:border-purple-500/40 transition-all duration-500 group-hover:shadow-2xl group-hover:shadow-purple-500/20">
                        <!-- Decorative Background Elements -->
                        <div class="absolute top-4 right-4 w-16 h-16 bg-gradient-to-r from-purple-400/20 to-blue-400/20 rounded-full blur-lg group-hover:scale-150 transition-transform duration-700"></div>
                        <div class="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-r from-pink-400/20 to-purple-400/20 rounded-full blur-md group-hover:scale-125 transition-transform duration-500"></div>
                        
                        <div class="relative z-10 p-5">
                            <!-- Product Image Section -->
                            <div class="relative h-40 overflow-hidden rounded-xl mb-4 group-hover:scale-105 transition-transform duration-500">
                                <img src="${product.image}" alt="${product.name}" 
                                     class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent"></div>
                                
                                <!-- Premium Stock Badge -->
                                <div class="absolute top-3 right-3">
                                    ${product.Amount === 0 
                                        ? '<div class="px-3 py-2 rounded-xl text-xs font-bold bg-red-500/95 text-white border border-red-400/60 shadow-xl backdrop-blur-sm"><i class="fas fa-times-circle mr-2"></i>Out of Stock</div>'
                                        : product.Amount <= 5
                                        ? `<div class="px-3 py-2 rounded-xl text-xs font-bold bg-orange-500/95 text-white border border-orange-400/60 shadow-xl backdrop-blur-sm"><i class="fas fa-exclamation-triangle mr-2"></i>${product.Amount} Left</div>`
                                        : `<div class="px-3 py-2 rounded-xl text-xs font-bold bg-green-500/95 text-white border border-green-400/60 shadow-xl backdrop-blur-sm"><i class="fas fa-check-circle mr-2"></i>In Stock</div>`
                                    }
                                </div>
                                

                            </div>
                            
                            <!-- Product Content -->
                            <div class="space-y-3">
                                <!-- Product Title -->
                                <div>
                                    <h3 class="text-lg font-bold text-white group-hover:text-purple-300 transition-colors duration-300 mb-2 leading-tight">${product.name}</h3>
                                    <p class="text-white/70 text-sm line-clamp-2 leading-relaxed mb-3">${product.description}</p>
                                </div>
                                
                                <!-- Price Display -->
                                <div class="bg-gradient-to-r from-black/40 to-black/20 rounded-xl px-4 py-3 border border-purple-500/30">
                                    <div class="text-xs text-white/60 mb-1 font-medium">Price</div>
                                    <div class="text-2xl font-bold text-green-400">
                                        ฿${parseFloat(product.price).toFixed(2)}
                                    </div>
                                </div>
                                
                                <!-- Action Section -->
                                <div class="pt-4 border-t border-white/10">
                                    ${product.Amount === 0 
                                        ? '<div class="w-full py-3 px-6 bg-gray-700/50 text-gray-400 rounded-xl cursor-not-allowed font-semibold border border-gray-600/30 text-center"><i class="fas fa-times-circle mr-2"></i>Out of Stock</div>'
                                        : `<div class="w-full py-3 px-6 bg-gradient-to-r from-purple-600 to-blue-600 group-hover:from-purple-500 group-hover:to-blue-500 text-white text-center rounded-xl font-semibold transition-all duration-300 shadow-lg group-hover:shadow-purple-500/40 transform group-hover:scale-105">
                                            <i class="fas fa-eye mr-2"></i>View Details
                                           </div>`
                                    }
                                </div>
                                
                                <!-- Premium Features -->
                                <div class="flex items-center justify-between text-xs text-white/50 pt-2">
                                    <span class="flex items-center">
                                        <i class="fas fa-shopping-cart mr-1 text-blue-400"></i>
                                        ${product.sales_count || 0} Sold
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-bolt mr-1 text-yellow-400"></i>
                                        Instant
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-star mr-1 text-purple-400"></i>
                                        Premium
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Hover Glow Effect -->
                        <div class="absolute inset-0 rounded-2xl bg-gradient-to-r from-purple-500/0 via-purple-500/5 to-blue-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
                    </div>
                </div>
            `).join('');
            
            // Add enhanced "View All" button
            if (products.length > 8) {
                modalContent.innerHTML += `
                    <div class="col-span-full mt-8">
                        <div class="relative overflow-hidden bg-gradient-to-br from-purple-600/10 via-blue-600/10 to-cyan-600/10 rounded-3xl p-8 border border-purple-500/20 hover:border-purple-500/40 transition-all duration-500 group">
                            <!-- Animated Background -->
                            <div class="absolute inset-0 bg-gradient-to-r from-purple-500/5 via-blue-500/5 to-cyan-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            
                            <!-- Floating Elements -->
                            <div class="absolute top-4 right-4 w-16 h-16 bg-gradient-to-r from-purple-400/20 to-blue-400/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-700"></div>
                            <div class="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-r from-cyan-400/20 to-purple-400/20 rounded-full blur-lg group-hover:scale-125 transition-transform duration-500"></div>
                            
                            <div class="relative z-10 text-center">
                                <div class="mb-6">
                                    <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300 shadow-2xl shadow-purple-500/30">
                                        <i class="fas fa-store text-3xl text-white"></i>
                                    </div>
                                    <h3 class="text-2xl font-bold text-white mb-2 group-hover:text-purple-300 transition-colors duration-300">Explore Full Collection</h3>
                                    <p class="text-white/70 text-lg mb-2">Showing ${previewProducts.length} of ${products.length} amazing products</p>
                                    <p class="text-purple-300 text-sm font-medium">Discover ${products.length - previewProducts.length} more items in the full store</p>
                                </div>
                                <button onclick="window.location.href='/store/${category.game}'" class="relative overflow-hidden bg-gradient-to-r from-purple-600 via-blue-600 to-cyan-600 hover:from-purple-500 hover:via-blue-500 hover:to-cyan-500 text-white px-10 py-4 rounded-2xl font-bold text-lg transition-all duration-300 shadow-2xl hover:shadow-purple-500/50 transform hover:scale-105 hover:-translate-y-1 group-hover:animate-pulse">
                                    <div class="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                                    <span class="relative flex items-center justify-center">
                                        <i class="fas fa-rocket mr-3 text-xl"></i>
                                        View All ${products.length} Products
                                        <i class="fas fa-arrow-right ml-3 group-hover:translate-x-1 transition-transform duration-300"></i>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            } else if (products.length > 0) {
                // Enhanced button for smaller collections
                modalContent.innerHTML += `
                    <div class="col-span-full mt-8">
                        <div class="text-center bg-gradient-to-r from-gray-600/10 to-gray-700/10 rounded-2xl p-6 border border-gray-500/20 hover:border-gray-500/40 transition-all duration-300 group">
                            <div class="mb-4">
                                <div class="w-16 h-16 bg-gradient-to-r from-gray-600 to-gray-700 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform duration-300 shadow-xl shadow-gray-500/30">
                                    <i class="fas fa-external-link-alt text-2xl text-white"></i>
                                </div>
                                <h3 class="text-xl font-bold text-white mb-2 group-hover:text-gray-300 transition-colors duration-300">Visit Full Category</h3>
                                <p class="text-white/60 text-sm mb-4">Access the complete ${category.title} experience</p>
                            </div>
                            <button onclick="window.location.href='/store/${category.game}'" class="bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-500 hover:to-gray-600 text-white px-8 py-3 rounded-xl font-semibold text-lg transition-all duration-300 shadow-lg hover:shadow-gray-500/40 transform hover:scale-105 group">
                                <span class="flex items-center justify-center">
                                    <i class="fas fa-store mr-2"></i>
                                    View Category Page
                                    <i class="fas fa-chevron-right ml-2 group-hover:translate-x-1 transition-transform duration-300"></i>
                                </span>
                            </button>
                        </div>
                    </div>
                `;
            }
        }

        // Enhanced modal close function
        function closeModal() {
            const modal = document.getElementById('categoryModal');
            const modalContainer = document.getElementById('modalContainer');
            
            modalContainer.classList.remove('scale-100');
            modalContainer.classList.add('scale-95');
            
            setTimeout(() => {
                modal.classList.add('opacity-0', 'pointer-events-none');
                document.body.style.overflow = 'auto';
            }, 200);
        }

        // Smooth scroll to categories
        function scrollToCategories() {
            document.querySelector('.py-20').scrollIntoView({ 
                behavior: 'smooth',
                block: 'start'
            });
        }
        
        // Smooth scroll to features
        function scrollToFeatures() {
            document.getElementById('features').scrollIntoView({ 
                behavior: 'smooth',
                block: 'start'
            });
        }

        // Enhanced event listeners
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        });

        document.getElementById('categoryModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        // Add loading animation to category cards
        document.addEventListener('DOMContentLoaded', function() {
            const categoryCards = document.querySelectorAll('.category-card');
            categoryCards.forEach((card, index) => {
                card.addEventListener('click', function() {
                    // Add click animation
                    card.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        card.style.transform = '';
                    }, 150);
                });
            });
        });

        // Epic Scroll-Based Animations
        class ScrollAnimations {
            constructor() {
                this.init();
            }
            
            init() {
                this.setupParallax();
                this.setupScrollReveal();
                this.setupCounters();
                this.bindEvents();
            }
            
            setupParallax() {
                this.parallaxLayers = document.querySelectorAll('.parallax-layer');
            }
            
            setupScrollReveal() {
                this.revealElements = document.querySelectorAll('.category-card, .card, .hero-stats, .hero-cta');
                this.revealElements.forEach(el => {
                    el.classList.add('scroll-reveal');
                });
            }
            
            setupCounters() {
                this.counters = document.querySelectorAll('.counter');
                this.countersAnimated = false;
            }
            
            bindEvents() {
                window.addEventListener('scroll', this.handleScroll.bind(this), { passive: true });
                window.addEventListener('resize', this.handleResize.bind(this), { passive: true });
            }
            
            handleScroll() {
                const scrollY = window.pageYOffset;
                
                // Parallax Effect
                this.parallaxLayers.forEach(layer => {
                    const speed = parseFloat(layer.dataset.speed) || 0.5;
                    const yPos = -(scrollY * speed);
                    layer.style.transform = `translateY(${yPos}px)`;
                });
                
                // Scroll Reveal
                this.revealElements.forEach(el => {
                    const elementTop = el.getBoundingClientRect().top;
                    const elementVisible = 150;
                    
                    if (elementTop < window.innerHeight - elementVisible) {
                        el.classList.add('revealed');
                    }
                });
                
                // Counter Animation
                if (!this.countersAnimated && scrollY > 200) {
                    this.animateCounters();
                    this.countersAnimated = true;
                }
                
                // Hero Content Parallax
                const heroContent = document.querySelector('.hero-content');
                if (heroContent) {
                    const heroParallax = scrollY * 0.3;
                    heroContent.style.transform = `translateY(${heroParallax}px)`;
                }
            }
            
            handleResize() {
                // Recalculate positions on resize
                this.revealElements.forEach(el => {
                    if (el.getBoundingClientRect().top < window.innerHeight) {
                        el.classList.add('revealed');
                    }
                });
            }
            
            animateCounters() {
                this.counters.forEach(counter => {
                    const target = parseInt(counter.dataset.target);
                    const duration = 2000;
                    const step = target / (duration / 16);
                    let current = 0;
                    
                    const timer = setInterval(() => {
                        current += step;
                        if (current >= target) {
                            counter.textContent = target + (target > 10 ? '+' : '');
                            clearInterval(timer);
                        } else {
                            counter.textContent = Math.floor(current);
                        }
                    }, 16);
                });
            }
        }
        
        // DELETED BROKEN FUNCTION

        // Fixed Toggle Function - No Flash
        function toggleExtraCategories() {
            const moreCategories = document.getElementById('moreCategories');
            const toggleIcon = document.getElementById('toggleIcon');
            const toggleText = document.getElementById('toggleText');
            
            if (moreCategories.classList.contains('hidden')) {
                // SHOW CATEGORIES
                const cards = moreCategories.querySelectorAll('.category-card');
                
                // First, hide all cards BEFORE showing container
                cards.forEach(card => {
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(20px)';
                    card.style.transition = 'all 0.4s ease';
                });
                
                // Now show the container (but cards are invisible)
                moreCategories.classList.remove('hidden');
                
                // Update button immediately
                toggleIcon.classList.remove('fa-plus');
                toggleIcon.classList.add('fa-minus');
                toggleText.textContent = 'Show Less Categories';
                
                // Now animate cards in one by one
                cards.forEach((card, index) => {
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, index * 100);
                });
                
            } else {
                // HIDE CATEGORIES
                const cards = moreCategories.querySelectorAll('.category-card');
                
                // Fade out cards
                cards.forEach((card, index) => {
                    setTimeout(() => {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(-10px)';
                    }, index * 50);
                });
                
                // Hide container after cards fade
                setTimeout(() => {
                    moreCategories.classList.add('hidden');
                    
                    // Update button
                    toggleIcon.classList.remove('fa-minus');
                    toggleIcon.classList.add('fa-plus');
                    toggleText.textContent = 'Show More Categories';
                    
                    // Reset card styles
                    cards.forEach(card => {
                        card.style.transition = '';
                        card.style.opacity = '';
                        card.style.transform = '';
                    });
                }, 400);
            }
        }

        // Initialize animations when DOM is loaded
        document.addEventListener('DOMContentLoaded', function() {
            new ScrollAnimations();
            
            // Add stagger animation to category cards
            const categoryCards = document.querySelectorAll('.category-card');
            categoryCards.forEach((card, index) => {
                card.style.animationDelay = `${index * 0.2}s`;
            });
        });
        
        // Intersection Observer for enhanced animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('fade-in', 'revealed');
                }
            });
        }, observerOptions);
    </script>
</x-app-layout>