@aware(['page'])
<x-vitrine-simples class="py-32 sm:pb-32 sm:pt-16">
    <div class="flex flex-col items-center">
        <div class="text-center px-10">
            <div class="uppercase  tracking-33 text-xs text-white mb-1 max-md:mb-3">{{ $sobrancelha }}</div>
            <h1 class="mt-5 font-headline font-bold text-white max-w-4xl text-3xl md:text-5xl text-balance">
                {{ $titulo }}</h1>
        </div>
    </div>
    <x-slot:slot2>
        <div class="hidden md:block">
            <x-star class="absolute left-[10%] top-[5%]" width="48px" height="48px" color="white" />
            <x-star class="absolute left-[30%] bottom-[45%]" width="48px" height="48px" color="skyblue" />
            <x-star class="absolute right-[10%] top-[15%]" width="32px" height="32px" color="white" />
            <x-star class="absolute right-[15%] bottom-[55%]" width="60px" height="60px" color="skyblue" />
        </div>
        <div class="md:hidden">
            <x-star class="absolute left-[16%] top-[4%]" width="48px" height="48px" color="white" />
            <x-star class="absolute right-[12%] bottom-[35%]" width="48px" height="48px" color="skyblue" />
            <x-star class="absolute right-[6%] bottom-[50%]" width="24px" height="24px" color="white" />
        </div>
    </x-slot:slot2>
</x-vitrine-simples>
<x-corpo>
    <div class="bg-white">
        <div class="flex justify-center">
            <x-alternador x-data="{ ativo: '{{ request('status') === 'encerradas' ? 'encerradas' : 'ativas' }}' }">
                <x-alternador-botao :href="request()->fullUrlWithQuery(['status' => null])" :selecionado="request('status') !== 'encerradas'" :nome="'ativas'">
                    Ativas
                </x-alternador-botao>
                <x-alternador-botao :href="request()->fullUrlWithQuery(['status' => 'encerradas'])" :selecionado="request('status') === 'encerradas'" :nome="'encerradas'">
                    Encerradas
                </x-alternador-botao>
            </x-alternador>
        </div>
        <div class="max-w-7xl mx-auto px-10 flex flex-col gap-8 mt-10">
            @foreach ($promocoes as $promocao)
                <a class="block" href="{{ $promocao['url'] }}" title="{{ $promocao['nome'] }}" target="_blank">
                    <img alt="{{ $promocao['nome'] }}" src="{{ asset('/storage/' . $promocao['banner_mobile']) }}"
                        class="block w-full h-auto object-contain md:hidden rounded-2xl" />
                    <img alt="{{ $promocao['nome'] }}" src="{{ asset('/storage/' . $promocao['banner']) }}"
                        class="hidden w-full h-auto max-h-96 object-contain md:block rounded-2xl" />
                </a>
            @endforeach
        </div>
        <div class="flex justify-center mt-12">
            {{ $promocoes->onEachSide(3)->links('components.paginacao') }}
        </div>
    </div>
</x-corpo>