{{-- Menu da aplicação, exibido no rodapé, quando em formato mobile. Se alterar, sincronizar com os demais links --}}
@php
    use App\Helpers\TranslationHelper;
@endphp
@php
    $sobreNos = TranslationHelper::getPage('sobre-nos');
    $nossasMarcas = TranslationHelper::getPage('nossas-marcas');
    $produtos = TranslationHelper::getPage('produtos');
@endphp
<nav {{ $attributes->merge(['class' => 'box-border mx-4']) }}>
    <div class="border-b border-solid border-white/20">
        <a class="block hover:opacity-100 leading-9 no-underline text-white/50 text-sm py-2"
           href="{{ $sobreNos?->getUrl() }}">{{ $sobreNos?->title ?? __('messages.sobre-nos') }}</a>
    </div>
    <div class="border-b border-solid border-white/20">
        <a class="block hover:opacity-100 leading-9 no-underline text-white/50 text-sm py-2"
           href="{{ $nossasMarcas?->getUrl() }}">{{ $nossasMarcas?->title ?? __('messages.nossas-marcas') }}</a>
    </div>
    @foreach(app(\App\Settings\ConfiguracaoGeral::class)->getCurrentLinks() as $link)
        <div class="border-b border-solid border-white/20">
            <a class="block hover:opacity-100 leading-9 no-underline text-white/50 text-sm py-2" {{ $link['isDownload'] ? ('download=' . \Illuminate\Support\Str::slug($link['name'])) : '' }}
                href="{{ $link['url'] }}">{{ $link['name'] }}</a>
        </div>
    @endforeach

    <section class="border-b border-solid border-white/20" x-data="{open: false}">
        <button
            @click="open = !open"
            class="border-b border-solid border-white/20 flex justify-between items-center w-full hover:opacity-100 leading-9 no-underline text-white/50 text-sm py-2"
            :class="{'text-white/50 border-white/20' : !open, 'text-[#fdb827] border-[#fdb827] mb-2': open}"
        >
            {{ $produtos?->title ?? __('messages.produtos') }}
            <img class="cursor-pointer hover:opacity-100 mr-4" src="{{ asset('images/alt-arrow-down.svg') }}"
                 alt="Botão expandir menu."/>
        </button>
        <template x-if="open">
            <div>
                <a class="block hover:opacity-100 no-underline text-white text-sm py-1"
                   href="{{ ($produtos?->getUrl() ?? '') . '?setor=para_voce'   }}">{{ __('messages._setores.para_voce') }}</a>
                <a class="block hover:opacity-100 no-underline text-white text-sm py-1"
                   href="{{ ($produtos?->getUrl() ?? '') . '?setor=para_empresa' }}">{{ __('messages._setores.para_empresa') }}</a>
                <a class="block hover:opacity-100 no-underline text-white text-sm pt-1 pb-3"
                   href="{{ ($produtos?->getUrl() ?? '') . '?setor=para_casa'  }}">{{ __('messages._setores.para_casa') }}</a>
            </div>
        </template>
    </section>
    <section class="border-b border-solid border-white/20" x-data="{open: false}">
        <button
            @click="open = !open"
            class="border-b border-solid border-white/20 flex justify-between items-center w-full hover:opacity-100 leading-9 no-underline text-white/50 text-sm py-2"
            :class="{'text-white/50 border-white/20' : !open, 'text-[#fdb827] border-[#fdb827] mb-2': open}"
        >
            {{ __('messages.sustentabilidade') }}
            <img class="cursor-pointer hover:opacity-100 mr-4" src="{{ asset('images/alt-arrow-down.svg') }}"
                 alt="Botão expandir menu."/>
        </button>
        @php
            $sustentabilidade = TranslationHelper::getPage('sustentabilidade');
            $environment = TranslationHelper::getPage('environmental');
            $social = TranslationHelper::getPage('social');
            $governanca = TranslationHelper::getPage('governance');
        @endphp
        <template x-if="open">
            <div>
                <a class="block hover:opacity-100 no-underline text-white text-sm py-1"
                   href="{{ $sustentabilidade?->getUrl() }}">{{ $sustentabilidade?->title ?? __('messages._esg.sustentabilidade') }}</a>
                <a class="block hover:opacity-100 no-underline text-white text-sm py-1"
                   href="{{ $environment?->getUrl() }}">{{ $environment?->title ?? __('messages._esg.environmental') }}</a>
                <a class="block hover:opacity-100 no-underline text-white text-sm py-1"
                   href="{{ $social?->getUrl() }}">{{ $social?->title ?? __('messages._esg.social') }}</a>
                <a class="block hover:opacity-100 no-underline text-white text-sm pt-1 pb-3"
                   href="{{ $governanca?->getUrl() }}">{{ $governanca?->title ?? __('messages._esg.governance') }}</a>
            </div>
        </template>
    </section>
    <section x-data="{open: false}">
        <button
            @click="open = !open"
            class="border-b border-solid border-white/20 flex justify-between items-center w-full hover:opacity-100 leading-9 no-underline text-white/50 text-sm py-2"
            :class="{'text-white/50 border-white/20' : !open, 'text-[#fdb827] border-[#fdb827] mb-2': open}"
        >
            {{ __('messages.contato') }}
            <img class="cursor-pointer hover:opacity-100 mr-4" src="{{ asset('images/alt-arrow-down.svg') }}"
                 alt="Botão expandir menu."/>
        </button>
        @php
            $segmentos = TranslationHelper::getPage('segmentos');
            $ondeEncontrar = TranslationHelper::getPage('onde-encontrar');
            $novidades = TranslationHelper::getPage('novidades');
            $faleConosco = TranslationHelper::getPage('fale-conosco');
            $downloads = TranslationHelper::getPage('downloads');
        @endphp
        <template x-if="open">
            <div>
                <a class="block hover:opacity-100 no-underline text-white text-sm py-1"
                   href="{{ $segmentos?->getUrl() }}">{{ $segmentos?->title ?? __('messages.segmentos') }}</a>
                <a class="block hover:opacity-100 no-underline text-white text-sm py-1"
                   href="{{ $ondeEncontrar?->getUrl() }}">{{ $ondeEncontrar?->title ?? __('messages.onde-encontrar') }}</a>
                <a class="block hover:opacity-100 no-underline text-white text-sm py-1"
                   href="{{ $novidades?->getUrl() }}">{{ $novidades?->title ?? __('messages.novidades') }}</a>
                <a class="block hover:opacity-100 no-underline text-white text-sm py-1"
                   href="{{ $faleConosco?->getUrl() }}">{{ $faleConosco?->title ?? __('messages.contato') }}</a>
                <a class="block hover:opacity-100 no-underline text-white text-sm py-1"
                   href="{{ $downloads?->getUrl() }}">{{ $downloads?->title ?? __('messages.downloads') }}</a>
                <a class="flex items-center no-underline text-white text-sm py-1"
                   href="{{ app(\App\Settings\ConfiguracaoGeral::class)->getLinkLimaEPergher() }}" target="_blank">Lima & Pergher
                    <svg class="-rotate-45 scale-75" width="18.414" height="14.828">
                        <path d="M1 7.414h16m0 0-6-6m6 6-6 6" fill="none" stroke="currentColor" stroke-linecap="round"
                              stroke-linejoin="round" stroke-width="2"/>
                    </svg>
                </a>
                <a class="flex items-center no-underline text-white text-sm pt-1 pb-3"
                   href="{{ app(\App\Settings\ConfiguracaoGeral::class)->link_unistart }}" target="_blank">Unistart
                    <svg class="-rotate-45 scale-75" width="18.414" height="14.828">
                        <path d="M1 7.414h16m0 0-6-6m6 6-6 6" fill="none" stroke="currentColor" stroke-linecap="round"
                              stroke-linejoin="round" stroke-width="2"/>
                    </svg>
                </a>
            </div>
        </template>
    </section>
</nav>