@aware(['page'])
<div
    class="text-white bg-[#003ca5] pt-[calc(var(--header-height)_+_2rem)] sm:pt-[calc(var(--header-height)_+_3rem)] pb-60 sticky top-0"
    x-data="{
        active: 0,
        count: {{ count($destaques) }},
        mobile: false,
        init() {
            const container = this.$refs.flex;
            const cloned = this.$refs.last.cloneNode(true);
            cloned.style = 'outline: none;';
            container.insertAdjacentElement('afterbegin', cloned);

            const cloned2 = this.$refs.first.cloneNode(true);
            cloned2.style = 'outline: none;';
            container.insertAdjacentElement('beforeend', cloned2);

            this.$watch('active', (value) => {
                const node = container.children[value + 1]
                if (container && node) {
                  const containerRect = container.getBoundingClientRect();
                  const nodeRect = node.getBoundingClientRect();

                  const scrollLeft = nodeRect.left + nodeRect.width / 2 - containerRect.width / 2 + container.scrollLeft - containerRect.left;
                  const scrollTop = nodeRect.top + nodeRect.height / 2 - containerRect.height / 2 + container.scrollTop - containerRect.top;

                  container.scrollTo({
                    left: scrollLeft,
                    top: scrollTop,
                    behavior: 'smooth'
                  });
                }
            })
        }
     }"
