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

<section aria-label="Promotions" class="mt-4 grid gap-3 lg:mt-5 lg:grid-cols-3">
    @foreach ($banners as $banner)
        <article class="promo-banner promo-banner-{{ $banner['tone'] }} flex min-h-[138px] items-center gap-3 rounded-2xl px-4 py-3 lg:min-h-[148px] lg:px-5">
            <div class="min-w-0 flex-1">
                <p class="text-[10px] font-semibold uppercase tracking-[0.12em] text-brand">{{ $banner['title'][0] }}</p>
                @if (! empty($banner['title'][1]))
                    <h2 class="mt-0.5 text-[16px] font-bold leading-tight text-navy lg:text-[17px]">{{ $banner['title'][1] }}</h2>
                @endif
                <p class="mt-1 text-[12px] leading-snug text-muted">{{ $banner['text'] }}</p>
                @if (! empty($banner['href']))
                    <a href="{{ $banner['href'] }}" class="promo-banner-cta mt-2.5 inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1.5 text-[12px] font-semibold text-navy">
                        {{ $banner['cta'] }}
                        <x-store.icon name="arrow-right" width="14" height="14" />
                    </a>
                @else
                    <button type="button" data-filter="{{ $banner['filter'] }}" class="promo-banner-cta mt-2.5 inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1.5 text-[12px] font-semibold text-navy">
                        {{ $banner['cta'] }}
                        <x-store.icon name="arrow-right" width="14" height="14" />
                    </button>
                @endif
            </div>
            @if (! empty($banner['image_path']))
                <x-store.picture :path="$banner['image_path']" alt="" sizes="104px" class="promo-banner-art h-[92px] w-[92px] shrink-0 object-contain lg:h-[104px] lg:w-[104px]" />
            @else
                <x-store.image-placeholder :label="$banner['image']" class="promo-banner-art h-[92px] w-[92px] shrink-0 lg:h-[104px] lg:w-[104px]" />
            @endif
        </article>
    @endforeach
</section>