navigation-bar

@php
    $links = [
        (object) [
            'name' => 'Software Guide',
            'route' => route('software.index'),
            'dropdown' => [
                (object) [
                    'name' => 'Kassensysteme & Payment',
                    'route' => route('software.category.kassensysteme'),
                ],
                (object) [
                    'name' => 'Tischreservierung',
                    'route' => route('software.category.tischreservierung'),
                ],
                (object) [
                    'name' => 'Bestellsysteme',
                    'route' => route('software.category.bestellsysteme'),
                ],
                (object) [
                    'name' => 'Personalmanagement',
                    'route' => route('software.category.personal'),
                ],
                (object) [
                    'name' => 'Ware & Finanzen',
                    'route' => route('software.category.ware-finanzen'),
                ],
                (object) [
                    'name' => 'Nachhaltigkeit',
                    'route' => route('software.category.nachhaltigkeit'),
                ],
                (object) [
                    'name' => 'Spezialisten',
                    'route' => route('software.category.spezialisten'),
                ],
            ],
        ],
        (object) [
            'name' => 'Trend Radar',
            'route' => route('blog.index'),
            'dropdown' => [
                (object) [
                    'name' => 'Branchentrends',
                    'route' => route('blog.kategorie', ['slug' => 'branchentrends']),
                ],
                (object) [
                    'name' => 'Roboter & KI',
                    'route' => route('blog.kategorie', ['slug' => 'roboter-ki']),
                ],
                (object) [
                    'name' => 'Innovationen',
                    'route' => route('blog.kategorie', ['slug' => 'innovationen']),
                ],
                (object) [
                    'name' => 'Fachwissen',
                    'route' => route('blog.kategorie', ['slug' => 'fachwissen']),
                ],
                (object) [
                    'name' => 'Lösungen',
                    'route' => route('blog.kategorie', ['slug' => 'loesungen']),
                ],
                (object) [
                    'name' => 'Tipps',
                    'route' => route('blog.kategorie', ['slug' => 'tipps']),
                ],
                (object) [
                    'name' => 'Videos',
                    'route' => route('blog.kategorie', ['slug' => 'videos']),
                ],
            ],
        ],
        (object) [
            'name' => 'LUSINI Lösungen',
            'route' => route('index').'#lusini-software',
            'dropdown' => [
                (object) [
                    'name' => 'leafsystems',
                    'route' => route('leafsystems'),
                ],
                (object) [
                    'name' => 'BellaBot',
                    'route' => route('bellabot'),
                ],
                (object) [
                    'name' => 'SUITEe',
                    'route' => route('suite-e'),
                ],
                // (object) [
                //     'name' => 'Digitalberatung',
                //     'route' => route('digitalberatung'),
                // ],
            ],
        ],
    ];
