@php
    use \Mcamara\LaravelLocalization\Facades\LaravelLocalization;
@endphp
<div>
    <x-vitrine :titulo="$titulo ?? 'Segmentos'" :sobrancelha="$sobrancelha ?? null" class="hero sticky top-0"></x-vitrine>
    <x-corpo
        x-data="{ selecionado: null, touched: false,  handleIntersect(item) { if (!this.touched) this.selecionado = item; } }">
        <div id="conteudo" class="bg-white sticky z-10 top-0">
            <!-- SEÇÃO FIXA -->
            <div class="bg-white py-4 -mt-4">
                <div class="grid md:grid-cols-2 md:gap-6 place-items-center w-fit mx-auto">
                    <x-search
                           :static="true"
                           wire:model.live.debounce.300ms="search" type="text"
                           placeholder="$placeholder ?? {{ __('messages.pesquise_aqui') }}" class="!border-[1px] w-full max-md:order-2 !p-0 max-md:mb-4"
                           name="buscar" />
                    <!--FILTROS: PARA CASA, PARA EMPRESA, PARA VOCê-->
                    <div
                        class="flex flex-wrap items-stretch justify-center gap-3.5 md:gap-x-6 max-md:px-[6%] max-md:mb-5">
                        @php
                            $current_setor = request()->get('setor') ?? 'para_casa'
                        @endphp
                        <x-alternador x-data="{ativo: '{{ $current_setor }}'}">
                            <x-alternador-botao
                                nome="para_casa"
                                wire:click="switch('para_casa')"
                                :selecionado="$current_setor == 'para_casa'">
                                {{ __('messages._setores.para_casa') }}
                            </x-alternador-botao>
                            <x-alternador-botao
                                nome="para_empresa"
                                wire:click="switch('para_empresa')"
                                :selecionado="$current_setor == 'para_empresa'">
                                {{ __('messages._setores.para_empresa') }}
                            </x-alternador-botao>
                            <x-alternador-botao
                                nome="para_voce"
                                wire:click="switch('para_voce')"
                                :selecionado="$current_setor == 'para_voce'">
                                {{ __('messages._setores.para_voce') }}
                            </x-alternador-botao>
                        </x-alternador>
                    </div>
                </div>
                <!--CARROSSEL DE CATEGORIAS-->
                <x-chips.lista class="mt-2 sm:mt-8">
                    @foreach($segmentos as $index =>$segmento)
                        <x-chips.chip :nome="$segmento->nome"
                                      href="#{{$segmento->slug}}"
                                      @click="touched = true; selecionado = '{{ $segmento->nome }}'">
                            {{ $segmento['nome'] }}
                        </x-chips.chip>
                    @endforeach
                </x-chips.lista>
            </div>
        </div>

        <div>
            <!--FRASE OCULTA PARA TELAS MÉDIAS E GRANDES E APARENTE PARA MOBILE-->
            <div
                class="text-midnightblue-100 text-2xl font-extrabold pt-12 text-center font-bricolage px-6 block md:hidden">
                {{ $descricao ?? '' }}
            </div>

            <!--ESTRUTURA DE REPETIÇÃO-->
            <div id="segmentos-lista">
                @forelse ($segmentos as $index => $segmento)
                    @php
                        $invert = $index % 2 == 0;
                    @endphp
                    <div
                        @class([
                            'flex flex-col md:flex-row items-center rounded-29xl gap-4 py-8 sm:py-16 sm:gap-20 sm:rounded-39xl',
                            'mx-6 sm:mx-12 lg:mx-20 xl:mx-32 lg:px-16' => $invert,
                            'rounded bg-[#eee] mx-4 px-8 sm:px-32 sm:mx-8' => !$invert
                        ])>
                        <div
                            class="w-full md:w-1/2 flex justify-center md:justify-end mt-6 md:order-2 md:mt-0">
                            <div class="relative">
                                <div class="rounded-full border-4 border-white p-1 md:p-2">
                                    <img
                                        src="{{ !empty($segmento->imagem) ? asset('storage/' . $segmento->imagem) : asset('images/image-placeholder.jpg') }}"
                                        alt="{{ $segmento['nome'] }}"
                                        class="w-48 sm:w-56 md:w-[22rem] lg:w-[25rem] object-cover rounded-full aspect-square">
                                </div>
                                <div
                                    class="absolute top-2 right-0 md:right-8 transform -translate-y-6 md:-translate-y-12">
                                    <img src="{{ asset('images/star1.svg') }}" alt="Estrela Amarela"
                                         class="w-8 h-8 md:w-14 md:h-14 lg:w-16 lg:h-16">
                                </div>
                                <div class="absolute bottom-0 right-4 md:right-20 translate-y-4 md:translate-y-6">
                                    <img src="{{ asset('images/star2.svg') }}" alt="Estrela Azul"
                                         class="w-6 h-6 md:w-8 lg:w-10">
                                </div>
                            </div>
                        </div>
                        <div
                            class="w-full text-left pb-2 {{ $invert ? 'md:order-1' : 'md:order-2' }}">
                            <h2 id="{{$segmento->slug}}"
                                x-intersect="handleIntersect('{{ $segmento->nome }}')"
                                class="text-midnightblue-100 text-2xl md:text-5xl font-extrabold leading-tight mt-2 font-bricolage scroll-mt-80 max-w-96">
                                {{ $segmento->nome }}
                            </h2>
                            <p class="text-darkslateblue-300 text-base md:text-lg leading-relaxed mt-4 sm:mt-8">
                                {{ $segmento->descricao }}
                            </p>
                            @php
                                $part = match ($setor) {
                                    'para_casa' => 'ambiente',
                                    'para_voce' => 'categoria',
                                    default => 'segmento',
                                };
                            @endphp
                            <x-botao-principal
                                href="{{ \App\Helpers\TranslationHelper::getPageUrl('produtos') . '?' . $part . '='. $segmento->id . '&setor=' . $setor }}"
                                class="mt-4 sm:mt-8">
                                {{ $botaoTexto }}
                            </x-botao-principal>
                        </div>
                    </div>

                @empty
                    <div class="grid place-items-center mx-auto font-bricolage text-xl font-bold text-midnightblue-100">
                        {{ __('messages._search.nenhum_resultado_por', ['query' => $search]) }}
                    </div>
                @endforelse
            </div>

            <!--BOTÃO "Voltar ao Topo-->
            <x-voltar-ao-topo />
        </div>
    </x-corpo>
    <style>
        html {
            scroll-behavior: smooth;
        }
    </style>
</div>