@aware(['page'])
@props(['alternates'])
@php
    use App\Helpers\TranslationHelper;
    $isHome = !empty($page->slug) && str_ends_with($page->slug, ':home');
    $wrapper = 'span';
@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('/') }}">
            <img src="{{ asset('images/logo.png') }}" alt="Tuff" class="h-[48px] sm:h-[70px] w-auto" height="507">
        </a>
        </{{ $wrapper }}>
        @php
            $pages = [
                TranslationHelper::getPage('sobre-nos'),
                TranslationHelper::getPage('produtos'),
                TranslationHelper::getPage('novidades'),
                TranslationHelper::getPage('contato'),
            ];
        @endphp
        <nav
            class="hidden sm:flex justify-around mt-4 order-1 gap-x-4 md:gap-x-8 w-full lg:mt-0 lg:order-none lg:w-auto">
            @foreach ($pages as $p)
                @php
                    $pageUrl = $p?->getUrl();
                @endphp
                <a href="{{ $pageUrl }}"
                    class="link {{ request()->url() === $pageUrl || Str::startsWith(request()->url(), $pageUrl) ? 'link--active' : '' }} text-white font-bold no-underline whitespace-nowrap py-1">{{ $p?->title }}</a>
            @endforeach
        </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="bg-transparent py-2" aria-label="{{ __('messages.buscar') }}">
                <img class="hover:cursor-pointer" src=" {{ asset('images/search.svg') }}"
                    alt="Botão para executar a busca." />
            </button>
            <button class="relative sm:hidden" x-data="menuPopup({ anchorPosition: 'right' })" x-bind="root" @click="mobileOpen = true" aria-label="{{ __('messages.abrir-menu') ?? 'Abrir menu' }}">
                <img class="sm:hidden" alt="Menu lado direito" src="{{ asset('images/hamb.svg') }}" />
                <img class="hidden sm:inline-block" alt="Menu lado direito" src="{{ asset('images/hamb.svg') }}" />
                <template x-teleport="body">
                    <x-desktop.menu.movel class="sm:hidden" />
                </template>
            </button>
        </div>
        <div class="grid place-items-center absolute top-full left-0 right-0 md:left-[30%] md:right-[30%] z-50 px-6"
            x-init="$watch('searchOpen', value => {
                if (value) {
                    $nextTick(() => $refs.searchInput.focus());
                } else {
                    $refs.searchInput.value = '';
                }
            })" x-show="searchOpen" x-transition x-cloak>
            <form @click.outside="searchOpen = false" class="sm:block relative w-full max-w-[85.375rem] mx-auto"
                action="{{ \App\Helpers\TranslationHelper::getPageUrl('busca') }}" method="get">
                <input x-ref="searchInput" name="q" type="search" value="{{ request()->get('q') }}"
                    placeholder="{{ __('messages.buscar') }}"
                    class="w-full px-4 py-2 bg-white shadow-[64px_0px_128px_black] focus:ring-2 focus:ring-babyblue border-deepblue transition-all rounded-full border-[1px] border-solid box-border text-darkslateblue-300 pr-12">
                <button type="submit"
                    class="bg-transparent absolute right-4 top-1/2 -translate-y-1/2 text-darkslateblue-100">
                    <svg viewBox="0 0 18.146 18.146" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="1.778px" transform="translate(2.179 3.387)">
                            <circle cx="7.111" cy="7.111" r="7.111" transform="translate(-1.29 -2.498)" />
                            <path d="m14.71 13.502-3.867-3.867" />
                        </g>
                    </svg>
                </button>
            </form>
        </div>
</div>