@props(['background' => 'bg-transparent'])
<header x-data="setBackground()" x-init="() => {background = '{{$background}}'; mounted()}" id="header-nav"
        class="hidden md:block fixed transition-colors top-0 left-0 w-full {{$background}} border-blue border-b border-opacity-25 text-blue"
        style="z-index: 1000">
    <x-container class="flex items-center justify-between z-50">
        <a href="/">
            <x-application-logo class="md:w-24"></x-application-logo>
        </a>
        <nav>
            <ul class="relative flex space-x-10 uppercase text-current">
                <li class="gsap-link">
                    <div id="marker"
                         class="transition-all absolute bottom-0 left-0 right-0 h-0.5 w-0 rounded bg-blue"></div>
                    <a href="#" class="text-current block py-8">{{__("Activité")}}</a>
                </li>
                <li class="">
                    <a href="/ingredients" class="text-current block py-8">{{ __("Ingrédients") }}</a>
                </li>
                <li class="gsap-link">
                    <a href="#" class="text-current block py-8">{{ __("Société") }}</a>
                </li>
                <li class="">
                    <a href="/blog" class="text-current block py-8"> {{ __('Actualités') }}</a>
                </li>
                <li class="">
                    <a href="/contact" class="text-current block py-8">Contact</a>
                </li>
                @if(app()->getLocale() === 'fr')
                    <li><a class="block py-8" href="/lang/en"><img class="w-6 h-4" src="/images/menu/en.svg"
                                                                   alt="lang - english"></a></li>
                @else
                    <li><a class="block py-8" href="/lang/fr"><img class="w-6 h-4" src="/images/menu/fr.svg"
                                                                   alt="lang - french"></a></li>
                @endif
            </ul>
        </nav>
    </x-container>
</header>
<x-menu.submenu x-data="" id="activity_submenu"
                subtitle="{!! __('Activité') !!}">
    <x-menu.submenu-item url="/fragrance" title="Parfumerie" color="text-pink" backgroundColor="#ed9bb30D"
                         image="fragrance_sub"></x-menu.submenu-item>
    <x-menu.submenu-item url="/flavor" title="Arômes" color="text-red" image="flavor_sub"
                         backgroundColor="#ee3b020D"></x-menu.submenu-item>
    <x-menu.submenu-item url="/aromatherapie" title="Aromathérapie" color="text-green" backgroundColor="#48b28c0D"
                         image="aroma_sub"></x-menu.submenu-item>
    <x-menu.submenu-item url="/cosmetique" title="Cosmétique" color="text-blue" backgroundColor="#466d810D"
                         image="cosmetique_sub"></x-menu.submenu-item>
</x-menu.submenu>
<x-menu.submenu x-data="" id="company_submenu"
                subtitle="{{ __('Société') }}">
    <x-menu.submenu-item url="/a-propos" title="A Propos" color="text-pink" backgroundColor="#466D810d"
                         id="company_submenu"
                         image="about_sub"></x-menu.submenu-item>
    <x-menu.submenu-item url="/certifications" title="{{ __('Nos Certifications') }}" color="text-red" backgroundColor="#466D810d"
                         id="company_submenu"
                         image="certifications_sub"></x-menu.submenu-item>
    <x-menu.submenu-item url="/nos-engagements-rse" title="{{ __('Nos engagements RSE') }}" color="text-blue" backgroundColor="#466D810d"
                         id="company_submenu"
                         image="certifications_sub"></x-menu.submenu-item>
    <x-menu.submenu-item url="/distributeurs" title="{{ __('Nos Distributions') }}" color="text-green" backgroundColor="#466d810D"
                         id="company_submenu"
                         image="certifications_sub"></x-menu.submenu-item>
</x-menu.submenu>

{{-- Mobile header --}}
<header
    id="header-nav"
    class="h-20 md:hidden absolute top-0 left-0 w-full bg-transparent border-current z-50 text-blue flex items-center justify-between px-4">
    <a href="/"><x-application-logo></x-application-logo></a>
    <svg x-show="!menuIsOpen" @click="menuIsOpen= true" class="cursor-pointer relative inset-0 mt-2 ml-2 w-6 h-6"
         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
    <svg x-show="menuIsOpen" @click="menuIsOpen= false" class="cursor-pointer relative inset-0 mt-2 ml-2 w-6 h-6"
         viewBox="0 0 24 24"
         stroke="currentColor" stroke-width="2"
         fill="none" stroke-linecap="round" stroke-linejoin="round" style="">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
