@props(['section', 'products'])

@php
    $settings = $section->settings ?? [];
@endphp

<section id="katalog" x-data class="scroll-mt-6 bg-[#f7f0e5] px-5 py-20 sm:py-24 lg:px-8 lg:py-28">
    <div class="mx-auto max-w-7xl">
        <div class="grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-end">
            <div>
                <p class="text-xs font-bold tracking-[0.18em] text-[#b65324] uppercase">{{ $section->eyebrow }}</p>
                <h2 class="mt-4 max-w-2xl text-4xl font-black leading-[1.02] tracking-[-0.045em] text-[#2d2118] sm:text-5xl">{{ $section->heading }}</h2>
            </div>
            <div class="lg:justify-self-end">
                <p class="max-w-xl text-base leading-7 text-[#6b6258]">{{ $section->body }}</p>
                <nav aria-label="{{ __('ui.product_categories') }}" class="mt-6 flex flex-wrap gap-2">
                    @foreach ($products->unique('category') as $product)
                        <button type="button" data-target="{{ $product->slug }}" x-on:click="document.getElementById($el.dataset.target)?.scrollIntoView({ behavior: 'smooth', block: 'start' })" class="rounded-full border border-[#d8c7ae] bg-[#fffaf2] px-4 py-2 text-xs font-bold text-[#584b3d] transition hover:border-[#b65324] hover:text-[#b65324] focus:outline-none focus:ring-4 focus:ring-[#f6e4d9]">{{ $product->category }}</button>
                    @endforeach
                </nav>
            </div>
        </div>

        <div class="mt-12 grid gap-5 lg:grid-cols-12">
            @foreach ($products as $product)
                <x-home.product-card :product="$product" :number="$loop->iteration" :wide="$loop->first || $loop->last" :full="$products->count() === 1" />
            @endforeach
        </div>

        <div class="mt-8 flex flex-col justify-between gap-4 rounded-2xl border border-[#dfd0ba] bg-[#fffaf2] px-5 py-4 text-sm text-[#6b6258] sm:flex-row sm:items-center">
            <p><span class="font-bold text-[#362b20]">{{ $settings['note_title'] ?? '' }}</span> {{ $settings['note_body'] ?? '' }}</p>
            <a href="{{ $section->url($section->primary_cta_url) }}" class="inline-flex shrink-0 items-center gap-2 font-bold text-[#a4421d] transition hover:text-[#d95d24]">
                {{ $section->primary_cta_label }}
                <span aria-hidden="true">→</span>
            </a>
        </div>
    </div>
</section>