@props(['cartoes', 'botaoTexto' => null, 'botaoUrl' => null])
{{-- Mobile --}}
<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-bricolage 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-bricolage sm:text-7xl">{{ $cartao['titulo'] }}</h3>
            </div>
        </a>
    @endforeach
</div>
@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