@props([
    'featured' => null,
    'rail' => null,
])

@php
    $featuredItems = collect($featured ?? [])
        ->filter()
        ->values()
        ->map(fn ($news) => \App\Support\Cards\NewsCardPresenter::from($news))
        ->filter(fn (array $card) => filled($card['image'] ?? null) || filled($card['title'] ?? null))
        ->values();

    $railItems = collect($rail ?? [])
        ->filter()
        ->values()
        ->map(fn ($news) => \App\Support\Cards\NewsCardPresenter::from($news))
        ->values();

    $sliderSlides = $featuredItems
        ->map(fn (array $card) => [
            'id' => $card['id'],
            'title' => $card['title'],
            'image_url' => $card['image'] ?? '',
        ])
        ->all();

    $newsIndexUrl = route('site.news.index', ['locale' => app()->getLocale()]);
@endphp

@if ($featuredItems->isNotEmpty() || $railItems->isNotEmpty())
    <section
        class="cchp-news-stage"
        aria-label="{{ __('site.section_news') }}"
    >
        <div class="site-container cchp-news-stage__inner">
            <div class="cchp-news-stage__grid">
                @if ($featuredItems->isNotEmpty())
                    <div
                        class="cchp-news-stage__slider"
                        x-data="siteTopBannerSlider(@js([
                            'slides' => $sliderSlides,
                            'mode' => 'slide',
                            'autoplayMs' => 5600,
                            'labels' => [
                                'nav' => __('site.section_news'),
                                '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.section_news') }}"
                    >
                        <div class="cchp-news-stage__viewport">
                            <div class="cchp-news-stage__track" dir="ltr" :style="trackStyle">
                                @foreach ($featuredItems as $idx => $card)
                                    <article
                                        class="cchp-news-stage__slide"
                                        role="group"
                                        aria-roledescription="slide"
                                        aria-label="{{ $card['title'] }}"
                                        :aria-hidden="(activeIndex !== {{ $idx }}).toString()"
                                    >
                                        <div class="cchp-news-stage__frame">
                                            <div
                                                class="cchp-news-stage__ken {{ $idx === 0 ? 'kb-right' : '' }}"
                                                :class="activeIndex === {{ $idx }} ? kenBurnsClass({{ $idx }}) : ''"
                                            >
                                                @if (! empty($card['image']))
                                                    <img
                                                        class="cchp-news-stage__img"
                                                        src="{{ $card['image'] }}"
                                                        alt="{{ $card['title'] }}"
                                                        loading="{{ $idx === 0 ? 'eager' : 'lazy' }}"
                                                        fetchpriority="{{ $idx === 0 ? 'high' : 'low' }}"
                                                        decoding="async"
                                                        width="1200"
                                                        height="675"
                                                        draggable="false"
                                                    />
                                                @else
                                                    <div class="cchp-news-stage__img-fallback" aria-hidden="true"></div>
                                                @endif
                                            </div>
                                            <div class="cchp-news-stage__veil" aria-hidden="true"></div>
                                            <div class="cchp-news-stage__copy">
                                                <div class="cchp-news-stage__meta">
                                                    @if ($card['category'] !== '')
                                                        <span class="cchp-news-stage__badge">{{ $card['category'] }}</span>
                                                    @endif
                                                    @if ($card['date'])
                                                        <time class="cchp-news-stage__date" datetime="{{ $card['datetime'] }}">{{ $card['date'] }}</time>
                                                    @endif
                                                </div>
                                                <h2 class="cchp-news-stage__title">
                                                    <a href="{{ $card['url'] }}">{{ $card['title'] }}</a>
                                                </h2>
                                                @if ($card['excerpt'])
                                                    <p class="cchp-news-stage__excerpt">{{ \Illuminate\Support\Str::limit($card['excerpt'], 140) }}</p>
                                                @endif
                                                <div class="cchp-news-stage__actions">
                                                    <a class="cchp-news-stage__cta" href="{{ $card['url'] }}">
                                                        {{ __('site.news_stage_view') }}
                                                        <x-site.icon name="chevron-left" class="cchp-news-stage__cta-icon" />
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                @endforeach
                            </div>
                        </div>

                        @if ($featuredItems->count() > 1)
                            <div class="cchp-news-stage__dots" role="tablist" aria-label="{{ __('site.section_news') }}">
                                @foreach ($featuredItems as $dotIdx => $dotCard)
                                    <button
                                        type="button"
                                        class="cchp-news-stage__dot"
                                        role="tab"
                                        :aria-selected="(activeIndex === {{ $dotIdx }}).toString()"
                                        :class="{ 'is-active': activeIndex === {{ $dotIdx }} }"
                                        @click="goTo({{ $dotIdx }})"
                                        aria-label="{{ $dotCard['title'] }}"
                                    ></button>
                                @endforeach
                            </div>
                            <button
                                type="button"
                                class="cchp-news-stage__arrow cchp-news-stage__arrow--prev"
                                @click="prev()"
                                :aria-label="labels.prev"
                            >
                                <x-site.icon name="chevron-left" class="cchp-news-stage__chevron" />
                            </button>
                            <button
                                type="button"
                                class="cchp-news-stage__arrow cchp-news-stage__arrow--next"
                                @click="next()"
                                :aria-label="labels.next"
                            >
                                <x-site.icon name="chevron-right" class="cchp-news-stage__chevron" />
                            </button>
                        @endif
                    </div>
                @endif

                @if ($railItems->isNotEmpty())
                    <aside class="cchp-news-stage__rail" aria-label="{{ __('site.news_stage_latest') }}">
                        <div class="cchp-news-stage__rail-head">
                            <h2 class="cchp-news-stage__rail-title">{{ __('site.news_stage_latest') }}</h2>
                            <a class="cchp-news-stage__rail-all" href="{{ $newsIndexUrl }}">{{ __('site.view_all') }}</a>
                        </div>
                        <ul class="cchp-news-stage__rail-list">
                            @foreach ($railItems as $railIdx => $railCard)
                                <li class="cchp-news-stage__rail-item">
                                    <a class="cchp-news-stage__rail-link" href="{{ $railCard['url'] }}">
                                        <span class="cchp-news-stage__rail-num" aria-hidden="true">{{ str_pad((string) ($railIdx + 1), 2, '0', STR_PAD_LEFT) }}</span>
                                        <span class="cchp-news-stage__rail-thumb">
                                            @if (! empty($railCard['image']))
                                                <img
                                                    src="{{ $railCard['image'] }}"
                                                    alt=""
                                                    loading="lazy"
                                                    decoding="async"
                                                    width="96"
                                                    height="72"
                                                />
                                            @else
                                                <span class="cchp-news-stage__rail-thumb-fallback" aria-hidden="true"></span>
                                            @endif
                                        </span>
                                        <span class="cchp-news-stage__rail-body">
                                            @if ($railCard['date'])
                                                <time class="cchp-news-stage__rail-date" datetime="{{ $railCard['datetime'] }}">{{ $railCard['date'] }}</time>
                                            @endif
                                            <span class="cchp-news-stage__rail-item-title">{{ $railCard['title'] }}</span>
                                        </span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </aside>
                @endif
            </div>
        </div>
    </section>
@endif