>
    <header class="text-center max-w-[85.375rem] mx-auto">
        <div class="hidden md:block" aria-hidden="true">
            <x-star class="absolute left-[10%] top-[10%] z-10 pointer-events-none" width="48" height="48"
                    color="white"/>
            <x-star class="absolute left-[25%] top-[28%] z-10 pointer-events-none" width="80" height="80"
                    color="yellow"/>
            <x-star class="absolute right-[10%] top-[8%] z-10 pointer-events-none" width="32" height="32"
                    color="white"/>
            <x-star class="absolute right-[16%] top-[15%] z-10 pointer-events-none" width="64" height="64"
                    color="yellow"/>
            <x-star class="absolute right-[32%] bottom-[30%] z-10 pointer-events-none" width="32" height="32"
                    color="white"/>
        </div>
        <div class="md:hidden" aria-hidden="true">
            <x-star class="absolute left-[10%] top-[2%] z-10 pointer-events-none" width="24" height="24"
                    color="white"/>
            <x-star class="absolute right-[10%] top-[0%] z-10 pointer-events-none" width="32" height="32"
                    color="yellow"/>
            <x-star class="absolute right-[4%] top-[6%] z-10 pointer-events-none" width="16" height="16"
                    color="white"/>
            <x-star class="absolute left-[4%] top-[32%] z-10 pointer-events-none" width="48" height="48"
                    color="yellow"/>
            <x-star class="absolute left-[12%] bottom-[32%] z-10 pointer-events-none" width="24" height="24"
                    color="yellow"/>
            <x-star class="absolute right-[8%] bottom-[36%] z-10 pointer-events-none" width="20" height="20"
                    color="white"/>
        </div>

        <h1 class="text-xs mb-2 text-center uppercase tracking-36">{{ $textoPequeno }}</h1>
        <p class="font-bricolage text-3xl leading-tight sm:text-5xl font-bold mb-10 text-center mx-6 sm:mx-auto sm:max-w-[51.5rem]">{{ $titulo }}</p>
    </header>
    <div class="max-w-full py-1">
        <div class="flex overflow-hidden py-1 snap-mandatory snap-x" x-ref="flex">
            @foreach ($destaques as $destaque)
                <a href="{{ \App\Helpers\TranslationHelper::route('novidades.show', [ 'slug' => $destaque->slug]) }}"
                   @click="if (active === {{ $loop->index }}) return; $event.preventDefault(); active = {{ $loop->index }}"
                   @if ($loop->first) x-ref="first" @endif
                   @if ($loop->last) x-ref="last" @endif
                   class="group block  rounded-full outline-1 outline-[#ffffff40] border-transparent border-8 overflow-hidden relative shrink-0 mx-2 snap-center"
                   :class="active === {{ $loop->index }} ? 'outline' : ''">
                    <img src="/storage/{{ $destaque['thumbnail'] }}" alt=""
                         class="w-[360px] sm:w-[480px] lg:w-[640px] aspect-[700/465] object-center object-cover group-hover:scale-110 transition-transform duration-300">
                    <div class="absolute bottom-0 left-0 right-0 h-52 bg-gradient-to-t from-black/100 to-black/0"></div>
                    <div
                        class="absolute inset-x-6 sm:inset-x-16 lg:inset-x-32 bottom-8 flex flex-col justify-center items-center text-center">
                        <p class="text-xs mb-2">{{ $destaque->categoria->nome }}</p>
                        <p class="sm:text-xl lg:text-2xl font-bricolage font-bold">{{ $destaque['titulo'] }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
    @if (count($destaques) > 1)
        <div class="flex gap-x-4 justify-center mt-10 select-none">
            <button @click="active = (count + active - 1) % count">
                <img src="{{ asset('/images/arrow-left.svg') }}" alt="">
            </button>
            @foreach ($destaques as $destaque)
                <button x-cloak x-show="active === {{ $loop->index }}">
                    <img src="{{ asset('/images/ellipse-7.svg') }}" alt="">
                </button>
                <button x-cloak x-show="active !== {{ $loop->index }}"
                        @click="active = {{ $loop->index }}">
                    <img src="{{ asset('/images/ellipse-13.svg') }}" alt="">
                </button>
            @endforeach
            <button @click="active = (active + 1) % count">
                <img src="{{ asset('/images/arrow-right.svg') }}" alt="">
            </button>
        </div>
    @endif
</div>

<x-corpo>
    <div class="sm:px-8 lg:px-16">
        <div class="grid sm:grid-cols-[1fr_1fr] lg:grid-cols-[280px_1fr] sm:gap-x-8 lg:gap-x-16 px-8">
            <div x-data="{menuAberto: true, mobile: false}"
                 x-init="mobile = $refs.mobile.offsetParent !== null; menuAberto = !mobile"
                 x-resize="mobile = $refs.mobile.offsetParent !== null; menuAberto = !mobile;" class="relative">
                <div class="grid grid-cols-[max-content_3fr] mb-16 gap-x-3 items-center">
                    <div
                        class="sm:hidden bg-[#001F56] rounded-full text-white h-full flex items-center justify-center px-3 gap-x-3"
                        @click="menuAberto = true">
                        <span>{{ __('messages._pagina_novidades.filtros') }}</span>
                        <img src="/images/hamb.svg" alt="" class="w-3 h-3">
                    </div>
                    <div class="relative">
                        <form action="" method="get">
                            <input name="q" type="search" value="{{ request()->get('q') }}"
                                   placeholder="Busque por palavra"
                                   class="w-full placeholder:text-[#001F56] text-sm border border-[#003CA5] rounded-full pr-10">
                            <button type="submit" class="absolute inset-y-0 right-4 flex items-center">
                                <img src="/images/icon3.svg" alt="" class="w-4">
                            </button>
                        </form>
                    </div>
                </div>
                <div
                    class="bg-[#001F56] rounded-3xl py-6 sm:py-11 px-8 text-white mb-16 sm:static absolute top-6 border border-white w-full"
                    x-show="menuAberto" @click.outside="if (mobile) menuAberto = false">
                    @foreach($grupos as $grupo)
                        <x-novidades-categoria
                            :title="$grupo['nome']"
                            :items="collect($grupo['categorias'])->map(fn($categoria) => [
                request()->fullUrlWithQuery(['categoria' => $categoria['categoria_id']]),
                \App\Models\Categorias::find($categoria['categoria_id'])?->nome
            ])->toArray()"
                        />
                    @endforeach
                </div>
                @if ($bannerEsquerda)
                    <a href="{{ $bannerEsquerdaLink }}" class="hidden sm:block">
                        <img src="/storage/{{ $bannerEsquerda }}" alt="">
                    </a>
                @endif
                <span x-ref="mobile" class="sm:hidden"></span>
            </div>
            <div>
                <h2 class="font-bricolage text-4xl lg:text-5xl text-[#003CA5] font-bold text-center sm:text-left mb-16">{{ $tituloArtigos }}</h2>
                <div class="grid sm:grid-cols-1 lg:grid-cols-2 gap-x-7 gap-y-16 text-[#003CA5] mb-16">
                    @foreach($novidades as $novidade)
                        <div>
                            <a class="block group overflow-hidden rounded-2xl mb-6 "
                               href="{{ \App\Helpers\TranslationHelper::route('novidades.show', [ 'slug' => $novidade->slug]) }}">
                                <img src="/storage/{{ $novidade['thumbnail']  }}" alt="{{ $novidade['titulo'] }}"
                                     class="w-full h-[330px] object-cover object-center group-hover:scale-110 transition-transform duration-300">
                            </a>
                            <div class="text-xs mb-1">{{ $novidade->categoria?->nome }}</div>
                            <a href="{{ \App\Helpers\TranslationHelper::route('novidades.show', [ 'slug' => $novidade->slug]) }}"
                               class="font-bricolage text-2xl font-bold leading-tight">{{ $novidade['titulo'] }}</a>
                        </div>
                    @endforeach
                </div>
                {{ $novidades->onEachSide(3)->links('components.paginacao') }}
            </div>
        </div>
    </div>
    <div class="py-5 sm:px-8 lg:px-16">
        <div class="hidden lg:block">
            @if ($bannerAbaixo)
                <div class="mb-20">
                    <a href="{{ $bannerAbaixoLink }}">
                        <img src="/storage/{{ $bannerAbaixo }}" alt="">
                    </a>
                </div>
            @endif

            <div class="text-center p">
                <h2 class="font-bricolage text-33xl text-[#003CA5] font-extrabold  mb-8">{{ $chamadaTitulo }}</h2>
                <a href={{$chamadaBotaoUrl}}
                   class="inline-block bg-[#003CA5] text-white text-sm font-bold py-4 px-10 rounded-full
                   shadow-xl">{{ $chamadaBotaoTexto }}</a>
            </div>
        </div>
        <div class="block lg:hidden px-8 sm:px-0">
            @if ($bannerAbaixo)
                <div class="mb-20">
                    <a href="{{ $bannerAbaixoLink }}">
                        <img src="/storage/{{ $bannerAbaixo }}" alt="">
                    </a>
                </div>
            @endif
            <div class="text-center">
                <h2 class="font-bricolage text-3xl sm:text-33xl text-[#003CA5] font-extrabold  mb-8">{{ $chamadaTitulo }}</h2>
                <x-botao-principal href="{{ $chamadaBotaoUrl }}">{{ $chamadaBotaoTexto }}</x-botao-principal>
            </div>
        </div>
    </div>
</x-corpo>
{{-- Desativar nessa página --}}
@pushonce('scripts')
    <style>
        .sticky {
            position: static !important;
        }
        .header-menu {
            position: absolute !important;
        }
    </style>
@endpushonce