@props(['benefits' => []])

{{-- Editable demo labels. These are not confirmed delivery, payment, or support policies. --}}
<section aria-label="{{ __('ui.benefits') }}" data-editable="benefits" class="mt-3 lg:mt-4">
    <div class="benefits-marquee lg:hidden" data-benefits-marquee>
        <div class="benefits-marquee-viewport overflow-hidden" data-marquee-viewport>
            <div class="benefits-marquee-track" data-marquee-track>
                @foreach ([false, true] as $clone)
                    <ul class="benefits-marquee-set" @if ($clone) aria-hidden="true" @endif @unless ($clone) data-marquee-set @endunless>
                        @foreach ($benefits as $benefit)
                            <li class="flex shrink-0 items-center gap-2 pr-8 select-none">
                                <x-store.icon :name="$benefit['icon']" class="text-brand" width="26" height="26" />
                                <div>
                                    <p class="text-[13px] font-semibold leading-tight whitespace-nowrap text-navy">{{ $benefit['title'] }}</p>
                                    <p class="text-[11px] leading-tight whitespace-nowrap text-muted">{{ $benefit['caption'] }}</p>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endforeach
            </div>
        </div>
    </div>

    <ul class="hidden grid-cols-2 gap-x-3 gap-y-3 lg:grid lg:grid-cols-4 lg:divide-x lg:divide-[#EEF1F6]">
        @foreach ($benefits as $benefit)
            <li class="flex min-w-0 items-center gap-2 lg:px-4 lg:first:pl-1">
                <x-store.icon :name="$benefit['icon']" class="text-brand" width="26" height="26" />
                <div class="min-w-0">
                    <p class="text-[13px] font-semibold leading-tight text-navy">{{ $benefit['title'] }}</p>
                    <p class="text-[11px] leading-tight text-muted">{{ $benefit['caption'] }}</p>
                </div>
            </li>
        @endforeach
    </ul>
</section>