@props(['cartoes' => []])
<x-slider {{ $attributes->class(['flex grid-cols-3 font-bricolage w-full h-[300px] gap-4 px-4 overflow-auto no-scrollbar scroll-smooth md:gap-8 md:h-[480px] md:px-0 snap-x snap-mandatory'])->merge() }}>
    @foreach($cartoes as $index => $cartao)
        @php
            $has_url = !empty($cartao['url']);
            $tag = $has_url ? 'a' : 'div';
        @endphp
        <{{$tag}} @isset($cartao['url']) href="{{ $cartao['url'] }}" @endisset @class(['snap-center group w-[280px] sm:w-[386px]
            flex-shrink-0 overflow-hidden relative rounded-3xl text-left '])>
        @isset($cartao['imagem'])
            <img loading="{{ $loop->first ? 'eager' : 'lazy' }}" alt="{{ $cartao['titulo'] }}" src="{{ asset('/storage/' . $cartao['imagem']) }}"
                 class="object-cover w-full h-full 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/70 to-transparent"></div>
        @else
            <div class="w-full h-full relative bg-midnightblue-100">
                <x-star class="absolute left-[48%] top-[20%]" color="#007bcc" width="120" height="120" />
                <x-star class="absolute left-[25%] top-[35%]" color="#007bcc" width="64" height="64" />
                <x-star class="absolute left-[44%] top-[50%]" color="#007bcc" width="64" height="64" />
            </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>
</{{$tag}}>
@endforeach
</x-slider>