@aware(['page'])
<div class="text-white bg-brand-brown pt-[120px] sm:pt-[200px] lg:pt-[140px] xl:pt-[120px] pb-[90px]"
    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] relative px-8 mx-auto">
        <div class="hidden md:block" aria-hidden="true">
            <x-star class="absolute left-[5rem] top-[5rem] z-10 pointer-events-none" width="48" height="48"
                color="aquamarine" />
            <x-star class="absolute right-[12%] top-[4%] z-10 pointer-events-none" width="32" height="32"
                color="white" />
            <x-star class="absolute right-[15rem] top-[10rem] z-10 pointer-events-none" width="48" height="48"
                color="aquamarine" />
        </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="aquamarine" />
            <x-star class="absolute right-[10%] top-[0%] z-10 pointer-events-none" width="32" height="32"
                color="aquamarine" />
            <x-star class="absolute right-[4%] top-[5rem] z-10 pointer-events-none" width="16" height="16"
                color="white" />
        </div>

        <h1 class="m-0 text-white tracking-[0.5em] uppercase font-main text-xs sm:text-base relative z-10 not-italic">
            {{ $textoPequeno }}</h1>
        <p
            class="font-main text-3xl leading-tight sm:text-5xl font-extrabold mb-10 text-center mx-6 sm:mx-auto sm:max-w-[51.5rem] mt-2 relative z-10 italic">
            {{ $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)
                <div class="relative shrink-0">
                    <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 relative rounded-full outline-1 outline-brand-yellow border-transparent border-8 overflow-hidden relative shrink-0 mx-2 snap-center"
                        :class="active === {{ $loop->index }} ? 'outline' : ''">
                        <img src="/storage/{{ $destaque['thumbnail'] }}" alt="{{ $destaque['titulo'] ?? 'Destaque' }}" width="700" height="465"
                            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-main font-semibold">{{ $destaque['titulo'] }}</p>
                        </div>
                    </a>
                    <x-star x-cloak
                        x-bind:class="active === {{ $loop->index }} ? 'scale-100 opacity-100 rotate-[1turn]' :
                            'scale-0 opacity-0 rotate-[2turn]'"
                        width="90px" height="90px"
                        class="absolute left-[24px] top-[24px] transition-all duration-500 rotate-[2turn] hidden md:block"
                        color="yellow"></x-star>
                    <x-star x-cloak
                        x-bind:class="active === {{ $loop->index }} ? 'scale-100 opacity-100 rotate-[1turn]' :
                            'scale-0 opacity-0 rotate-[2turn]'"
                        width="48px" height="48px"
                        class="absolute left-[24px] top-[24px] transition-all duration-500 rotate-[2turn] md:hidden"
                        color="yellow"></x-star>
                </div>
            @endforeach
        </div>
    </div>
    @if (count($destaques) > 1)
        <div class="flex gap-x-4 justify-center mt-10 select-none relative z-20">
            <button @click="active = (count + active - 1) % count">
                <img src="{{ asset('/images/arrow-left.svg') }}" alt="Anterior">
            </button>
            @foreach ($destaques as $destaque)
                <button x-cloak x-show="active === {{ $loop->index }}">
                    <img src="{{ asset('/images/ellipse-7.svg') }}" alt="Página Atual">
                </button>
                <button x-cloak x-show="active !== {{ $loop->index }}" @click="active = {{ $loop->index }}">
                    <img src="{{ asset('/images/ellipse-13.svg') }}" alt="Página">
                </button>
            @endforeach
            <button @click="active = (active + 1) % count">
                <img src="{{ asset('/images/arrow-right.svg') }}" alt="Próximo">
            </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 max-sm:grid-cols-[max-content_3fr] mb-16 gap-x-3 items-center">
                    <div class="sm:hidden bg-brand-yellow text-brand-brown rounded-full h-full flex items-center justify-center px-3 gap-x-3"
                        @click="menuAberto = true">
                        <span>{{ __('messages._pagina_novidades.filtros') }}</span>
                        <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="22" height="22"
                            viewBox="0 0 22 22">
                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2px"
                                transform="translate(-1263.5 -39.5)">
                                <line class="a" x2="20" transform="translate(1264.5 40.5)" />
                                <line class="a" x2="20" transform="translate(1264.5 50.5)" />
                                <line class="a" x2="20" transform="translate(1264.5 60.5)" />
                            </g>
                        </svg>
                    </div>
                    <div class="relative">
                        <form action="" method="get">
                            <input name="q" type="search" value="{{ request()->get('q') }}" type=" text"
                                placeholder="Busque por palavra"
                                class="!w-full placeholder:text-brand-brown text-sm border border-brand-brown rounded-full py-3 pr-10">
                            <button type="submit" class="absolute inset-y-0 right-4 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="26.487" height="26.487">
                                    <g transform="translate(.889 .889)" fill="none" stroke="currentColor"
                                        stroke-linecap="round" stroke-linejoin="round" stroke-width="1.778px">
                                        <circle cx="10.818" cy="10.818" r="10.818" />
                                        <path d="m24.342 24.342-5.883-5.883" />
                                    </g>
                                </svg>
                            </button>
                        </form>
                    </div>
                </div>
                <div class="bg-brand-yellow rounded-3xl py-6 sm:py-11 px-8 text-brand-brown 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 (!empty($bannerEsquerda))
                    <a href="{{ $bannerEsquerdaLink }}" class="hidden sm:block">
                        <img class="rounded-3xl" src="/storage/{{ $bannerEsquerda }}" alt="{{ $bannerEsquerdaAlt ?? 'Banner Esquerda' }}">
                    </a>
                @endif
                <span x-ref="mobile" class="sm:hidden"></span>
            </div>
            <div>
                <h2
                    class="font-main text-4xl lg:text-5xl text-brand-brown font-extrabold 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-brand-brown 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-main text-2xl font-semibold 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 (!empty($bannerAbaixo))
                <div class="mb-20">
                    <a href="{{ $bannerAbaixoLink }}">
                        <img class="rounded-3xl" src="/storage/{{ $bannerAbaixo }}" alt="{{ $bannerAbaixoAlt ?? 'Banner' }}">
                    </a>
                </div>
            @endif
        </div>
        <div class="block lg:hidden px-8 sm:px-0">
            @if (!empty($bannerAbaixo))
                <div class="mb-20">
                    <a href="{{ $bannerAbaixoLink }}">
                        <img class="rounded-3xl" src="/storage/{{ $bannerAbaixo }}" alt="{{ $bannerAbaixoAlt ?? 'Banner' }}">
                    </a>
                </div>
            @endif
        </div>
        <div class="px-8">
            <livewire:newsletter-form :titulo="$newsletterTitulo ?? 'Receba em seu e-mail as nossas novidades e ofertas'" :placeholder="$newsletterPlaceholder ?? 'Insira seu email'" :sucesso_titulo="$newsletterSucessoTitulo ?? 'Sucesso!'" :sucesso_descricao="$newsletterSucessoDescricao ?? 'Seu e-mail foi registrado.'" />
        </div>
    </div>
</x-corpo>