@aware(['page'])
<div class="bg-midnightblue-100 pt-[calc(var(--header-height)_+_5rem)] pb-80 sticky top-0">
    <div class="max-w-[85.375rem] mx-auto">
        <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-bricolage font-bold text-white max-w-4xl text-3xl md:text-5xl text-balance">{{ $titulo }}</h1>
            </div>
        </div>
        <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="yellow"/>
            <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="yellow"/>
        </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="yellow"/>
            <x-star class="absolute right-[6%] bottom-[50%]" width="24px" height="24px" color="white"/>
        </div>
    </div>
</div>
<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" />
                    <img alt="{{ $promocao['nome'] }}" src="{{ asset('/storage/' . $promocao['banner']) }}" class="hidden w-full h-auto max-h-96 object-contain md:block" />
                </a>
            @endforeach
        </div>
        <div class="flex justify-center mt-12">
            {{ $promocoes->onEachSide(3)->links('components.paginacao') }}
        </div>
    </div>
</x-corpo>