@props([
    'slides' => [],
])

@php
    $items = collect($slides)
        ->filter(fn ($row) => ! empty($row['image_url']))
        ->values()
        ->map(fn (array $row) => [
            'id'       => (int) ($row['id'] ?? 0),
            'title'    => (string) ($row['title'] ?? ''),
            'subtitle' => (string) ($row['alt_text'] ?? ''),
            'alt'      => (string) ($row['alt_text'] ?? $row['title'] ?? ''),
            'src'      => (string) $row['image_url'],
            'srcset'   => $row['srcset'] ?? null,
            'sizes'    => $row['sizes'] ?? null,
        ])
        ->all();

    $heroStats = site_profile()->shows('hero_kpis') ? config('site.hero_stats', []) : [];
    $heroTitleFallback = site_profile()->label('hero_title', __('site.hero_home_title'));
    $heroSubtitleFallback = site_profile()->label('hero_subtitle', __('site.hero_home_subtitle'));
@endphp

@if (count($items) > 0)
    <section
        class="site-top-hero"
        x-data="siteTopBannerSlider(@js([
            'slides' => $items,
            'autoplayMs' => 5500,
            'labels' => [
                'nav' => __('site.hero_slider_nav'),
            ],
        ]))"
        x-init="init()"
        x-on:keydown.left.prevent="onArrowLeft()"
        x-on:keydown.right.prevent="onArrowRight()"
        @mouseenter="onHover(true)"
        @mouseleave="onHover(false)"
        tabindex="0"
        role="region"
        aria-roledescription="carousel"
        aria-label="{{ __('site.hero_slider_nav') }}"
    >
        <div class="site-top-hero__media" aria-hidden="true">
            @foreach ($items as $idx => $slide)
                <div
                    class="site-top-hero__slide {{ $idx === 0 ? 'site-top-hero__slide--active' : '' }}"
                    :class="{ 'site-top-hero__slide--active': activeIndex === {{ $idx }} }"
                    :aria-hidden="(activeIndex !== {{ $idx }}).toString()"
                >
                    <div
                        class="site-top-hero__ken {{ $idx === 0 ? 'kb-right' : '' }}"
                        :class="activeIndex === {{ $idx }} ? kenBurnsClass({{ $idx }}) : ''"
                    >
                        <img
                            class="site-top-hero__img"
                            src="{{ $slide['src'] }}"
                            @if (! empty($slide['srcset'])) srcset="{{ $slide['srcset'] }}" @endif
                            @if (! empty($slide['sizes'])) sizes="{{ $slide['sizes'] }}" @endif
                            alt=""
                            loading="{{ $idx === 0 ? 'eager' : 'lazy' }}"
                            fetchpriority="{{ $idx === 0 ? 'high' : 'low' }}"
                            decoding="async"
                            width="1920"
                            height="1080"
                            draggable="false"
                        />
                    </div>
                </div>
            @endforeach
        </div>

        <div class="site-top-hero__veil" aria-hidden="true"></div>
        <div class="site-top-hero__veil site-top-hero__veil--side" aria-hidden="true"></div>
        <div class="site-top-hero__veil site-top-hero__veil--bottom" aria-hidden="true"></div>

        <div class="site-top-hero__content">
            <div class="site-container site-top-hero__inner">
                <p class="site-top-hero__eyebrow">{{ brand_name() }}</p>

                <h1
                    class="site-top-hero__title"
                    x-text="slides[activeIndex]?.title || @js($heroTitleFallback)"
                >{{ count($items) > 0 ? $items[0]['title'] : $heroTitleFallback }}</h1>

                <p
                    class="site-top-hero__subtitle"
                    x-text="slides[activeIndex]?.subtitle || @js($heroSubtitleFallback)"
                >{{ count($items) > 0 ? $items[0]['subtitle'] : $heroSubtitleFallback }}</p>

                <div class="site-top-hero__actions">
                    <x-site.profile-cta name="primary" class="site-top-hero__cta" />
                    <x-site.profile-cta name="secondary" variant="ghost" class="site-top-hero__cta site-top-hero__cta--ghost" />
                </div>

                @if (site_profile()->shows('hero_usps'))
                <ul class="site-top-hero__usps">
                    <li>{{ site_profile()->label('hero_usp_1', __('site.hero_usp_1')) }}</li>
                    <li>{{ site_profile()->label('hero_usp_2', __('site.hero_usp_2')) }}</li>
                    <li>{{ site_profile()->label('hero_usp_3', __('site.hero_usp_3')) }}</li>
                </ul>
                @endif

                @if (count($heroStats) > 0)
                    <div class="site-top-hero__kpis" role="list">
                        @foreach ($heroStats as $stat)
                            <div class="site-top-hero__kpi" role="listitem">
                                <p class="site-top-hero__kpi-value" dir="ltr">{{ $stat['value'] ?? '' }}</p>
                                <p class="site-top-hero__kpi-label">{{ __($stat['label_key'] ?? '') }}</p>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        @if (count($items) > 1)
            <nav class="site-top-hero__dots" :aria-label="labels.nav || '{{ __('site.hero_slider_nav') }}'" role="tablist">
                <template x-for="(slide, idx) in slides" :key="`dot-${slide.id}-${idx}`">
                    <button
                        type="button"
                        class="site-top-hero__dot"
                        :class="{ 'site-top-hero__dot--active': idx === activeIndex }"
                        role="tab"
                        :aria-selected="(idx === activeIndex).toString()"
                        :aria-label="slide.alt || slide.title || ('{{ __('site.hero_slider_nav') }} ' + (idx + 1))"
                        @click="goTo(idx)"
                    ></button>
                </template>
            </nav>
        @endif
    </section>
@endif