@php
    use App\Helpers\TranslationHelper;
    $ondeEncontrar = TranslationHelper::getPage('onde-encontrar');
    $novidades = TranslationHelper::getPage('novidades');
    $faleConosco = TranslationHelper::getPage('contato');
    $downloads = TranslationHelper::getPage('downloads');
    $privacidade = \App\Helpers\TranslationHelper::getPage('politica-de-privacidade');
@endphp
<div {{ $attributes->merge(['class' => 'fixed bg-white h-full left-0 px-4 top-0 w-full 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." aria-label="{{ __('messages.fechar-menu') ?? 'Fechar menu' }}" @click="mobileOpen = false">
            <svg class="text-deepblue" 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-deepblue leading-10">
        @php
            $sobreNos = TranslationHelper::getPage('sobre-nos');
            $produtos = TranslationHelper::getPage('produtos');
        @endphp
        <div class="px-5"><a class="text-xl"
                href="{{ $sobreNos?->getUrl() }}">{{ $sobreNos?->title ?? __('messages.sobre-nos') }}</a>
        </div>

        <div class="px-5"><a class="text-xl"
                href="{{ $produtos?->getUrl() }}">{{ $produtos?->title ?? __('messages.produtos') }}</a>
        </div>

        <div class="border-b border-b-midnightblue-100/50 border-solid mt-6">{{-- linha separadora --}}</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="{{ $privacidade?->getUrl() }}">{{ $privacidade?->title ?? 'Privacidade' }}</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" aria-label="Facebook">
            <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" aria-label="YouTube">
            <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" aria-label="Instagram">
            <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" aria-label="LinkedIn">
            <img class="align-middle" alt="Rede social Linkedin."
                src="{{ asset('images/icon-linkedin-desktop.svg') }}">
        </a>
    </div>
</div>