{{-- Caixa com carroussel na esquerda, de produtos. Título, texto e botão na direita. --}}
<div
    class="relative bg-midnightblue-100 grid gap-1 pb-32 md:grid-cols-2 md:gap-12 sm:pt-20"
    x-data="{
        interval: null,
        ativo: 0,
        anterior() {
            this.ativo && this.ativo--
        },
        proximo() {
            this.resetInterval();
            this.ativo = ++this.ativo % @js(count($carroussel))
        },
        resetInterval() {
            window.clearTimeout(this.interval)
            this.interval = window.setTimeout(() => this.proximo(), 7000)
        },
        init() {
            this.resetInterval()
        }
        }">
    <div class="flex flex-col items-center mt-8 sm:mt-3 order-1 sm:order-none">
        @foreach ($carroussel as $c)
            <div x-show="ativo == @js($loop->index)" class="w-[360px] sm:w-[480px] h-[200px] sm:h-[494px]">
                <img {{ $loop->first ? 'x-cloak' : '' }} class="object-contain w-full h-full"
                     src="{{ asset('storage/' . $c['imagem']) }}"/>
            </div>
        @endforeach
        {{-- Paginação, controle do carrossel. --}}
        <div class="px-8 py-4 backdrop-blur-[15px] box-border flex gap-x-4">
            <img class="cursor-pointer" alt="Retroceder uma página" src="{{ asset('images/arrow-left.svg') }}"
                 x-on:click="anterior()"/>
            @foreach (array_keys($carroussel) as $indice)
                <img class="cursor-pointer"
                     x-bind:src="@js($indice) == ativo ? @js(asset('images/ellipse-7.svg')) : @js(asset('images/ellipse-13.svg'))"
                     x-bind:alt="'Cartão ' + (@js($indice) == ativo ? 'in' : '') + 'ativo.'"
                     x-on:click="ativo = @js($indice)"/>
            @endforeach
            <img class="cursor-pointer" alt="Avançar uma página" src="{{ asset('images/arrow-right.svg') }}"
                 x-on:click="proximo()"/>
        </div>
    </div>
    <div class="self-center max-w-lg mt-10 sm:-mt-5 relative text-center sm:text-left">
        @foreach($carroussel as $c)
            <div x-show="ativo == @js($loop->index)" {{ $loop->first ? 'x-cloak' : '' }}>
                <div
                    class="text-center sm:text-left text-white text-xs tracking-36 uppercase">{{ $c['sobrancelha'] }}</div>
                <h1 class="font-bricolage leading-none font-bold mt-2 mx-5 sm:mx-auto text-center sm:text-left text-13xl sm:text-33xl text-white">
                    {{ $c['titulo'] }}
                </h1>
                @if ($c['exibir_botao'])
                    <a class="inline-block bg-white shadow-xl mt-8 sm:mt-12 rounded-full px-10 py-4 font-bold mx-auto sm:mx-0 text-sm text-midnightblue-100"
                       href="{{ $c['botao_url'] }}">
                        {{ $c['botao_texto'] }}
                    </a>
                @endif
            </div>
        @endforeach
        <div class="hidden md:block">
            <x-star class="absolute top-[-8px] left-[-140px]" width="64" height="64" color="yellow"/>
            <x-star class="absolute top-[-110px] left-[8px]" width="24" height="24" color="white"/>
            <x-star class="absolute bottom-[-32px] right-[-24px]" width="48" height="48" color="white"/>
            <x-star class="absolute bottom-[-64px] right-[140px]" width="32" height="32" color="yellow"/>
        </div>
    </div>
    <div class="md:hidden">
        <x-star class="absolute top-[5%] left-[5%]" width="32" height="32" color="white"/>
        <x-star class="absolute top-[2%] right-[5%]" width="40" height="40" color="yellow"/>
        <x-star class="absolute top-[40%] left-[5%]" width="64" height="64" color="yellow"/>
        <x-star class="absolute bottom-[58%] right-[10%]" width="16" height="16" color="white"/>
        <x-star class="absolute bottom-[38%] left-[10%]" width="16" height="16" color="yellow"/>
    </div>
</div>