{{--
    Homepage hero (SOW 1.5). Cinematic but restrained: eyebrow, statement,
    supporting line, two CTAs, over full-bleed project photography or muted video.
    Falls back to an editorial treatment on the blueprint texture when no slide
    has been published, so the page never opens on an empty stage.
--}}
@php($hasSlides = $slides->isNotEmpty())

<section class="relative isolate overflow-hidden bg-dark"
         @if ($hasSlides && $slides->count() > 1)
             x-data="{
                 index: 0,
                 total: {{ $slides->count() }},
                 timer: null,
                 start() { if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) this.timer = setInterval(() => this.next(), 8000) },
                 stop() { clearInterval(this.timer) },
                 next() { this.index = (this.index + 1) % this.total },
                 go(i) { this.index = i; this.stop(); this.start() },
             }"
             x-init="start()" @mouseenter="stop()" @mouseleave="start()"
         @else
             x-data="{ index: 0 }"
         @endif
         aria-roledescription="{{ $hasSlides && $slides->count() > 1 ? __('carousel') : '' }}">

    @forelse ($slides as $i => $slide)
        <div x-show="index === {{ $i }}" @if ($i > 0) x-cloak @endif
             x-transition:enter="transition duration-700 ease-out"
             x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
             role="group" aria-roledescription="{{ __('slide') }}"
             aria-label="{{ __('Slide :n of :total', ['n' => $i + 1, 'total' => $slides->count()]) }}">

            <div class="absolute inset-0 -z-10">
                @if ($slide->media_type === 'video_file' && $slide->video_path)
                    <video class="size-full object-cover" autoplay muted loop playsinline preload="metadata"
                           poster="{{ image_url($slide->image) }}" aria-hidden="true">
                        <source src="{{ asset_path($slide->video_path) }}" type="video/mp4">
                    </video>
                @elseif ($slide->media_type === 'video_embed' && $slide->embed_url)
                    <iframe src="{{ embed_url($slide->embed_url) }}?autoplay=1&mute=1&loop=1&controls=0&playsinline=1"
                            class="pointer-events-none size-full scale-125 object-cover"
                            title="{{ $slide->title }}" allow="autoplay; encrypted-media" loading="lazy"></iframe>
                @else
                    {{-- LCP image: eager, high priority, slow cinematic drift. --}}
                    <img src="{{ image_url($slide->image) }}" alt="{{ $slide->title ? '' : '' }}" aria-hidden="true"
                         class="size-full object-cover {{ $i === 0 ? 'ken-burns' : '' }}"
                         @if ($i === 0) fetchpriority="high" decoding="async" @else loading="lazy" @endif>
                @endif

                <div class="scrim-side"></div>
            </div>

            <div class="container-page relative flex min-h-[34rem] flex-col justify-center py-24 lg:min-h-[42rem]">
                <div class="max-w-3xl">
                    @if ($slide->subtitle)
                        <p class="eyebrow mb-5 text-white/70">{{ $slide->subtitle }}</p>
                    @endif

                    @if ($slide->title)
                        <h1 class="font-display text-hero font-bold text-white">{{ $slide->title }}</h1>
                    @endif

                    @if ($slide->description)
                        <p class="prose-measure mt-6 text-lg leading-relaxed text-white/80 sm:text-xl">
                            {{ $slide->description }}
                        </p>
                    @endif

                    @if ($slide->cta_label || $slide->secondary_cta_label)
                        <div class="mt-9 flex flex-wrap gap-3">
                            @if ($slide->cta_label)
                                <x-button :href="$slide->cta_url ?: route('projects.index')" arrow>
                                    {{ $slide->cta_label }}
                                </x-button>
                            @endif

                            @if ($slide->secondary_cta_label)
                                <x-button variant="on-dark" :href="$slide->secondary_cta_url ?: route('sectors.index')">
                                    {{ $slide->secondary_cta_label }}
                                </x-button>
                            @endif
                        </div>
                    @endif

                    @if (filled($slide->badges))
                        <ul class="mt-10 flex flex-wrap gap-2 border-t border-white/15 pt-6">
                            @foreach ($slide->badges as $badge)
                                <li><x-badge variant="on-dark">{{ $badge }}</x-badge></li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>
        </div>
    @empty
        <div>
            <div class="absolute inset-0 -z-10 bg-blueprint-dark opacity-60" aria-hidden="true"></div>
            <div class="absolute inset-0 -z-10 bg-gradient-to-br from-dark via-dark-surface to-primary"></div>

            <div class="container-page relative flex min-h-[30rem] flex-col justify-center py-24">
                <div class="max-w-3xl">
                    <p class="eyebrow mb-5 text-white/70">
                        {{ __('Engineering') }} · {{ __('Infrastructure') }} · {{ __('Development') }}
                    </p>
                    <h1 class="font-display text-hero font-bold text-white">
                        {{ setting('site_tagline', __('Engineering solutions for a better tomorrow.')) }}
                    </h1>
                    <p class="prose-measure mt-6 text-lg leading-relaxed text-white/80">
                        {{ setting('site_description') }}
                    </p>
                    <div class="mt-9 flex flex-wrap gap-3">
                        <x-button :href="route('projects.index')" arrow>{{ __('Explore Our Projects') }}</x-button>
                        <x-button variant="on-dark" :href="route('sectors.index')">{{ __('Our Services') }}</x-button>
                    </div>
                </div>
            </div>
        </div>
    @endforelse

    @if ($hasSlides && $slides->count() > 1)
        <div class="absolute inset-x-0 bottom-10 z-10">
            <div class="container-page flex items-center gap-3">
                @foreach ($slides as $i => $slide)
                    <button type="button" @click="go({{ $i }})"
                            class="h-1 rounded-full transition-all duration-300"
                            :class="index === {{ $i }} ? 'w-12 bg-white' : 'w-6 bg-white/35 hover:bg-white/70'"
                            aria-label="{{ __('Show slide :n', ['n' => $i + 1]) }}"
                            :aria-current="index === {{ $i }}"></button>
                @endforeach
            </div>
        </div>
    @endif
</section>