@aware(['page'])
@props(['alternates'])
@php
    use App\Helpers\TranslationHelper;
    $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 class="inline-block relative" href="{{ LaravelLocalization::localizeUrl('/') }}"
       data-test="{{ TranslationHelper::getPageUrl('sobre-nos') }}">
        <img src="{{ asset('logo_indy_branco.svg') }}" alt="Indy" class="h-[60px] sm:h-[120px] w-auto">
    </a>
    </{{$wrapper}}>@php
    $pages = [
        TranslationHelper::getPage('sobre-nos'),
        TranslationHelper::getPage('produtos'),
        TranslationHelper::getPage('marcas'),
        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" x-data="{ clicked: false }">
    @foreach($pages as $p)
        <a href="{{ $p?->getUrl() }}" @click="clicked = true"
           class="link text-white font-bold no-underline whitespace-nowrap py-1 relative">
            <div class="link-inner">
                @php
                    $pageUrl = $p?->getUrl();
                    $active = request()->url() === $pageUrl || Str::startsWith(request()->url(), $pageUrl);
                @endphp
                <div class="link-inner-inner {{ $active ? 'link-inner-inner--active' : '' }}">
                    {{ $p?->title }}
                </div>
            </div>
            @if($active)
                <span style="view-transition-name:activemenu" :style="clicked ? 'view-transition-name:activemenu' : ''" class="absolute -bottom-2 block left-[calc(50%_-_8px)] w-[16px] h-1 bg-white rounded-full"></span>
            @endif
        </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">
        <img class="hover:cursor-pointer" src=" {{ asset('images/search.svg') }}"
             alt="Botão para executar a busca."/>
    </button>
    <div class="relative sm:hidden" 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="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 ring-brand-yellow transition-all rounded-full border-[1px] border-solid box-border text-brand-brown pr-12  focus:ring-brand-yellow focus:border-brand-yellow">
        <button type="submit"
                class="bg-transparent absolute right-4 top-1/2 -translate-y-1/2 text-brand-brown">
            <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> {{-- Closing tag matches! --}}