@aware(['page'])
@props(['alternates'])
@php
    use App\Helpers\TranslationHelper;
    $isHome = !empty($page->slug) && str_ends_with($page->slug, ':home');
    $wrapper = $isHome ? 'h1' : 'div';
@endphp
{{-- Menu --}}
<div class="box-border flex flex-wrap justify-between items-center px-4 py-4 w-full min-h-[--header-height]"
     x-data="{ searchOpen: false }">
    <{{$wrapper}}>
        <a href="{{ LaravelLocalization::localizeUrl('/') }}"
           data-test="{{ TranslationHelper::getPageUrl('sobre-nos') }}">
            <img class="h-12" src="{{ asset('images/start-cor-fundo-transparente@2x.png') }}" alt="{{ app(\App\Settings\ConfiguracaoGeral::class)->nome_do_site }}">
            <span class="sr-only">{{ app(\App\Settings\ConfiguracaoGeral::class)->nome_do_site }}</span>
        </a>
    </{{$wrapper}}>
    @php
        $sobreNos = TranslationHelper::getPage('sobre-nos');
        $nossasMarcas = TranslationHelper::getPage('nossas-marcas');
    @endphp
    <nav class="hidden sm:flex justify-around mt-4 order-1 space-x-4 w-full lg:mt-0 lg:order-none lg:w-auto">
        <a href="{{ $sobreNos?->getUrl() }}"
           class="text-white font-bold no-underline whitespace-nowrap">{{ $sobreNos?->title ?? __('messages.sobre-nos') }}</a>

        @if(empty(app(\App\Settings\ConfiguracaoGeral::class)->marca_links))
            <a href="{{ $nossasMarcas?->getUrl() }}"
               class="text-white font-bold no-underline whitespace-nowrap">
                {{ $nossasMarcas?->title ?? __('messages.nossas-marcas') }}
            </a>
        @else
            <div class="text-white font-bold no-underline whitespace-nowrap cursor-default" x-data="menuPopup"
                 x-bind="root">
                {{ $nossasMarcas?->title ?? __('messages.nossas-marcas') }}
                <img class="inline-block ml-1" src="{{ asset('images/alt-arrow-down.svg') }}"/>
                <x-desktop.menu.marcas/>
            </div>
        @endif
        <div class="text-white font-bold relative cursor-default" x-data="menuPopup" x-bind="root">
            {{ __('messages.produtos') }}
            <img class="inline-block ml-1" src="{{ asset('images/alt-arrow-down.svg') }}"/>
            <x-desktop.menu.produto/>
        </div>
        <div class="text-white font-bold relative cursor-default" x-data="menuPopup" x-bind="root">
            {{ __('messages.sustentabilidade') }} <img class="inline-block ml-1"
                                                       src="{{ asset('images/alt-arrow-down.svg') }}"/>
            <x-desktop.menu.sustentabilidade/>
        </div>
    </nav>
    <div class="flex items-center m-0 sm:ml-2 space-x-4">
        <form class="hidden sm:block relative" action="{{ \App\Helpers\TranslationHelper::getPageUrl('busca') }}"
              method="get">
            <input name="q" type="search" value="{{ request()->get('q') }}" placeholder="{{ __('messages.buscar') }}"
                   class="w-[120px] sm:w-auto px-4 py-2 border-white rounded-full border-[1px] border-solid box-border bg-transparent placeholder:text-white text-white placeholder:opacity-100 pr-10">
            <button type="submit" class="bg-transparent absolute right-4 top-3">
                <img class="hover:cursor-pointer w-4 h-4 " src="{{ asset('images/search.svg') }}"
                     alt="Botão para executar a busca."/>
            </button>
        </form>
        <x-desktop.menu.seletor-de-idioma :alternates="$alternates"/>
        <button @click="searchOpen = !searchOpen" class="sm:hidden bg-transparent py-2">
            <img class="hover:cursor-pointer" src=" {{ asset('images/search.svg') }}"
                 alt="Botão para executar a busca."/>
        </button>
        <div class="relative" x-data="menuPopup({ anchorPosition: 'right' })" x-bind="root">
            <img class="sm:hidden" alt="Menu lado direito" src="{{ asset('images/hamb.svg') }}"
                 @click="mobileOpen = true"/>
            <img class="hidden sm:inline-block" alt="Menu lado direito" src="{{ asset('images/hamb.svg') }}"/>
            <x-desktop.menu.segmento class="hidden sm:block"/>
            <template x-teleport="body">
                <x-desktop.menu.movel class="sm:hidden"/>
            </template>
        </div>
    </div>
    <div class="w-[calc(100%_-_48px)] left-[24px] right-[24px] z-50 absolute top-full sm:hidden" x-show="searchOpen"
         x-transition x-cloak>
        <form class="sm:block relative z-[-1] w-full" action="{{ \App\Helpers\TranslationHelper::getPageUrl('busca') }}"
              method="get">
            <input name="q" type="search" value="{{ request()->get('q') }}" placeholder="{{ __('messages.buscar') }}"
                   class="w-full px-4 py-2 border-white rounded-full border-[1px] border-solid box-border bg-transparent placeholder:text-white text-white placeholder:opacity-100 pr-10">
            <button type="submit" class="bg-transparent absolute right-4 top-3">
                <img class="hover:cursor-pointer w-4 h-4 " src="{{ asset('images/search.svg') }}"
                     alt="Botão para executar a busca."/>
            </button>
        </form>
    </div>
</div>