@extends('layouts.app')

@section('title', $game->name)

@section('content')
<div class="max-w-7xl mx-auto px-4">
    <!-- Game Hero dengan Background Blur -->
    <div class="relative mb-12 rounded-2xl overflow-hidden">
        <!-- Background Image dengan Blur -->
        <div class="absolute inset-0">
            <img src="{{ asset($game->banner) }}" 
                 alt="{{ $game->name }} Background"
                 class="w-full h-full object-cover scale-110 blur-xl opacity-50">
            <div class="absolute inset-0 bg-gradient-to-r from-[#4663ac]/90 to-[#c1d8f0]/90"></div>
        </div>
        
        <!-- Content -->
        <div class="relative z-10 flex flex-col md:flex-row items-center gap-8 p-8 md:p-12">
            <!-- Game Logo/Icon -->
            <div class="w-32 h-32 md:w-40 md:h-40 rounded-2xl overflow-hidden shadow-2xl border-4 border-white/20">
                <img src="{{ asset($game->icon) }}" 
                     alt="{{ $game->name }}"
                     class="w-full h-full object-cover">
            </div>
            
            <!-- Game Info -->
            <div class="flex-1 text-center md:text-left">
                <h1 class="text-4xl md:text-5xl font-bold text-white mb-3">{{ $game->name }}</h1>
                <p class="text-lg text-white/90 mb-4 max-w-2xl">
                    Temukan koleksi item terbaik untuk {{ $game->name }}. 
                    Tersedia berbagai pilihan dengan harga terbaik dan delivery instan!
                </p>
                <div class="flex flex-wrap gap-3 justify-center md:justify-start">
                    <span class="px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-white text-sm flex items-center gap-2">
                        <i class="fas fa-box"></i>
                        {{ $products->total() }} Items
                    </span>
                    <span class="px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-white text-sm flex items-center gap-2">
                        <i class="fas fa-bolt"></i>
                        Instant Delivery
                    </span>
                    <span class="px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-white text-sm flex items-center gap-2">
                        <i class="fas fa-shield-alt"></i>
                        100% Safe
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Products Grid (sama seperti sebelumnya) -->
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
        @foreach($products as $product)
        <div class="bg-white rounded-lg shadow hover:shadow-lg overflow-hidden transition-transform hover:-translate-y-1">
            <a href="/product/{{ $product->slug }}" class="block">
                <div class="aspect-square bg-gray-100 overflow-hidden">
                    <img src="{{ asset($product->image) }}" 
                         class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" 
                         alt="{{ $product->name }}">
                </div>
                {{-- Di dalam loop produk --}}
                <div class="p-3">
                    <h3 class="font-semibold text-sm line-clamp-2 mb-1">{{ $product->name }}</h3>
                    <p class="text-blue-600 font-bold text-sm">{{ currency($product->sale_price ?: $product->price) }}</p>
                </div>
            </a>
            <div class="px-3 pb-3">
                <form method="POST" action="/cart/add/{{ $product->id }}" class="w-full">
                    @csrf
                    <input type="hidden" name="quantity" value="1">
                    <button type="submit" 
                            class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white text-xs font-bold py-2 px-3 rounded hover:from-blue-700 hover:to-purple-700 transition flex items-center justify-center gap-1">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="white">
                            <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
                        </svg>
                        <span>Add to Cart</span>
                    </button>
                </form>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Pagination -->
    <div class="mt-8">
        {{ $products->links() }}
    </div>
</div>

<!-- Font Awesome untuk icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aspect-square {
    aspect-ratio: 1 / 1;
}
.hover\:-translate-y-1:hover {
    transform: translateY(-0.25rem);
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.hover\:scale-105:hover {
    transform: scale(1.05);
}
/* Backdrop blur support */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
</style>
@endsection