@props(['cartoes', 'botaoTexto' => null, 'botaoUrl' => null])
{{-- Mobile --}}
@if(!empty($cartoes) && count($cartoes) > 0)
    <div class="relative lg:hidden" x-data="{
        ativo: 0,
        anterior() {
            this.ativo && this.ativo--
        },
        proximo() {
            this.ativo = ++this.ativo % @js(count($cartoes))
        },
        resetInterval() {
            clearInterval(this.interval)
            this.interval = setInterval(() => this.proximo(), 5000)
        },
        init() {
            this.resetInterval()
            this.$watch('ativo', () => this.resetInterval())
        }
    }">
        <button
            @click="anterior()"
            class="flex justify-center items-center absolute bg-white border border-solid border-midnightblue-100 left-0 top-[180px] rounded-full w-10 h-10 z-10">
            <svg xmlns="http://www.w3.org/2000/svg" width="18.414" height="14.828">
                <path d="M17.414 7.414h-16m0 0 6-6m-6 6 6 6" fill="none" stroke="#003ca5" stroke-linecap="round"
                      stroke-linejoin="round" stroke-width="2"/>
            </svg>
        </button>
        @foreach ($cartoes as $indice => $cartao)
            <a href="{{ $cartao['url'] }}" x-show="ativo === {{ $indice }}"
               class="mx-4 overflow-hidden relative rounded-3xl block h-[400px]">
                @isset($cartao['imagem'])
                    <img alt="{{$cartao['titulo']}}" src="{{ asset('storage/'.$cartao['imagem']) }}"
                         class="object-cover object-center w-full h-full"/>
                    <div
                        class="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-black/80 to-transparent"></div>
                @else
                    <div class="w-full h-full bg-midnightblue-100"></div>
                @endisset
                <div
                    class="absolute bottom-0 box-border left-0 inline-block w-full min-h-16 p-6">
                    @isset($cartao['sobrancelha'])
                        <div class="text-xs uppercase tracking-widest text-white mb-2">{{$cartao['sobrancelha'] }}</div>
                    @endisset
                    <h3 class="leading-6 sm:leading-[32px] text-xl text-white font-bold font-headline sm:text-7xl">{{ $cartao['titulo'] }}</h3>
                </div>
            </a>
        @endforeach
        <button
            @click="proximo()"
            class="flex justify-center items-center absolute bg-white border border-solid border-midnightblue-100 right-0 top-[180px] rounded-full w-10 h-10 z-10">
            <svg xmlns="http://www.w3.org/2000/svg" width="18.414" height="14.828">
                <path d="M1 7.414h16m0 0-6-6m6 6-6 6" fill="none" stroke="#003ca5" stroke-linecap="round"
                      stroke-linejoin="round" stroke-width="2"/>
            </svg>
        </button>
    </div>

    {{-- Desktop --}}
    <div class="hidden lg:flex justify-center items-center w-full space-x-8">
        @foreach ($cartoes as $cartao)
            <a href="{{ $cartao['url'] }}"
               class="block group overflow-hidden relative rounded-3xl text-left h-[480px] w-[385px]">
                @isset($cartao['imagem'])
                    <img alt="{{ $cartao['titulo'] }}" src="{{ asset('storage/'.$cartao['imagem']) }}"
                         class="object-cover object-center w-full h-[480px] group-hover:scale-110 transition-transform duration-300">
                    <div
                        class="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-black/80 to-transparent"></div>
                @else
                    <div class="w-full h-full bg-midnightblue-100"></div>
                @endisset
                <div
                    class="absolute bottom-0 box-border left-0 inline-block w-full min-h-24 p-6">
                    @isset($cartao['sobrancelha'])
                        <div class="text-xs uppercase tracking-widest text-white mb-2">{{$cartao['sobrancelha'] }}</div>
                    @endisset
                    <h3 class="leading-6 sm:leading-[32px] text-xl text-white font-bold font-headline sm:text-7xl">{{ $cartao['titulo'] }}</h3>
                </div>
            </a>
        @endforeach
    </div>
@endif

@if(!empty($botaoTexto))
    <div class="grid place-items-center">
        <x-botao-principal :href="$botaoUrl ?? \App\Helpers\TranslationHelper::getPageUrl('novidades')" class="mt-12">
            {{ $botaoTexto }}
        </x-botao-principal>
    </div>
@endif