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

@php
    $multipleSlides = count($slides) > 1;
@endphp

<section aria-roledescription="carousel" aria-label="Promotions" class="relative mt-3 w-full overflow-hidden rounded-2xl lg:mt-4">

    @foreach ($slides as $index => $slide)
        <div
            data-hero-slide
            class="relative grid overflow-hidden rounded-2xl bg-[#e6e2fd] lg:block lg:aspect-[1024/376] lg:min-h-[22rem] lg:bg-transparent"
            @unless ($index === 0) hidden @endunless
        >
            @if (! empty($slide['image']) && str_contains($slide['image'], '/'))
                <picture class="col-start-1 row-start-1 block self-end lg:absolute lg:inset-0 lg:self-auto">
                    @php($heroSet = \App\Support\ImageSet::present($slide['image']))
                    @if ($heroSet['webp'] !== '')
                        <source type="image/webp" srcset="{{ $heroSet['webp'] }}" sizes="100vw">
                    @endif
                    @if (! empty($slide['mobile']))
                        <source media="(max-width: 1023px)" srcset="{{ asset($slide['mobile']) }}">
                    @elseif (config('store.hero_mobile'))
                        <source media="(max-width: 1023px)" srcset="{{ asset(config('store.hero_mobile')) }}">
                    @endif
                    <img
                        src="{{ asset($slide['image']) }}"
                        alt=""
                        width="1024"
                        height="376"
                        @if ($index === 0) fetchpriority="high" @else loading="lazy" @endif
                        decoding="async"
                        class="hero-slide-photo block h-auto w-full lg:absolute lg:inset-0 lg:h-full {{ ($slide['fit'] ?? '') === 'contain' ? 'lg:object-contain lg:bg-[#e6e2fd]' : 'lg:object-cover' }}"
                    >
                </picture>
            @else
                <x-store.image-placeholder :label="$slide['image'] ?? 'HERO'" class="absolute inset-0 h-full w-full" />
            @endif

            <div class="relative z-10 col-start-1 row-start-1 self-start px-3.5 pb-2 pt-3 lg:absolute lg:inset-0 lg:flex lg:items-center lg:self-auto lg:px-12 lg:py-8">
                <div class="max-w-[10.25rem] lg:max-w-md">
                    <p class="mb-1 hidden text-sm font-medium text-[#6A5CFF] lg:block">{{ __('catalog.hero.kicker') }}</p>
                    <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-brand lg:text-[11px]">{{ $slide['eyebrow'] }}</p>
                    @if ($index === 0)
                        <h1 class="mt-1 text-[clamp(1.05rem,4.5vw,1.3rem)] font-bold leading-[1.1] lg:mt-2 lg:text-[2.65rem]">
                            <span class="block whitespace-nowrap text-navy">{{ $slide['title_a'] }}</span>
                            <span class="block whitespace-nowrap text-brand">{{ $slide['title_b'] }}</span>
                        </h1>
                    @else
                        <h2 class="mt-1 text-[clamp(1.05rem,4.5vw,1.3rem)] font-bold leading-[1.1] lg:mt-2 lg:text-[2.65rem]">
                            <span class="block whitespace-nowrap text-navy">{{ $slide['title_a'] }}</span>
                            <span class="block whitespace-nowrap text-brand">{{ $slide['title_b'] }}</span>
                        </h2>
                    @endif
                    <p class="hero-copy mt-1.5 max-w-[8.75rem] text-[12px] font-medium leading-snug lg:mt-3 lg:max-w-sm lg:text-sm">{{ $slide['copy'] }}</p>
                    <a href="{{ $slide['button_url'] ?? '#featured' }}" data-shop-now class="mt-2.5 inline-flex items-center gap-1.5 rounded-full bg-accent px-3.5 py-2 text-[13px] font-semibold text-navy lg:mt-5 lg:px-4 lg:text-sm">
                        {{ $slide['button'] ?? __('ui.shop_now') }}
                        <x-store.icon name="arrow-right" width="15" height="15" />
                    </a>
                </div>
            </div>
        </div>
    @endforeach

    @if ($multipleSlides)
        <button type="button" data-hero-prev class="absolute left-3 top-1/2 z-10 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-full bg-white text-navy shadow-sm lg:h-9 lg:w-9" aria-label="Previous slide">
            <x-store.icon name="chevron-left" width="18" height="18" />
        </button>
        <button type="button" data-hero-next class="absolute right-3 top-1/2 z-10 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-full bg-white text-navy shadow-sm lg:h-9 lg:w-9" aria-label="Next slide">
            <x-store.icon name="chevron-right" width="18" height="18" />
        </button>

        <div class="absolute bottom-2.5 left-3.5 z-10 flex items-center gap-1.5 lg:left-1/2 lg:-translate-x-1/2">
            @foreach ($slides as $index => $slide)
                <button
                    type="button"
                    data-hero-dot
                    aria-label="Show slide {{ $index + 1 }}"
                    @if ($index === 0) aria-current="true" @endif
                ></button>
            @endforeach
        </div>
    @endif
</section>