{{-- Home page banner carousel: full-width, image-only slides (any text lives inside the image itself),
     sliding sideways in an endless loop (resources/js/banner.js).
     Fully driven by Admin > Home banners: visible banners with an image, in their sort order.
     With no visible banners, the strip is simply left out. --}}
@php
    $org = seo()->orgName();
    $items = $slides->filter(fn ($s) => $s->image_url)->values()->map(function ($s, $i) use ($org) {
        $thumb = $s->thumb_url;
        $hasThumb = $thumb && $thumb !== $s->image_url;

        return [
            'img' => $s->image_url,
            // Uploads are stored as a large main image plus a 640px copy: let phones take the small one.
            'srcset' => $hasThumb ? $thumb.' 640w, '.$s->image_url.' 1600w' : null,
            'alt' => filled(trim((string) $s->title, " .-_")) ? $s->title : $org.' banner '.($i + 1),
            'url' => $s->button_url,
        ];
    })->all();
    $n = count($items);
@endphp
<h1 class="sr-only">{{ $org }}: donate for food, education and care</h1>
@if ($n)
<section class="hero-slider-wrap" aria-label="Featured">
    <div class="hero-banner" @if ($n > 1) data-banner data-autoplay="3000" @endif role="region" aria-roledescription="carousel" aria-label="Featured banners">
        <ul class="hbanner-track" aria-live="off">
            @foreach ($items as $i => $s)
                <li class="hbanner" role="group" aria-roledescription="slide" aria-label="{{ $i + 1 }} of {{ $n }}" @if ($i > 0) inert @endif>
                    @if ($s['url'])<a class="hbanner__link" href="{{ $s['url'] }}">@endif
                    <img class="hbanner__img" src="{{ $s['img'] }}" @if ($s['srcset']) srcset="{{ $s['srcset'] }}" sizes="100vw" @endif
                         alt="{{ $s['alt'] }}" width="2172" height="724" decoding="async" draggable="false" fetchpriority="{{ $i === 0 ? 'high' : 'low' }}">
                    @if ($s['url'])</a>@endif
                </li>
            @endforeach
        </ul>

        @if ($n > 1)
            <button class="slider__nav hbanner-nav hbanner-nav--prev" type="button" data-prev aria-label="Previous banner"><svg class="i" aria-hidden="true"><use href="#i-chevron"/></svg></button>
            <button class="slider__nav hbanner-nav hbanner-nav--next" type="button" data-next aria-label="Next banner"><svg class="i" aria-hidden="true"><use href="#i-chevron"/></svg></button>
            <div class="slider__dots hbanner-dots" role="group" aria-label="Choose a banner">
                @foreach ($items as $i => $s)
                    <button type="button" data-dot="{{ $i }}" aria-label="Go to banner {{ $i + 1 }}" @if ($i === 0) aria-current="true" @endif></button>
                @endforeach
            </div>
        @endif
    </div>
</section>
@endif