{{-- Impact slider (SOW 1.11): field photography with quick-link tags. --}}
<section class="section bg-surface"
         x-data="{
             index: 0,
             total: {{ $slides->count() }},
             next() { this.index = (this.index + 1) % this.total },
             prev() { this.index = (this.index - 1 + this.total) % this.total },
         }"
         @keydown.arrow-right="next()" @keydown.arrow-left="prev()">

    <div class="container-page">
        <div class="flex flex-wrap items-end justify-between gap-6">
            <x-section-heading :eyebrow="__('Impact')"
                               :title="setting('home_impact_title', __('Field work, project sites and community impact'))" />

            @if ($slides->count() > 1)
                <div class="flex shrink-0 items-center gap-3">
                    <span class="meta-label" aria-live="polite">
                        <span x-text="index + 1"></span> / {{ $slides->count() }}
                    </span>

                    <div class="flex gap-2">
                        <button type="button" @click="prev()" aria-label="{{ __('Previous slide') }}"
                                class="rounded-lg border border-border p-2.5 text-text-secondary transition hover:border-primary hover:text-primary">
                            <x-icon name="chevron-left" class="size-4" />
                        </button>
                        <button type="button" @click="next()" aria-label="{{ __('Next slide') }}"
                                class="rounded-lg border border-border p-2.5 text-text-secondary transition hover:border-primary hover:text-primary">
                            <x-icon name="chevron-right" class="size-4" />
                        </button>
                    </div>
                </div>
            @endif
        </div>

        <div class="relative mt-8 overflow-hidden rounded-2xl" data-mask-reveal>
            @foreach ($slides as $i => $slide)
                <div x-show="index === {{ $i }}" @if ($i > 0) x-cloak @endif
                     x-transition:enter="transition duration-500 ease-out"
                     x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                     role="group" aria-roledescription="{{ __('slide') }}">

                    <div class="relative aspect-16/9 sm:aspect-21/9">
                        <img src="{{ image_url($slide->image) }}" alt="{{ $slide->title }}" loading="lazy" decoding="async"
                             class="size-full object-cover">
                        <div class="scrim"></div>

                        <div class="absolute inset-x-0 bottom-0 p-6 sm:p-10">
                            @if (filled($slide->tags))
                                <ul class="mb-4 flex flex-wrap gap-2">
                                    @foreach ($slide->tags as $tag)
                                        <li><x-badge variant="on-dark">{{ $tag }}</x-badge></li>
                                    @endforeach
                                </ul>
                            @endif

                            @if ($slide->title)
                                <h3 class="font-display text-xl font-semibold text-white sm:text-2xl">{{ $slide->title }}</h3>
                            @endif

                            @if ($slide->caption)
                                <p class="prose-measure mt-2 text-sm text-white/75">{{ $slide->caption }}</p>
                            @endif

                            @if ($slide->link_url)
                                <a href="{{ $slide->link_url }}" class="link-arrow mt-5 text-white hover:text-primary-200">
                                    {{ __('Read the story') }} <x-icon name="arrow-right" class="icon-arrow size-4" />
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>