@extends('layouts.master')

@section('title', $category->name . ' - DigitalStore')

@section('content')

{{-- HEADER --}}
<section class="bg-slate-900 pt-32 pb-24 relative overflow-hidden">
    <div class="absolute inset-0 z-0 opacity-10">
        <div class="absolute -top-24 -right-24 w-[500px] h-[500px] bg-brand-500 blur-[120px] rounded-full"></div>
    </div>

    <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
        <nav class="flex items-center gap-2 text-[10px] font-900 uppercase tracking-widest text-slate-400 mb-8">
            <a href="{{ route('storefront.home') }}" class="hover:text-brand-500 transition-colors">Home</a>
            <span class="opacity-20">/</span>
            <span class="text-brand-500">{{ $category->name }}</span>
        </nav>

        <div class="flex flex-col lg:flex-row lg:items-end justify-between gap-8">
            <div class="space-y-4">
                <div class="flex items-center gap-6">
                    <div class="w-20 h-20 bg-white/5 border border-white/10 rounded-3xl flex items-center justify-center text-4xl shadow-2xl">
                        {{ $category->icon ?? '📁' }}
                    </div>
                    <h1 class="text-4xl lg:text-6xl font-900 text-white tracking-tight uppercase">
                        {{ $category->name }}
                    </h1>
                </div>
                @if($category->description)
                <p class="text-lg text-slate-400 leading-relaxed font-500 max-w-2xl">{{ $category->description }}</p>
                @endif
            </div>
            
            <div class="bg-white/5 border border-white/10 rounded-2xl px-6 py-4">
                <span class="text-[10px] font-900 text-slate-400 uppercase tracking-widest">
                    {{ number_format($products->total()) }} Premium Assets
                </span>
            </div>
        </div>
    </div>
</section>

{{-- PRODUCTS --}}
<main class="py-24 bg-slate-50">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        @if($products->isEmpty())
        <div class="py-32 text-center bg-white rounded-[3rem] border border-slate-100 shadow-sm">
            <div class="w-24 h-24 bg-slate-50 rounded-3xl flex items-center justify-center mx-auto mb-8 text-4xl opacity-50">
                🔍
            </div>
            <h2 class="text-2xl font-900 text-slate-900 mb-4 uppercase">No assets found</h2>
            <p class="text-slate-500 font-500 max-w-xs mx-auto mb-10">We couldn't find any products in this category yet.</p>
            <a href="{{ route('storefront.products') }}" class="inline-flex h-14 px-10 bg-brand-500 text-white rounded-2xl font-800 items-center justify-center shadow-lg shadow-brand-500/20">
                Browse All Marketplace
            </a>
        </div>
        @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            @foreach ($products as $product)
                @include('components.product-card', ['product' => $product])
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="mt-20 pt-10 border-t border-slate-200">
            {{ $products->links() }}
        </div>
        @endif
    </div>
</main>

@endsection