@props(['titulo', 'lista_segmentos', 'search_placeholder', 'setores_segmentos'])
@php
    $ativo = null;
    foreach ($lista_segmentos as $indice => $segmento)
        if ($segmento['inicial']) {
            $ativo = $segmento['title'] ?? $segmento['setor_slug'] ?? null;
            $setor_ativo = $segmento['setor_slug'] ?? null;
            break;
        }

    if (empty($ativo)) {
        $ativo = $lista_segmentos[0]['title'] ?? null;
        $setor_ativo = $lista_segmentos[0]['setor_slug'] ?? null;
    }
@endphp
<div x-data="home_segmentos">
    <div class="py-10 sm:py-20 bg-white">
        <h2 class="px-6 max-w-2xl mx-auto text-center font-bricolage text-midnightblue-100 leading-10 font-bold text-2xl sm:text-[2.25rem] sm:mb-5">{{ $titulo }}</h2>
        <div class="px-6 mb-4 flex justify-center">
            <x-alternador>
                @foreach ($lista_segmentos as $indice => $segmento)
                    <x-alternador-botao ref="ativo"
                                        @click="alternar('{{ $segmento['title'] }}','{{ $segmento['setor_slug'] ?? '' }}')"
                                        :selecionado="$segmento['title'] === $ativo" nome="{{ $segmento['title'] }}">
                        {{ $segmento['title'] }}
                    </x-alternador-botao>
                @endforeach
            </x-alternador>
        </div>
        <div class="mb-10 flex rounded-full items-center justify-center">
            <form class="relative" @submit.prevent="scrollBy({top: 320, behavior: 'smooth'})">
                <input
                    x-model.debounce="q"
                    x-ref="segmento_search"
                    type="text" placeholder="{{ $search_placeholder }}"
                    class="sm:w-[530px] px-4 py-4 pr-20 border-midnightblue-100 rounded-full border-[1px] border-solid box-border
                            bg-transparent placeholder:text-darkslateblue-300 text-midnightblue-100 placeholder:opacity-100 placeholder:text-xs"
                    name="buscar"
                >
                <button type="submit" class="bg-transparent absolute right-6 top-1/2 -translate-y-1/2">
                    <img class="cursor-pointer" src="{{ asset('images/search1.svg') }}"
                         alt="Botão para executar a busca."/>
                </button>
            </form>
        </div>

        <div class="flex items-center">
            @foreach ($lista_segmentos as $index => $segmento)
                @php
                    $ref_container = 'segmentos_container_' . $index;
                    $ref_container_mobile = 'segmentos_container_mobile_' . $index;
                @endphp
                <div
                    {{ $segmento['title'] === $ativo ? '' : "x-cloak" }} class="max-w-full lg:max-w-none lg:grid lg:[grid-template-columns:550px_2fr] lg:items-center"
                    x-show="ativo == '{{ $segmento['title'] }}'"> {{-- O corpo da aba. --}}
                    {{-- Aprensentacao --}}
                    <div
                        class="relative rounded-tl-none bg-midnightblue-100 py-12 rounded-r-[12rem] lg:rounded-r-full">
                        <div
                            class="absolute w-[calc(100vw_-_85.375rem_/_2)] bg-midnightblue-100 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-white/40 border-solid pointer-events-none rounded-r-[12rem] lg:rounded-r-full"
                            aria-hidden="true"></div>
                        <x-star width="98px" height="98px" color="yellow"
                                class="absolute -top-8 sm:top-5 left-[188px] sm:left-auto sm:right-[20px]"/>
                        <x-star width="48px" height="48px" color="blue"
                                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-white text-xs uppercase">{{ $segmento['title'] }}</div>
                            <h3 class="mt-3 mb-8 text-white leading-tight font-bold text-13xl sm:text-33xl pr-20 font-bricolage">
                                {!! str($segmento['description'])->sanitizeHtml() !!}
                            </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]">
                                <div
                                    x-init="setInterval(() => q === '' || [...$el.nextElementSibling.children].some(child => child.offsetParent !== null) ? $el.style.display = 'none' :  $el.style.display = 'block', 100)"
                                    x-effect="setor; ativo; q; $nextTick(() => q === '' || [...$el.nextElementSibling.children].some(child => child.offsetParent !== null) ? $el.style.display = 'none' :  $el.style.display = 'block')"
                                    x-text="@js(__('messages._search.nenhum_resultado_por', ['query' => ':query'])).replace(':query', q)"
                                    class="text-center text-white py-8 font-medium font-semibold font-bold font-bricolage order-[1000]"
                                    style="display: none"></div>
                                <div class="contents relative flex gap-7 h-full">
                                    @foreach ($setores_segmentos[$segmento['setor_slug']] as $card)
                                        @php
                                            $part = match ($segmento['setor_slug']) {
                                                'para_casa' => 'ambiente',
                                                'para_voce' => 'categoria',
                                                default => 'segmento',
                                            };
                                        @endphp
                                        <div x-show="q === '' || fuzzyMatch(@js($card->nome),q)"
                                             class="last-of-type:pr-6 last-of-type:box-content aspect-[250/362] h-[362px] w-auto">
                                            <a href="{{ \App\Helpers\TranslationHelper::getPageUrl('produtos') . '?' . $part . '=' . $card->id . '&setor=' . $segmento['setor_slug']}}"
                                               class="relative aspect-[250/362] h-[362px] w-auto rounded-3xl overflow-hidden block">
                                                <img loading="lazy" src="{{ asset('storage/'.$card->imagem) }}"
                                                     alt="{{ $card->nome }}"
                                                     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-bold [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 bg-white w-12 h-12 flex items-center justify-center">
                                <img class="mx-auto my-auto" src="{{ asset('images/arrow-left1.svg') }}">
                            </button>
                            <button @click="avancar($refs.{{ $ref_container }},$refs.{{ $ref_container_mobile }})"
                                    class="rounded-full bg-white ml-4 w-12 h-12 flex items-center justify-center">
                                <img class="mx-auto my-auto" src="{{ asset('images/arrow-right1.svg') }}">
                            </button>
                        </div>
                    </div>
                    {{-- Imagens Desktop --}}
                    <div x-ref="{{ $ref_container }}"
                         class="flex-grow hidden lg:block ml-7 h-[434px] overflow-auto no-scrollbar">
                        <div class="relative flex gap-7 h-full">
                            <div
                                x-init="setInterval(() => q === '' || [...$el.nextElementSibling.children].some(child => child.offsetParent !== null) ? $el.style.display = 'none' :  $el.style.display = 'block', 100)"
                                x-effect="setor; ativo; q; $nextTick(() => q === '' || [...$el.nextElementSibling.children].some(child => child.offsetParent !== null) ? $el.style.display = 'none' :  $el.style.display = 'block')"
                                x-text="@js(__('messages._search.nenhum_resultado_por', ['query' => ':query'])).replace(':query', q)"
                                class="text-center py-8 font-medium font-semibold font-bold font-bricolage"
                                style="display: none"></div>
                            <div class="contents relative flex gap-7 h-full">
                                @foreach ($setores_segmentos[$segmento['setor_slug']] as $card)
                                    @php
                                        $part = match ($segmento['setor_slug']) {
                                            'para_casa' => 'ambiente',
                                            'para_voce' => 'categoria',
                                            default => 'segmento',
                                        };
                                    @endphp
                                    <div x-show="q === '' || fuzzyMatch(@js($card->nome),q)"
                                         class="last-of-type:pr-6 last-of-type:box-content w-[300px] h-[434px]">
                                        <a href="{{ \App\Helpers\TranslationHelper::getPageUrl('produtos') . '?' . $part . '=' . $card->id . '&setor=' . $segmento['setor_slug']}}"
                                           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->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-bold [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">
                                                {{ $card->nome }}
                                            </p>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@pushonce('footer-scripts')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('home_segmentos', () => ({
                setor: '{{ $setor_ativo }}',
                ativo: '{{ $ativo }}',
                total: {{ count($lista_segmentos) }},
                q: '',
                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'
                    });
                },
                handleSearch() {
                    const val = this.$refs.segmento_search.value;
                    window.location.href = {{ Js::from(\App\Helpers\TranslationHelper::getPageUrl('produtos')) }} + ('?q=' + val) + (this.setor ? '&setor=' + this.setor : '');
                },
                fuzzyMatch(text, query) {
                    if (!query) return true;
                    text = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
                    query = query.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
                    let i = 0, j = 0;
                    while (i < text.length && j < query.length) {
                        if (text[i] === query[j]) {
                            j++;
                        }
                        i++;
                    }
                    return j === query.length;
                },
                alternar(ativo, setor) {
                    const fn = () => {
                        this.ativo = ativo;
                        this.setor = setor;
                    };
                    if ('startViewTransition' in document) document.startViewTransition(fn); else fn();
                }
            }))
        })
    </script>
@endpushonce