@props(['products' => [], 'filters' => []])

<section id="featured" aria-labelledby="featured-title" class="mt-5 lg:mt-6">
    <div class="mb-2.5 flex items-center justify-between gap-3 lg:mb-3">
        <h2 id="featured-title" class="text-[17px] font-bold text-navy lg:text-xl">{{ __('ui.featured') }}</h2>
        <a href="#featured" data-view-all class="inline-flex items-center gap-1 text-[13px] font-semibold text-brand lg:hidden">
            {{ __('ui.view_all') }}
            <x-store.icon name="arrow-right" width="14" height="14" />
        </a>
        <div class="hidden items-center gap-1.5 lg:flex">
            @foreach ($filters as $filter)
                <button
                    type="button"
                    data-filter="{{ $filter['filter'] }}"
                    data-filter-chip="{{ $filter['filter'] }}"
                    class="rounded-full px-3 py-1 text-[12px] font-semibold"
                    aria-pressed="{{ $filter['filter'] === 'all' ? 'true' : 'false' }}"
                >{{ $filter['label'] }}</button>
            @endforeach
            <a href="#featured" data-view-all class="ml-1 inline-flex items-center gap-1 text-[13px] font-semibold text-brand">
                {{ __('ui.view_all') }}
                <x-store.icon name="arrow-right" width="14" height="14" />
            </a>
        </div>
    </div>
    <div data-product-grid class="grid grid-cols-2 gap-2.5 md:grid-cols-3 lg:grid-cols-6 lg:gap-3">
        @foreach ($products as $product)
            <x-store.product-card :product="$product" />
        @endforeach
        <p data-empty-products hidden class="col-span-full rounded-xl bg-[#F5F6F8] px-4 py-8 text-center text-sm text-muted">{{ __('ui.no_matches') }}</p>
    </div>
    <div class="mt-4 flex justify-center">
        <button type="button" data-see-more class="see-more" @if (count($products) <= 6) hidden @endif>
            {{ __('ui.see_more') }}
            <x-store.icon name="chevron-down" class="see-more-icon" width="16" height="16" />
        </button>
    </div>
</section>