@aware(['page'])
@php
    $ref_container_mobile = 'seg_0';
    $ref_container = 'seg_1';
@endphp
<div x-data="home_segmentos">
    <div class="my-10 sm:my-20 bg-white">
        <div class="flex items-center">
            <div class="max-w-full lg:max-w-none lg:grid lg:[grid-template-columns:550px_2fr] lg:items-center">
                <div
                    class="relative rounded-tl-none bg-brand-yellow py-12 rounded-r-[12rem] lg:rounded-r-full">
                    <div
                        class="absolute w-[calc(100vw_-_85.375rem_/_2)] bg-brand-yellow right-[100%] bottom-0 top-[0]">
                    </div>
                    <div
                        class="absolute top-2 bottom-2 right-2 w-[max(100%,100%_+_100vw_-_85.375rem_/_2)] rounded-tl-none border border-l-0 border-brand-brown border-solid pointer-events-none rounded-r-[12rem] lg:rounded-r-full"
                        aria-hidden="true"></div>
                    <x-star width="98px" height="98px" color="brown"
                            class="absolute -top-8 sm:top-5 left-[188px] sm:left-auto sm:right-[20px]"/>
                    <x-star width="48px" height="48px" color="aquamarine"
                            class="absolute left-72 sm:left-auto -top-2.5 sm:top-[70px] -right-[10px] w-8"/>
                    <div class="pl-6 sm:pl-12">
                        <div class="tracking-36 mb-0 text-brand-brown text-xs uppercase">{{ $sobrancelha }}</div>
                        <h3 class="mt-3 mb-8 text-brand-brown leading-tight font-extrabold text-13xl sm:text-33xl pr-24 font-main text-balance">
                            {{ $titulo }}
                        </h3>
                    </div>
                    {{-- Imagens Mobile --}}
                    <div class="h-96 lg:hidden">
                        <div x-ref="{{ $ref_container_mobile }}"
                             class="relative flex gap-6 h-full overflow-auto no-scrollbar pl-6 sm:pl-12 [scroll-padding-right=1.5rem] snap-x snap-mandatory scroll-ps-6">
                            <div class="contents relative flex gap-7 h-full">
                                @foreach ($categorias as $card)
                                    <div
                                        class="last-of-type:pr-6 last-of-type:box-content aspect-[250/362] h-[362px] w-auto snap-start">
                                        <a href="{{ $card->url }}"
                                           class="relative aspect-[250/362] h-[362px] w-auto rounded-3xl overflow-hidden block">
                                            <img loading="lazy" src="{{ asset('storage/'.$card->imagem) }}"
                                                 alt="{{ $card->imagem_alt ?? $card->nome }}"
                                                 title="{{ $card->imagem_title ?? '' }}"
                                                 class="size-full object-cover object-center">
                                            <div
                                                class="absolute bottom-0 left-0 right-0 h-52 bg-gradient-to-t from-black/70 to-black/0"></div>
                                            <p class="absolute inset-x-0 bottom-0 leading-tight text-white p-3 text-xl font-extrabold [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">
                                                {{ $card->nome }}
                                            </p>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    {{-- Controles --}}
                    <div class="flex items-center mt-8 pl-6 lg:mt-0 sm:pl-12">
                        <button @click="retroceder($refs.{{ $ref_container }},$refs.{{ $ref_container_mobile }})"
                                class="rounded-full w-12 h-12 flex items-center justify-center">
                            <span
                                class="border-2 border-solid border-brand-brown flex justify-center rounded-full w-12 h-12 items-center">
                                <x-icons.arrow-left/>
                            </span>
                        </button>
                        <button @click="avancar($refs.{{ $ref_container }},$refs.{{ $ref_container_mobile }})"
                                class="rounded-full ml-4 w-12 h-12 flex items-center justify-center">
                            <span
                                class="border-2 border-solid border-brand-brown flex justify-center rounded-full w-12 h-12 items-center">
                            <x-icons.arrow-right/>
                            </span>
                        </button>
                    </div>
                </div>
                {{-- Imagens Desktop --}}
                <div x-ref="{{ $ref_container }}"
                     class="flex-grow hidden lg:block ml-7 h-[434px] overflow-auto no-scrollbar snap-x snap-mandatory">
                    <div class="relative flex gap-7 h-full">
                        <div
                            class="text-center py-8 font-medium font-semibold font-extrabold font-main text-balance"
                            style="display: none"></div>
                        <div class="contents relative flex gap-7 h-full">
                            @foreach ($categorias as $card)
                                <div class="last-of-type:pr-6 last-of-type:box-content w-[300px] h-[434px] snap-start">
                                    <a href="{{ $card->url }}"
                                       class="inline-block relative w-[300px] h-[434px] rounded-3xl overflow-hidden group">
                                        <img loading="{{ $loop->index > 5 ? 'lazy' : 'eager' }}"
                                             src="{{ asset('storage/'.$card->imagem) }}"
                                             alt="{{ $card->imagem_alt ?? $card->nome }}"
                                             class="w-[300px] h-[434px] object-cover object-center group-hover:scale-110 transition-transform duration-500">
                                        <div
                                            class="absolute bottom-0 left-0 right-0 h-52 bg-gradient-to-t from-black/70 to-black/0"></div>
                                        <p class="absolute inset-x-4 bottom-4 leading-tight text-white p-3 text-xl font-extrabold [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">
                                            {{ $card->nome }}
                                        </p>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center mt-10">
            <x-botao-principal href="{{ \App\Helpers\TranslationHelper::getPageUrl('produtos') }}">
                {{ __('messages._pagina_marca.ver_produtos') }}
            </x-botao-principal>
        </div>
    </div>
</div>
@pushonce('footer-scripts')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('home_segmentos', () => ({
                total: {{ count($categorias) }},
                avancar(ref, refMobile) {
                    if (refMobile?.checkVisibility?.() ?? true) refMobile.scrollBy({
                        left: refMobile.clientWidth,
                        behavior: 'smooth'
                    });
                    if (ref?.checkVisibility?.() ?? true) ref.scrollBy({left: ref.clientWidth / 2, behavior: 'smooth'});
                },
                retroceder(ref, refMobile) {
                    if (refMobile?.checkVisibility?.() ?? true) refMobile.scrollBy({
                        left: -refMobile.clientWidth,
                        behavior: 'smooth'
                    });
                    if (ref?.checkVisibility?.() ?? true) ref.scrollBy({
                        left: -ref.clientWidth / 2,
                        behavior: 'smooth'
                    });
                },
            }))
        })
    </script>
@endpushonce