@extends('layouts.app')

@section('content')
<section class="py-16 md:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="relative h-80 rounded-lg overflow-hidden mb-16">
            <picture class="absolute inset-0">
                @if(image_has_webp($category->image))
                    <source type="image/webp" srcset="{{ image_webp_url($category->image) }}">
                @endif
                <img src="{{ asset('images/' . $category->image) }}" alt="{{ $category->name }}" class="absolute inset-0 w-full h-full object-cover" decoding="async" fetchpriority="high">
            </picture>
            <div class="absolute inset-0 bg-gradient-to-r from-black/80 to-transparent"></div>
            <div class="absolute bottom-0 left-0 p-8 md:p-12">
                <p class="text-[#c77d4a] uppercase tracking-[0.2em] text-xs mb-3">{{ __('collection') }}</p>
                <h1 class="text-4xl md:text-5xl font-light text-white">{{ $category->name }}</h1>
            </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            @foreach($products as $product)
                @include('partials.product-card', ['product' => $product])
            @endforeach
        </div>

        <div class="mt-16">
            {{ $products->links() }}
        </div>
    </div>
</section>
@endsection