@props(['products'])

<header class="top-0 sticky lg:relative left-0 z-[100] bg-white">
    <div class="h-[61px] lg:h-[110px] w-full relative flex items-center justify-center border-b border-b-[rgba(116,116,116,0.15)]">
        <a href="https://www.arvus.com/"><img src="{{ Vite::asset('resources/images/arvus-logo-r-blue.png')}}" alt="ARVUS.COM" loading="lazy"></a>

        <a href="#" class="absolute top-0 right-[20px] w-[30px] h-[30px] p-[10px] z-20 block lg:hidden" x-on:click="togglemenu = !togglemenu">
            <span class="w-[20px] h-[2px] bg-black relative block top-[10px] left-[4px] my-[6px] before:absolute before:content-[' '] before:w-[20px] before:h-[2px] before:bg-black before:-top-[8px] after:absolute before:content-[' '] after:w-[20px] after:h-[2px] after:bg-black after:-bottom-[8px]"></span>
        </a>


      
       
    </div>
    <div class="items-center justify-center w-full border-b border-b-[rgba(116,116,116,0.15)] hidden lg:flex">
        <div class="flex flex-row items-center relative justify-center w-full -mx-5">
            <div class="relative px-5">
                <a href="https://www.arvus.com/" class="inline-block border-b-[3px] border-b-transparent transition-all py-[12.5px] font-montserrat text-[#3b3b3b] text-[13px] leading-tight tracking-[2px] hover:border-b-[#2B2B2B]">ABOUT</a>
            </div>

            <div class="relative px-5 group">
                <a href="{{route('shop')}}" class="@if(Route::is('shop')) active @endif inline-block border-b-[3px] border-b-transparent transition-all py-[12.5px] font-montserrat text-[#3b3b3b] text-[13px] leading-tight tracking-[2px] hover:border-b-[#2B2B2B] group-hover:border-b-[#2B2B2B] [&.active]:border-b-[#2B2B2B] z-50 bg-white">PRODUCTS</a>

                <div class="absolute left-5 top-[90%] w-[202px] border border-[#ebebeb] flex flex-col opacity-0 invisible bg-[rgba(255,255,255,0.7)] group-hover:opacity-100 group-hover:visible transition-all z-40 group-hover:top-[100%]">
               
                    @if(isset($products) && $products)
                  
                        @foreach ( $products as $product)
                            <div class="border-b-[#ebebeb] border-b">
                                <a href="{{route('view_product', ['url_title' => $product->url_title])}}" class="text-[#3B3B3B] text-[12px] leading-snug uppercase font-bold w-full block px-[10px] py-[13px] transition-all hover:bg-[#e3e3e3]">{{$product->title}}</a>
                            </div>
        
                        @endforeach
                    
                    @endif
                   
                    {{-- <div class="border-b-[#ebebeb] border-b">
                        <a href="#" class="text-[#3B3B3B] text-[12px] leading-snug uppercase font-bold w-full block px-[10px] py-[13px] transition-all hover:bg-[#e3e3e3]">H2-4D</a>
                    </div>
                    <div class="border-b-[#ebebeb] border-b">
                        <a href="#" class="text-[#3B3B3B] text-[12px] leading-snug uppercase font-bold w-full block px-[10px] py-[13px] transition-all hover:bg-[#e3e3e3]">HDMI-2A</a>
                    </div>
                    <div class="border-b-[#ebebeb] border-b">
                        <a href="#" class="text-[#3B3B3B] text-[12px] leading-snug uppercase font-bold w-full block px-[10px] py-[13px] transition-all hover:bg-[#e3e3e3]">AES-2H</a>
                    </div> --}}
                </div>
            </div>

            <div class="relative px-5 group">
                <a href="#" class="inline-block border-b-[3px] border-b-transparent transition-all py-[12.5px] font-montserrat text-[#3b3b3b] text-[13px] leading-tight tracking-[2px] hover:border-b-[#2B2B2B] group-hover:border-b-[#2B2B2B] z-50 bg-white">COMPANY</a>

                <div class="absolute left-5 top-[90%] w-[202px] border border-[#ebebeb] flex flex-col opacity-0 invisible bg-[rgba(255,255,255,0.7)] group-hover:opacity-100 group-hover:visible transition-all z-40 group-hover:top-[100%]">
                    <div class="border-b-[#ebebeb] border-b">
                        <a href="https://www.arvus.com/history.html" class="text-[#3B3B3B] text-[12px] leading-snug uppercase font-bold w-full block px-[10px] py-[13px] transition-all hover:bg-[#e3e3e3]">History</a>
                    </div>
                    <div class="border-b-[#ebebeb] border-b">
                        <a href="https://www.arvus.com/team.html" class="text-[#3B3B3B] text-[12px] leading-snug uppercase font-bold w-full block px-[10px] py-[13px] transition-all hover:bg-[#e3e3e3]">Team</a>
                    </div>
                    <div class="border-b-[#ebebeb] border-b">
                        <a href="https://www.arvus.com/press.html" class="text-[#3B3B3B] text-[12px] leading-snug uppercase font-bold w-full block px-[10px] py-[13px] transition-all hover:bg-[#e3e3e3]">Press</a>
                    </div>
                </div>
            </div>

            <div class="relative px-5">
                <a href="https://www.arvus.com/case-studies.html" class="inline-block border-b-[3px] border-b-transparent transition-all py-[12.5px] font-montserrat text-[#3b3b3b] text-[13px] leading-tight tracking-[2px] hover:border-b-[#2B2B2B]">CASE STUDIES</a>
            </div>

            <div class="relative px-5 group">
                <a href="#" class="inline-block border-b-[3px] border-b-transparent transition-all py-[12.5px] font-montserrat text-[#3b3b3b] text-[13px] leading-tight tracking-[2px] hover:border-b-[#2B2B2B] group-hover:border-b-[#2B2B2B] z-50 bg-white">SUPPORT</a>

                <div class="absolute left-5 top-[90%] w-[202px] border border-[#ebebeb] flex flex-col opacity-0 invisible bg-[rgba(255,255,255,0.7)] group-hover:opacity-100 group-hover:visible transition-all z-40 group-hover:top-[100%]">
                    <div class="border-b-[#ebebeb] border-b">
                        <a href="https://www.arvus.com/spatial-overview.html" class="text-[#3B3B3B] text-[12px] leading-snug uppercase font-bold w-full block px-[10px] py-[13px] transition-all hover:bg-[#e3e3e3]">WHAT IS SPATIAL AUDIO?</a>
                    </div>
                    <div class="border-b-[#ebebeb] border-b">
                        <a href="https://www.arvus.com/firmware-etc.html" class="text-[#3B3B3B] text-[12px] leading-snug uppercase font-bold w-full block px-[10px] py-[13px] transition-all hover:bg-[#e3e3e3]">FIRMWARE etc.</a>
                    </div>
                    <div class="border-b-[#ebebeb] border-b">
                        <a href="https://www.arvus.com/newsletters.html" class="text-[#3B3B3B] text-[12px] leading-snug uppercase font-bold w-full block px-[10px] py-[13px] transition-all hover:bg-[#e3e3e3]">NEWSLETTERS</a>
                    </div>
                </div>
            </div>

            <div class="relative px-5">
                <a href="https://www.arvus.com/contact.html" class="inline-block border-b-[3px] border-b-transparent transition-all py-[12.5px] font-montserrat text-[#3b3b3b] text-[13px] leading-tight tracking-[2px] hover:border-b-[#2B2B2B]">CONTACT</a>
            </div>

            <div class="relative px-5">
                @livewire('front.header-basket')
            </div>
        </div>
    </div>
</header>