@php
    use App\Helpers\TranslationHelper;
@endphp
<div
    {{ $attributes->merge(['class' => 'fixed bg-white h-screen left-0 px-4 top-0 w-screen z-10 flex flex-col']) }} x-cloak
    x-transition x-show="mobileOpen">
    <div class="text-right pb-2">
        <button class="align-top mt-7 p-0" title="Botão de fechar o menu."
                @click="mobileOpen = false">
            <svg class="text-midnightblue-100" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px"
                 viewBox="0 0 24 24">
                <path fill="currentColor"
                      d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"/>
            </svg>
        </button>
    </div>
    <div class="flex-1 overflow-auto font-montserrat font-semibold text-midnightblue-100 leading-10">
        @php
            $sobreNos = TranslationHelper::getPage('sobre-nos');
            $nossasMarcas = TranslationHelper::getPage('nossas-marcas');
            $produtos = TranslationHelper::getPage('produtos');
        @endphp
        <div class="px-5"><a class="text-xl"
                             href="{{ $sobreNos?->getUrl() }}">{{ $sobreNos?->title ?? __('messages.sobre-nos') }}</a>
        </div>


        @if(empty(app(\App\Settings\ConfiguracaoGeral::class)->marca_links))
            <div class="px-5 mt-2"><a class="text-xl"
                                      href="{{ $nossasMarcas?->getUrl()  }}">{{ $nossasMarcas?->title ?? __('messages.nossas-marcas') }}</a>
            </div>
        @else
            @php
                $marcaIds = collect(app(\App\Settings\ConfiguracaoGeral::class)->marca_links)->pluck('marca_id')->toArray();
                $marcasData = \App\Models\Marca::whereIn('id', $marcaIds)
                    ->get()
                    ->keyBy('id');
            @endphp
            <x-mobile.menu-aninhado :isMarcas="true" :items="array_map(fn($id) => [$marcasData[$id]?->href ,$marcasData[$id]?->nome, $marcasData[$id]?->target], $marcaIds)">
                {{ __('messages.nossas-marcas') }}
            </x-mobile.menu-aninhado>
        @endif
        <x-mobile.menu-aninhado :items="[
            [($produtos?->getUrl() ?? '') . '?setor=para_casa', __('messages._setores.para_casa')],
            [($produtos?->getUrl() ?? '') . '?setor=para_empresa', __('messages._setores.para_empresa')],
            [($produtos?->getUrl() ?? '') . '?setor=para_voce', __('messages._setores.para_voce')],
        ]">
            {{ __('messages.produtos') }}
        </x-mobile.menu-aninhado>
        @php
            $sustentabilidade = TranslationHelper::getPage('sustentabilidade');
            $environment = TranslationHelper::getPage('environmental');
            $social = TranslationHelper::getPage('social');
            $governanca = TranslationHelper::getPage('governance');
        @endphp
        <x-mobile.menu-aninhado :items="[
            [$environment?->getUrl(), $environment?->title ?? __('messages._esg.environmental')],
            [$governanca?->getUrl(), $governanca?->title ?? __('messages._esg.governance')],
            [$social?->getUrl(), $social?->title ?? __('messages._esg.social')],
            [$sustentabilidade?->getUrl(), $sustentabilidade?->title ?? __('messages._esg.sustentabilidade')],
        ]">
            {{ __('messages.sustentabilidade') }}
        </x-mobile.menu-aninhado>

        <div class="border-b border-b-midnightblue-100/50 border-solid mt-6">{{-- linha separadora --}}</div>
        @php
            $segmentos = TranslationHelper::getPage('segmentos');
            $ondeEncontrar = TranslationHelper::getPage('onde-encontrar');
            $novidades = TranslationHelper::getPage('novidades');
            $faleConosco = TranslationHelper::getPage('fale-conosco');
            $downloads = TranslationHelper::getPage('downloads');
        @endphp
        <div class="px-5 mt-6"><a class="text-lg"
                                  href="{{ $segmentos?->getUrl() }}">{{ $segmentos?->title ?? __('messages.segmentos') }}</a>
        </div>
        <div class="px-5 mt-2"><a class="text-lg"
                                  href="{{ $ondeEncontrar?->getUrl() }}">{{ $ondeEncontrar?->title ?? __('messages.onde-encontrar') }}</a>
        </div>
        <div class="px-5 mt-2"><a class="text-lg"
                                  href="{{ $novidades?->getUrl() }}">{{ $novidades?->title ?? __('messages.novidades') }}</a>
        </div>
        <div class="px-5 mt-2"><a class="text-lg"
                                  href="{{ $faleConosco?->getUrl() }}">{{ $faleConosco?->title ?? __('messages.contato') }}</a>
        </div>

        <div class="px-5 mt-2">
            <a class="text-lg" href="{{ app(\App\Settings\ConfiguracaoGeral::class)->getLinkLimaEPergher() }}"
               target="_blank">
                Lima & Pergher
                <img class="inline-block ml-1 w-3 h-3 origin-center -rotate-45"
                     src="{{ asset('images/arrow-right1.svg') }}">
            </a>
        </div>
        <div class="px-5 mt-2">
            <a class="text-lg" href="{{ app(\App\Settings\ConfiguracaoGeral::class)->link_unistart }}" target="_blank">
                Unistart
                <img class="inline-block ml-1 w-3 h-3 origin-center -rotate-45"
                     src="{{ asset('images/arrow-right1.svg') }}">
            </a>
        </div>
    </div>
    <div class="border-b border-b-midnightblue-100/50 border-solid mt-4">{{-- linha separadora --}}</div>

    <div class="flex gap-x-8 items-center justify-center p-4">
        <a href="{{ app(\App\Settings\ConfiguracaoGeral::class)->rede_social_facebook }}" target="_blank">
            <img class="align-middle" alt="Rede social facebook." src="{{ asset('images/icon-facebook-desktop.svg') }}">
        </a>
        <a href="{{ app(\App\Settings\ConfiguracaoGeral::class)->rede_social_youtube }}" target="_blank">
            <img class="align-middle" alt="Canal do Youtube." src="{{ asset('images/icon-youtube-desktop.svg') }}"/>
        </a>
        <a href="{{app(\App\Settings\ConfiguracaoGeral::class)->rede_social_instagram }}" target="_blank">
            <img class="align-middle" alt="Rede social Instagram."
                 src="{{ asset('images/icon-instagram-desktop.svg') }}">
        </a>
        <a href="{{ app(\App\Settings\ConfiguracaoGeral::class)->rede_social_linkedin }}" target="_blank">
            <img class="align-middle" alt="Rede social Linkedin." src="{{ asset('images/icon-linkedin-desktop.svg') }}">
        </a>
    </div>
</div>