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

@php
    $heroTitleFallback = site_profile()->label('hero_title', __('site.hero_home_title'));
    $heroSubtitleFallback = site_profile()->label('hero_subtitle', __('site.hero_home_subtitle'));

    $items = collect($slides)
        ->filter(fn ($row) => ! empty($row['image_url']))
        ->values()
        ->map(function (array $row) use ($heroTitleFallback, $heroSubtitleFallback) {
            $title = trim((string) ($row['title'] ?? ''));
            $subtitle = trim((string) ($row['alt_text'] ?? ''));
            if ($subtitle !== '' && $subtitle === $title) {
                $subtitle = '';
            }

            return [
                'id'       => (int) ($row['id'] ?? 0),
                'title'    => $title !== '' ? $title : $heroTitleFallback,
                'subtitle' => $subtitle !== '' ? $subtitle : ($title === '' ? $heroSubtitleFallback : ''),
                'alt'      => (string) ($row['alt_text'] ?? $row['title'] ?? ''),
                'src'      => (string) $row['image_url'],
                'srcset'   => $row['srcset'] ?? null,
                'sizes'    => $row['sizes'] ?? null,
                'link'     => filled($row['link'] ?? null) ? (string) $row['link'] : null,
                'target'   => ($row['target'] ?? '_self') === '_blank' ? '_blank' : '_self',
            ];
        })
        ->all();
@endphp

@if (count($items) > 0)
    <section
        class="cchp-top-banner"
        x-data="siteTopBannerSlider(@js([
            'slides' => $items,
            'mode' => 'slide',
            'autoplayMs' => 5000,
            'labels' => [
                'nav' => __('site.hero_slider_nav'),
                'prev' => __('site.hero_slider_prev'),
                'next' => __('site.hero_slider_next'),
            ],
        ]))"
        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="cchp-top-banner__viewport">
            <div class="cchp-top-banner__track" dir="ltr" :style="trackStyle">
                @foreach ($items as $idx => $slide)
                    <div
                        class="cchp-top-banner__slide"
                        role="group"
                        aria-roledescription="slide"
                        aria-label="{{ $slide['alt'] !== '' ? $slide['alt'] : $slide['title'] }}"
                        :aria-hidden="(activeIndex !== {{ $idx }}).toString()"
                    >
                        @if ($slide['link'])
                            <a
                                class="cchp-top-banner__frame cchp-top-banner__link"
                                href="{{ $slide['link'] }}"
                                target="{{ $slide['target'] }}"
                                @if ($slide['target'] === '_blank') rel="noopener noreferrer" @endif
                            >
                        @else
                            <div class="cchp-top-banner__frame">
                        @endif
                            <div
                                class="cchp-top-banner__ken {{ $idx === 0 ? 'kb-right' : '' }}"
                                :class="activeIndex === {{ $idx }} ? kenBurnsClass({{ $idx }}) : ''"
                            >
                                <img
                                    class="cchp-top-banner__img"
                                    src="{{ $slide['src'] }}"
                                    @if (! empty($slide['srcset'])) srcset="{{ $slide['srcset'] }}" @endif
                                    @if (! empty($slide['sizes'])) sizes="{{ $slide['sizes'] }}" @endif
                                    alt="{{ $slide['alt'] }}"
                                    loading="{{ $idx === 0 ? 'eager' : 'lazy' }}"
                                    fetchpriority="{{ $idx === 0 ? 'high' : 'low' }}"
                                    decoding="async"
                                    width="1920"
                                    height="320"
                                    draggable="false"
                                />
                            </div>
                            <div class="cchp-top-banner__veil" aria-hidden="true"></div>
                            <div class="cchp-top-banner__copy">
                                @if ($slide['title'] !== '')
                                    <p class="cchp-top-banner__title">{{ $slide['title'] }}</p>
                                @endif
                                @if ($slide['subtitle'] !== '')
                                    <p class="cchp-top-banner__subtitle">{{ $slide['subtitle'] }}</p>
                                @endif
                            </div>
                        @if ($slide['link'])
                            </a>
                        @else
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>

        @if (count($items) > 1)
            <button
                type="button"
                class="cchp-top-banner__arrow cchp-top-banner__arrow--prev"
                @click="prev()"
                :aria-label="labels.prev"
            >
                <x-site.icon name="chevron-left" class="cchp-top-banner__chevron" />
            </button>
            <button
                type="button"
                class="cchp-top-banner__arrow cchp-top-banner__arrow--next"
                @click="next()"
                :aria-label="labels.next"
            >
                <x-site.icon name="chevron-right" class="cchp-top-banner__chevron" />
            </button>
        @endif
    </section>
@endif