@endphp
<nav
    class="sticky top-0 w-full bg-white lg:border-b lg:border-[#D1CFCC] z-[99999999]"
    data-aos="fade-down">
    <div class="relative max-w-[1440px] mx-auto px-5 lg:px-[70px]">
        <div
            class="flex flex-col justify-between w-full gap-4 py-5 lg:flex-row lg:items-center lg:py-8">
            {{-- Logo & Toggler Button here --}}
            <div class="flex items-center justify-between">
                {{-- LOGO --}}
                @include('components.frontend.app-logo')
                {{-- RESPONSIVE NAVBAR BUTTON TOGGLER --}}
                <div class="flex items-center gap-4 lg:hidden">
                    {{-- Search --}}
                    <button type="button" id="navbarSearch"
                            onclick="window.scrollTo({top: 0, behavior: 'auto'}); Livewire.dispatch('openGlobalSearch')"
                            class="flex flex-col items-center rounded hover:filter hover:drop-shadow-[4px_2px_12px_rgba(242,185,42,0.75)] hover:scale-105 transition-all duration-500 bg-transparent border-0">
                        <svg class="size-6 text-old-gold" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"
                            fill="currentColor" stroke="none">
                            <path
                                d="M21.07,16.83,19,14.71a3.08,3.08,0,0,0-3.4-.57l-.9-.9a7,7,0,1,0-1.41,1.41l.89.89A3,3,0,0,0,14.71,19l2.12,2.12a3,3,0,0,0,4.24,0A3,3,0,0,0,21.07,16.83Zm-8.48-4.24a5,5,0,1,1,0-7.08A5,5,0,0,1,12.59,12.59Zm7.07,7.07a1,1,0,0,1-1.42,0l-2.12-2.12a1,1,0,0,1,0-1.42,1,1,0,0,1,1.42,0l2.12,2.12A1,1,0,0,1,19.66,19.66Z">
                            </path>
                        </svg>
                    </button>
                    {{-- WhatsApp (nur für Mobile) --}}
                    <a href="https://api.whatsapp.com/send/?phone=4915172402389" target="_blank" id="navbarWhatsApp"
                        class="flex flex-col items-center rounded hover:filter hover:drop-shadow-[4px_2px_12px_rgba(242,185,42,0.75)] hover:scale-105 transition-all duration-500">
                        <svg class="size-6 text-old-gold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.25361 18.4944L7.97834 18.917C9.18909 19.623 10.5651 20 12.001 20C16.4193 20 20.001 16.4183 20.001 12C20.001 7.58172 16.4193 4 12.001 4C7.5827 4 4.00098 7.58172 4.00098 12C4.00098 13.4363 4.37821 14.8128 5.08466 16.0238L5.50704 16.7478L4.85355 19.1494L7.25361 18.4944ZM2.00516 22L3.35712 17.0315C2.49494 15.5536 2.00098 13.8345 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22C10.1671 22 8.44851 21.5064 6.97086 20.6447L2.00516 22ZM8.39232 7.30833C8.5262 7.29892 8.66053 7.29748 8.79459 7.30402C8.84875 7.30758 8.90265 7.31384 8.95659 7.32007C9.11585 7.33846 9.29098 7.43545 9.34986 7.56894C9.64818 8.24536 9.93764 8.92565 10.2182 9.60963C10.2801 9.76062 10.2428 9.95633 10.125 10.1457C10.0652 10.2428 9.97128 10.379 9.86248 10.5183C9.74939 10.663 9.50599 10.9291 9.50599 10.9291C9.50599 10.9291 9.40738 11.0473 9.44455 11.1944C9.45903 11.25 9.50521 11.331 9.54708 11.3991C9.57027 11.4368 9.5918 11.4705 9.60577 11.4938C9.86169 11.9211 10.2057 12.3543 10.6259 12.7616C10.7463 12.8783 10.8631 12.9974 10.9887 13.108C11.457 13.5209 11.9868 13.8583 12.559 14.1082L12.5641 14.1105C12.6486 14.1469 12.692 14.1668 12.8157 14.2193C12.8781 14.2457 12.9419 14.2685 13.0074 14.2858C13.0311 14.292 13.0554 14.2955 13.0798 14.2972C13.2415 14.3069 13.335 14.2032 13.3749 14.1555C14.0984 13.279 14.1646 13.2218 14.1696 13.2222V13.2238C14.2647 13.1236 14.4142 13.0888 14.5476 13.097C14.6085 13.1007 14.6691 13.1124 14.7245 13.1377C15.2563 13.3803 16.1258 13.7587 16.1258 13.7587L16.7073 14.0201C16.8047 14.0671 16.8936 14.1778 16.8979 14.2854C16.9005 14.3523 16.9077 14.4603 16.8838 14.6579C16.8525 14.9166 16.7738 15.2281 16.6956 15.3913C16.6406 15.5058 16.5694 15.6074 16.4866 15.6934C16.3743 15.81 16.2909 15.8808 16.1559 15.9814C16.0737 16.0426 16.0311 16.0714 16.0311 16.0714C15.8922 16.159 15.8139 16.2028 15.6484 16.2909C15.391 16.428 15.1066 16.5068 14.8153 16.5218C14.6296 16.5313 14.4444 16.5447 14.2589 16.5347C14.2507 16.5342 13.6907 16.4482 13.6907 16.4482C12.2688 16.0742 10.9538 15.3736 9.85034 14.402C9.62473 14.2034 9.4155 13.9885 9.20194 13.7759C8.31288 12.8908 7.63982 11.9364 7.23169 11.0336C7.03043 10.5884 6.90299 10.1116 6.90098 9.62098C6.89729 9.01405 7.09599 8.4232 7.46569 7.94186C7.53857 7.84697 7.60774 7.74855 7.72709 7.63586C7.85348 7.51651 7.93392 7.45244 8.02057 7.40811C8.13607 7.34902 8.26293 7.31742 8.39232 7.30833Z"></path></svg>
                    </a>
                    <button class="p-2 outline-none" id="navbarToggler" data-target="#navigation">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3 4.44772 3.44772 4 4 4H20C20.5523 4 21 4.44772 21 5C21 5.55228 20.5523 6 20 6H4C3.44772 6 3 5.55228 3 5ZM3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12ZM4 18C3.44772 18 3 18.4477 3 19C3 19.5523 3.44772 20 4 20H20C20.5523 20 21 19.5523 21 19C21 18.4477 20.5523 18 20 18H4Z" fill="#2B271F"/>
                        </svg>
                    </button>
                </div>
            </div>

            {{-- Nav Menu --}}
            <div class="hidden w-full lg:block" id="navigation">
                <div
                    class="flex flex-col items-baseline gap-5 mt-6 lg:gap-12 lg:justify-between lg:flex-row lg:items-center lg:mt-0">
                    <div
                        class="flex flex-col w-full gap-4 ml-auto lg:w-auto lg:gap-10 lg:items-center lg:flex-row lg:mr-auto">
                        @foreach ($links as $link)
                            @if (sizeof($link->dropdown))
                                <div class="hidden sm:inline-flex m-1 hs-dropdown [--trigger:hover] relative">
                                    <a href="{{ $link->route }}" id="navbar{{ str_replace(' ', '', ucwords($link->name)) }}" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"
                                        @class([
                                            'font-roboto text-base whitespace-nowrap text-black cursor-pointer transition-all flex items-center gap-2 hover:text-old-gold',
                                            '!text-old-gold' => $link->route == Request::url(),
                                        ])>
                                        {{ __($link->name) }}
                                        <svg class="hs-dropdown-open:rotate-180 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                    </a>

                                    <div class="hs-dropdown-menu z-[999999999] transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg mt-2 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-700 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-dropdown-default">
                                        <div class="p-1 space-y-0.5">
                                            @foreach ($link->dropdown as $dropdown)
                                            <a class="gap-x-3.5 py-2 px-3 font-roboto text-base whitespace-nowrap text-black cursor-pointer transition-all flex items-center gap-2 hover:text-old-gold"
                                                href="{{ $dropdown->route }}" id="navbar{{ str_replace(' ', '', ucwords($dropdown->name)) }}">
                                                {{ $dropdown->name }}
                                            </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="relative inline-flex m-1 sm:hidden hs-dropdown">
                                    <div aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"
                                        @class([
                                            'font-roboto text-base whitespace-nowrap text-black cursor-pointer transition-all flex items-center gap-2 hover:text-old-gold',
                                            '!text-old-gold' => $link->route == Request::url(),
                                        ])>
                                        {{ __($link->name) }}
                                        <svg class="hs-dropdown-open:rotate-180 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                    </div>

                                    <div class="hs-dropdown-menu z-[999999999] transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg mt-2 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-700 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-dropdown-default">
                                        <div class="p-1 space-y-0.5">
                                            @foreach ($link->dropdown as $dropdown)
                                            <a class="gap-x-3.5 py-2 px-3 font-roboto text-base whitespace-nowrap text-black cursor-pointer transition-all flex items-center gap-2 hover:text-old-gold"
                                                href="{{ $dropdown->route }}" id="navbar{{ str_replace(' ', '', ucwords($dropdown->name)) }}">
                                                {{ $dropdown->name }}
                                            </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @else
                                <a href="{{ $link->route }}" id="navbar{{ str_replace(' ', '', ucwords($link->name)) }}" @class([
                                    'font-roboto text-base whitespace-nowrap text-black cursor-pointer transition-all flex items-center gap-2 hover:text-old-gold',
                                    '!text-old-gold' => $link->route == Request::url(),
                                ])>
                                    {{ __($link->name) }}
                                </a>
                            @endif
                        @endforeach
                    </div>
                    <div class="flex flex-col gap-3 lg:gap-6 lg:items-center lg:flex-row">
                        <a id="navbarTerminVereinbaren"
                            href="https://calendly.com/lusini-digital/digitalberatung"
                            target="_blank"
                            class="p-2.5 btn btn-outline-black text-dark-grey">
                            {{ __('Termin vereinbaren') }}
                        </a>
                        @push('js')
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    var button = document.getElementById('navbarTerminVereinbaren');
                                    if (typeof Calendly !== 'undefined') {
                                        button.onclick = function(e) {
                                            e.preventDefault();
                                            Calendly.initPopupWidget({url: 'https://calendly.com/lusini-digital/digitalberatung?hide_gdpr_banner=1&primary_color=2b271f'});
                                            return false;
                                        };
                                    }
                                });
                            </script>
                        @endpush
                        <div class="flex items-center gap-6">
                            {{-- Search (nur für Desktop) --}}
                            <button type="button" id="navbarSearchDesktop"
                                    onclick="window.scrollTo({top: 0, behavior: 'auto'}); Livewire.dispatch('openGlobalSearch')"
                                    class="hidden lg:flex flex-col items-center rounded hover:filter hover:drop-shadow-[4px_2px_12px_rgba(242,185,42,0.75)] hover:scale-105 transition-all duration-500 bg-transparent border-0">
                                <svg class="size-8 text-old-gold" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"
                                    fill="currentColor" stroke="none">
                                    <path
                                        d="M21.07,16.83,19,14.71a3.08,3.08,0,0,0-3.4-.57l-.9-.9a7,7,0,1,0-1.41,1.41l.89.89A3,3,0,0,0,14.71,19l2.12,2.12a3,3,0,0,0,4.24,0A3,3,0,0,0,21.07,16.83Zm-8.48-4.24a5,5,0,1,1,0-7.08A5,5,0,0,1,12.59,12.59Zm7.07,7.07a1,1,0,0,1-1.42,0l-2.12-2.12a1,1,0,0,1,0-1.42,1,1,0,0,1,1.42,0l2.12,2.12A1,1,0,0,1,19.66,19.66Z">
                                    </path>
                                </svg>
                                <p class="text-[10px]">Suchen</p>
                            </button>
                            {{-- E-Mail (nur für Desktop) --}}
                            <a href="{{ route('kontakt') }}" id="navbarKontakt" class="hidden lg:flex flex-col items-center rounded hover:filter hover:drop-shadow-[4px_2px_12px_rgba(242,185,42,0.75)] hover:scale-105 transition-all duration-500">
                                <img src="{{ asset('assets/svgs/ic-message-gold.svg') }}" class="size-8" alt="">
                                <p class="text-[10px]">Kontakt</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<script>
    document.addEventListener('keydown', function(e) {
        // CMD+K oder STRG+K öffnet die Suche
        if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
            e.preventDefault();
            window.scrollTo({top: 0, behavior: 'auto'});
            if (typeof Livewire !== 'undefined') {
                Livewire.dispatch('openGlobalSearch');
            }
        }
    });
</script>