{{-- Container do carrossel. --}}

<div class="relative w-full bg-brand-brown" x-data="{
    decor: @js(array_map(fn($el) => $el['decorar'] ?? false, $slides)),
    interval: null,
    ativo: 0,
    anterior() {
        this.ativo && this.ativo--
    },
    proximo() {
        this.resetInterval();
        this.ativo = ++this.ativo % @js(count($slides));
    },
    resetInterval() {
        window.clearTimeout(this.interval)
        this.interval = window.setTimeout(() => {
            this.proximo();
        }, 8000);
    },
    init() {
        this.resetInterval()
    }
}">
    <div class="overflow-hidden">
        <div class="flex transition-transform duration-500" x-effect="$el.style.transform = `translateX(${ ativo * -100 }%)`">
            @foreach ($slides as $indice => $slide)
                {{-- Cartão equivalente a um item do carrossel. --}}
                <div class="h-[110dvh] min-w-full flex items-stretch">
                    {{-- Imagem de fundo, por ser absoluta pode ficar dentro do cartão sem problemas. --}}
                    <picture class="absolute w-full h-full z-[-1]">
                        <source media="(max-width: 768px)"
                            srcset="{{ asset('storage/' . ($slide['mobile'] ?? $slide['imagem'])) }}">
                        <img src="{{ asset('storage/' . $slide['imagem']) }}" 
                            alt="{{ $slide['imagem_alt'] ?? $slide['titulo'] ?? 'Banner Principal' }}"
                            title="{{ $slide['imagem_title'] ?? '' }}"
                            class="h-full w-full object-cover pointer-events-none">
                    </picture>
                    <!-- Texto e botão -->
                    <div class="home-vitrine w-full max-w-[85.375rem] pt-[calc(var(--header-height)+4rem)] mx-auto flex flex-col justify-center pb-[180px]">
                        <div class="md:pl-16 box-border h-auto">
                            {{--                        <div class="m-0 text-sky-blue tracking-[7.7px] uppercase font-main text-sm font-extrabold"> --}}
                            {{--                            {{ $slide['titulo'] }} --}}
                            {{--                        </div> --}}
                            @php
                                $isLong = strlen(strip_tags($slide['descricao'])) > 80;
                            @endphp
                            @if ($indice === 0)
                                <h1
                                    class="block font-extrabold leading-[1.1] my-3 text-[2.5rem] text-white sm:text-41xl font-main text-balance {{ $isLong ? 'md:max-w-[55rem]' : 'md:max-w-[28rem]' }}">
                                    {!! str($slide['descricao'])->sanitizeHtml() !!}
                                </h1>
                            @else
                                <h2
                                    class="block font-extrabold leading-[1.1] my-3 text-[2.5rem] text-white sm:text-41xl font-main text-balance {{ $isLong ? 'md:max-w-[55rem]' : 'md:max-w-[28rem]' }}">
                                    {!! str($slide['descricao'])->sanitizeHtml() !!}
                                </h2>
                            @endif
                            @if ($slide['exibir_botao'])
                                <div class="mt-12 sm:mt-8">
                                    <x-botao-principal class="hidden sm:inline-flex" :ondark="true"
                                        href="{{ $slide['botao_url'] }}">
                                        {{ $slide['botao_texto'] }}
                                    </x-botao-principal>
                                </div>
                            @endif
                        </div>
                        <div class="h-[190px] w-1 md:hidden"></div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="absolute inset-0 hidden md:block pointer-events-none">
        <div class="w-full max-w-[85.375rem] mx-auto relative">
            <x-quadrado x-bind:class="{ 'translate-y-[-100px]': !decor[ativo] }"
                class="translate-y-[-100px] absolute left-[200px] top-[-195px] w-[400px] h-[200px] rotate-[-10deg] bg-brand-yellow transition-transform duration-500" />
        </div>
    </div>
    <x-quadrado x-bind:class="{ 'translate-y-[80px]': !decor[ativo] }"
        class="translate-y-[80px] absolute left-[-100px] bottom-[-170px] w-[800px] h-[200px] rotate-[-10deg] bg-brand-yellow hidden md:block transition-transform duration-500" />
    <x-quadrado x-bind:class="{ 'translate-y-[160px]': !decor[ativo] }"
        class="translate-y-[160px] absolute right-[-120px] bottom-[80px] w-[180px] h-[180px] rotate-[-8deg] bg-brand-yellow hidden md:block transition-transform duration-500" />
    {{-- Paginação, controle do carrossel. --}}
    <div class="absolute bottom-10 md:bottom-[120px] right-0 left-0 pointer-events-none">
        <div class="max-w-[85.375rem] mx-auto justify-center grid gap-2 md:justify-end items-end pointer-events-none">
            <div class="text-center pointer-events-auto">
                @if ($slide['exibir_botao'])
                    <x-botao-principal class="sm:hidden" href="{{ $slide['botao_url'] }}">
                        {{ $slide['botao_texto'] }}
                    </x-botao-principal>
                @endif
            </div>
            <div
                class="bg-white/0.1 px-6 py-3 md:backdrop-blur-[15px] md:backdrop-brightness-[105%] md:border-2 border-white border-solid border-opacity-40 rounded-full inline-flex gap-x-2 pointer-events-auto">
                <button class="p-2" @click="anterior()">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.414 14.828" width="18.414" height="14.828">
                        <path d="M17.414 7.414h-16m0 0 6-6m-6 6 6 6" fill="none" stroke="#fff"
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </svg>
                </button>
                @foreach ($slides as $indice => $slide)
                    <button class="flex p-2 items-center justify-center" @click="ativo = @js($indice)">
                        <span class="block w-2 h-2 rounded-full border border-solid border-white"
                            :class="ativo === @js($indice) ? 'bg-white' : 'bg-transparent'"></span>
                    </button>
                @endforeach
                <button class="p-2" @click="proximo()">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.414 14.828" width="18.414" height="14.828">
                        <path d="M1 7.414h16m0 0-6-6m6 6-6 6" fill="none" stroke="#fff" stroke-linecap="round"
                            stroke-linejoin="round" stroke-width="2" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

@pushonce('scripts')
    <style>
        /* Debug timestamp: {{ now()->toDateTimeString() }} */
        .home-vitrine {
            padding-inline: 2rem;
        }

        /* 85.375rem + 4 */
        @media (min-width: 89.375rem) {
            .home-vitrine {
                padding-inline: 0;
            }
        }
    </style>
@endpushonce