</header>
{{-- Mobile Menu --}}
<div class="bg-white absolute top-0 left-0 w-full md:hidden z-40 shadow overflow-y-hidden"
     x-show="menuIsOpen">
    <nav class="mt-10 p-4">
        <ul class="space-y-4 text-xl py-10 uppercase text-blue font-semibold">
            <li x-data="{expand: false}">
                <button class="flex items-center w-full uppercase mb-2 font-semibold" @click="expand = !expand">
                    {{__("Activité")}}
                    <span class="ml-3 flex-shrink-0 transform transition-transform" :class="expand ? '' : '-rotate-90'">
                          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                               stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                          </svg>
                    </span>
                </button>
                <ul class="ml-2 space-y-2" x-show="expand">
                    <li class="text-sm"><a href="/fragrance">{{__("Parfumerie")}}</a></li>
                    <li class="text-sm"><a href="/flavor">{{ __("Arômes") }}</a></li>
                    <li class="text-sm"><a href="/aromatherapie">{{ __('Aromathérapie') }}</a></li>
                    <li class="text-sm"><a href="/cosmetique">{{ __("Cosmétique") }}</a></li>
                </ul>
            </li>
            <li><a href="/ingredients">
                    {{__("Ingrédients")}}
                </a></li>
            <li x-data="{expand: false}">
                <button class="flex items-center w-full uppercase mb-2 font-semibold" @click="expand = !expand">@lang('Société')
                    <span class="ml-3 flex-shrink-0 transform transition-transform" :class="expand ? '' : '-rotate-90'">
                          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                               stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                          </svg>
                    </span></button>
                <ul class="ml-2 space-y-2" x-show="expand">
                    <li class="text-sm"><a href="/a-propos">{{__('A Propos')}}</a></li>
                    <li class="text-sm"><a href="/certifications">{{ __("Nos Certifications") }}</a></li>
                    <li class="text-sm"><a href="/distributeurs">{{ __('Nos Distributions') }}</a></li>
                </ul>
            </li>
            <li><a href="/blog">{{ __("Actualités") }}</a></li>
            <li><a href="/contact">{{__("Contact")}}</a></li>
                        @if(app()->getLocale() === 'fr')
                            <li><a href="/lang/en"><img class="w-6 h-4" src="/images/menu/en.svg"
                                                        alt="lang - english"></a></li>
                        @else
                            <li><a href="/lang/fr"><img class="w-6 h-4" src="/images/menu/fr.svg"
                                                        alt="lang - french"></a></li>
                        @endif
        </ul>
        <div class="md:flex items-center md:space-x-4 space-y-4 md:space-y-0 text-blue-pastel">
            <a href="https://fr.linkedin.com/company/diffusions-aromatiques-sas" class="flex items-center space-x-2.5">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M15.8333 0H4.16667C1.86583 0 0 1.86583 0 4.16667V15.8333C0 18.1342 1.86583 20 4.16667 20H15.8333C18.135 20 20 18.1342 20 15.8333V4.16667C20 1.86583 18.135 0 15.8333 0ZM6.66667 15.8333H4.16667V6.66667H6.66667V15.8333ZM5.41667 5.61C4.61167 5.61 3.95833 4.95167 3.95833 4.14C3.95833 3.32833 4.61167 2.67 5.41667 2.67C6.22167 2.67 6.875 3.32833 6.875 4.14C6.875 4.95167 6.2225 5.61 5.41667 5.61ZM16.6667 15.8333H14.1667V11.1633C14.1667 8.35667 10.8333 8.56917 10.8333 11.1633V15.8333H8.33333V6.66667H10.8333V8.1375C11.9967 5.9825 16.6667 5.82333 16.6667 10.2008V15.8333Z"
                        fill="currentColor"/>
                </svg>
                <span>Linkedin</span>
            </a>
            <a href="https://www.instagram.com/diffusionsaromatiques/" class="flex items-center space-x-2.5">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M9.99603 1.80194C12.6667 1.80194 12.9802 1.81385 14.0357 1.86148C15.0119 1.90514 15.5397 2.06787 15.8929 2.20679C16.3611 2.38936 16.6944 2.60369 17.0437 2.95297C17.3929 3.30224 17.6111 3.63564 17.7897 4.10399C17.9246 4.45723 18.0913 4.98512 18.1349 5.9615C18.1825 7.01727 18.1944 7.33082 18.1944 10.002C18.1944 12.6731 18.1825 12.9867 18.1349 14.0425C18.0913 15.0189 17.9286 15.5467 17.7897 15.9C17.6071 16.3683 17.3929 16.7017 17.0437 17.051C16.6944 17.4003 16.3611 17.6186 15.8929 17.7972C15.5397 17.9321 15.0119 18.0988 14.0357 18.1425C12.9802 18.1901 12.6667 18.202 9.99603 18.202C7.3254 18.202 7.01191 18.1901 5.95635 18.1425C4.98016 18.0988 4.45238 17.9361 4.09921 17.7972C3.63095 17.6146 3.29762 17.4003 2.94841 17.051C2.59921 16.7017 2.38095 16.3683 2.20238 15.9C2.06746 15.5467 1.90079 15.0189 1.85714 14.0425C1.80952 12.9867 1.79762 12.6731 1.79762 10.002C1.79762 7.33082 1.80952 7.01727 1.85714 5.9615C1.90079 4.98512 2.06349 4.45723 2.20238 4.10399C2.38492 3.63564 2.59921 3.30224 2.94841 2.95297C3.29762 2.60369 3.63095 2.38539 4.09921 2.20679C4.45238 2.07184 4.98016 1.90514 5.95635 1.86148C7.01191 1.80988 7.32937 1.80194 9.99603 1.80194ZM9.99603 0C7.28175 0 6.94048 0.0119071 5.87302 0.0595356C4.80952 0.107164 4.08333 0.277833 3.44841 0.523914C2.78968 0.777932 2.23413 1.12324 1.67857 1.6789C1.12302 2.23457 0.781746 2.79421 0.52381 3.4491C0.277778 4.08414 0.107143 4.81048 0.0595238 5.87815C0.0119048 6.94185 0 7.28319 0 9.99802C0 12.7128 0.0119048 13.0542 0.0595238 14.1218C0.107143 15.1856 0.277778 15.9119 0.52381 16.5509C0.777778 17.2098 1.12302 17.7654 1.67857 18.3211C2.23413 18.8768 2.79365 19.2181 3.44841 19.4761C4.08333 19.7222 4.80952 19.8928 5.87698 19.9405C6.94444 19.9881 7.28175 20 10 20C12.7183 20 13.0556 19.9881 14.123 19.9405C15.1865 19.8928 15.9127 19.7222 16.5516 19.4761C17.2103 19.2221 17.7659 18.8768 18.3214 18.3211C18.877 17.7654 19.2183 17.2058 19.4762 16.5509C19.7222 15.9159 19.8929 15.1895 19.9405 14.1218C19.9881 13.0542 20 12.7168 20 9.99802C20 7.27922 19.9881 6.94185 19.9405 5.87418C19.8929 4.81048 19.7222 4.08414 19.4762 3.44513C19.2222 2.78627 18.877 2.2306 18.3214 1.67494C17.7659 1.11927 17.2064 0.777932 16.5516 0.519944C15.9167 0.273864 15.1905 0.103195 14.123 0.0555666C13.0516 0.0119071 12.7103 0 9.99603 0Z"
                        fill="currentColor"/>
                    <path
                        d="M9.99603 4.86604C7.16269 4.86604 4.86111 7.16412 4.86111 10.002C4.86111 12.8398 7.15873 15.1379 9.99603 15.1379C12.8333 15.1379 15.1309 12.8398 15.1309 10.002C15.1309 7.16412 12.8333 4.86604 9.99603 4.86604ZM9.99603 13.332C8.15476 13.332 6.66269 11.8396 6.66269 9.99801C6.66269 8.15638 8.15476 6.66402 9.99603 6.66402C11.8373 6.66402 13.3294 8.15638 13.3294 9.99801C13.3294 11.8396 11.8373 13.332 9.99603 13.332Z"
                        fill="currentColor"/>
                    <path
                        d="M15.3333 5.8583C15.9952 5.8583 16.5318 5.32165 16.5318 4.65965C16.5318 3.99765 15.9952 3.461 15.3333 3.461C14.6715 3.461 14.1349 3.99765 14.1349 4.65965C14.1349 5.32165 14.6715 5.8583 15.3333 5.8583Z"
                        fill="currentColor"/>
                </svg>
                <span>Instragram</span>
            </a>
            <a href="https://www.instagram.com/diffusionsaromatiques/" class="flex items-center space-x-2.5">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M22 11.0672C22 4.95496 17.0751 0 11 0C4.92486 0 0 4.95496 0 11.0672C0 16.5911 4.02252 21.1697 9.28125 22V14.2663H6.48828V11.0672H9.28125V8.62898C9.28125 5.85525 10.9235 4.32313 13.4361 4.32313C14.6392 4.32313 15.8984 4.53929 15.8984 4.53929V7.26287H14.5114C13.145 7.26287 12.7188 8.11604 12.7188 8.99212V11.0672H15.7695L15.2818 14.2663H12.7188V22C17.9775 21.1697 22 16.5911 22 11.0672Z"
                        fill="#B6D0DD"/>
                </svg>
                <span>Facebook</span>
            </a>
            <a href="https://twitter.com/DAromatiques" class="flex items-center space-x-2.5">
                <svg width="22" height="22" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square"
                     class="svg-inline--fa fa-twitter-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 448 512">
                    <path fill="#B6D0DD"
                          d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path>
                </svg>
                <span>Twitter</span>
            </a>
        </div>
    </nav>
</div>
<script>
    function setBackground() {
        return {
            background: '',
            mounted() {
                if (this.background !== 'bg-white') {
                    let header = document.getElementById('header-nav')
                    document.addEventListener('scroll', function () {
                        let y = window.scrollY;
                        if (y > 10) {
                            header.classList.add('bg-white')
                        } else if (y < 10) {
                            header.classList.remove('bg-white')
                        }
                    })
                }
            }
        }
    }

</script>