@extends('layouts.app')

@section('content')
    @php($hero = data_get($section, 'data', []))
    <main>
        <section class="relative h-[60vh] min-h-105 overflow-hidden">
            @if ($media)<img class="absolute inset-0 h-full w-full object-cover" src="{{ $media->url() }}" alt="">@endif
            <div class="absolute inset-0 bg-gradient-to-b from-olive/70 via-olive/45 to-olive/80"></div>
            <div class="container-page relative flex h-full flex-col justify-end pb-16 text-cream md:pb-24">
                @can('update', $page)
                    <livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="products.hero" />
                @endcan
                <p class="eyebrow text-cream/70">{{ $hero['eyebrow'] ?? '' }}</p>
                <h1 class="display-xl mt-4 max-w-3xl">{{ $hero['title'] ?? $translation->title }}</h1>
                <p class="mt-5 max-w-2xl text-base leading-relaxed text-cream/85 md:text-lg">{{ $hero['summary'] ?? $translation->summary }}</p>
            </div>
        </section>

        <nav class="product-filter sticky z-30 border-b border-border/60 bg-cream/95 backdrop-blur" aria-label="{{ __('Products') }}">
            <div class="container-page py-3 md:py-4">
                <div class="product-filter-rail horizontal-filter-rail" data-horizontal-scroll-rail>
                <div class="no-scrollbar product-filter-row horizontal-filter-row px-1" role="toolbar" aria-label="{{ __('Filter products by category') }}" data-horizontal-scroll-row>
                    <a @class([
                        'whitespace-nowrap rounded-full border px-4 py-2 text-[11px] uppercase tracking-[.12em] md:text-xs',
                        'border-olive bg-olive text-cream' => $activeCategoryKey === 'all',
                        'border-border text-foreground/70 transition hover:border-olive' => $activeCategoryKey !== 'all',
                    ]) href="{{ route('products', ['locale' => $locale]) }}" draggable="false">{{ __('All Products') }}</a>
                @foreach ($categories as $category)
                    <a @class([
                        'whitespace-nowrap rounded-full border px-4 py-2 text-[11px] uppercase tracking-[.12em] md:text-xs',
                        'border-olive bg-olive text-cream' => $activeCategoryKey === $category->key,
                        'border-border text-foreground/70 transition hover:border-olive' => $activeCategoryKey !== $category->key,
                    ]) href="{{ route('products', ['locale' => $locale, 'category' => $category->key]) }}#{{ $category->key }}" draggable="false">{{ $category->translation($locale)?->name }}</a>
                @endforeach
                </div>
                </div>
            </div>
        </nav>

        @forelse ($catalogueCategories as $index => $category)
            <section id="{{ $category->key }}" data-product-category="{{ $category->key }}" @class(['relative scroll-mt-40 overflow-hidden border-t border-border/60 py-16 md:scroll-mt-48 md:py-24', 'bg-cedar/[0.07]' => $index % 2 === 1, 'bg-cream' => $index % 2 === 0])>
                <div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.04]" aria-hidden="true"></div>
                <div class="container-page relative">
                    <div class="mb-10 grid items-center gap-10 md:mb-14 md:grid-cols-2 md:gap-16">
                        <div @class(['space-y-5', 'md:order-2' => $index % 2 === 1])>
                            @can('update', $category)
                                <livewire:product-category-inline-editor :category="$category" :locale="$locale" :key="'product-category-'.$category->id.'-'.$locale" />
                            @endcan
                            <div class="rule-leaf"><span class="block h-px w-8 bg-cedar"></span><p class="eyebrow">{{ str_pad((string) ($category->sort_order), 2, '0', STR_PAD_LEFT) }} · {{ $category->translation($locale)?->name }}</p></div>
                            <h2 class="display-xl">{{ $category->translation($locale)?->name }}</h2>
                            @if ($category->translation($locale)?->description)<p class="leading-relaxed text-foreground/70">{{ $category->translation($locale)->description }}</p>@endif
                            <p class="pt-1 text-xs uppercase tracking-[.18em] text-cedar">{{ trans_choice('{0} No products|{1} :count product|[2,*] :count products', $category->products->count(), ['count' => $category->products->count()]) }}</p>
                        </div>
                        @php($categoryImage = $category->imageMedia)
                        @if ($categoryImage)
                            <div @class(['aspect-[16/10] overflow-hidden rounded-sm bg-cream', 'md:order-1' => $index % 2 === 1])><img class="h-full w-full object-center object-cover" src="{{ $categoryImage->url() }}" alt="{{ $categoryImage->translation($locale)?->alt_text ?? $category->translation($locale)?->name }}" loading="lazy"></div>
                        @endif
                    </div>
                    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:gap-6 lg:grid-cols-4 xl:grid-cols-5">
                        @forelse ($category->products as $product)
                            @php($productTranslation = $product->translations->firstWhere('locale', $locale))
                            @php($secondaryTranslation = $product->translations->firstWhere('locale', $locale === 'ar' ? 'en' : 'ar'))
                            <article class="group overflow-hidden rounded-sm border border-border/60 bg-card transition-shadow hover:shadow-lg">
                                @php($productMedia = $product->mediaAssets->first())
                                <a class="block aspect-square overflow-hidden bg-cream" href="{{ route('product.show', ['locale' => $locale, 'slug' => $productTranslation->slug]) }}">
                                    @if ($productMedia)<img class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" src="{{ $productMedia->url() }}" alt="{{ $productTranslation?->name }}" loading="lazy">@else<div class="h-full w-full bg-muted"></div>@endif
                                </a>
                                <div class="p-3 text-center md:p-4">
                                    <h3 class="text-sm leading-snug text-foreground md:text-[15px]"><a href="{{ route('product.show', ['locale' => $locale, 'slug' => $productTranslation->slug]) }}">{{ $productTranslation?->name }}</a></h3>
                                    @if ($secondaryTranslation?->name)<p class="mt-1 block text-xs text-foreground/55" dir="{{ $locale === 'ar' ? 'ltr' : 'rtl' }}">{{ $secondaryTranslation->name }}</p>@endif
                                </div>
                            </article>
                        @empty
                            <p class="col-span-full border border-dashed border-border p-6 text-sm text-olive/60">{{ __('No products available in this category yet.') }}</p>
                        @endforelse
                    </div>
                </div>
            </section>
        @empty
            <section class="container-page py-24"><h2 class="font-display text-4xl text-olive">{{ __('Products are being prepared.') }}</h2></section>
        @endforelse
    </main>
@endsection