{% load static %}


<header class="fixed top-0 left-0 w-full z-50 ">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
        <!-- Logo -->
        <div>
            <img src="{% static 'img/logo.png' %}" alt="Logo" class="h-16">
        </div>

        <!-- Desktop meni -->
        <nav class="hidden md:flex items-center space-x-24 font-medium">

            <!-- O nama -->
            <div class="relative group">
                <button class="relative hover:text-gray-300">O nama</button>
                <div class="absolute hidden group-hover:block bg-white text-black/80 shadow-md rounded z-50">
                    <div @click="goToSection(section.id)" v-for="section in sections" :key="section.title"
                         class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">[[
                        section.name]]
                    </div>
                </div>
            </div>

            <!-- Usluge -->
            <div class="relative group">
                <button class="relative hover:text-gray-300">Usluge</button>
                <div class="absolute hidden group-hover:block bg-white text-black/80 shadow-md rounded z-50">

                        <div
                                v-for="category in categories"
                                :key="category"
                                @click="selCategory(category)"
                                :class="['block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer', selectedCategory === category ? 'text-orange-500' : 'text-gray-500 hover:text-orange-200']">
                            [[ category ]]
                        </div>

<!--                    <div @click="scrollToDetails('projects')"-->
<!--                         class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">In store-->
<!--                        promocije-->
<!--                    </div>-->
<!--                    <div @click="scrollToDetails('projects')"-->
<!--                         class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">-->
<!--                        Organizacija-->
<!--                        događaja-->
<!--                    </div>-->
<!--                    <div @click="scrollToDetails('projects')"-->
<!--                         class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">-->
<!--                        Kreativna-->
<!--                        rešenja-->
<!--                    </div>-->
<!--                    <div @click="scrollToDetails('projects')"-->
<!--                         class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">-->
<!--                        Digitalni-->
<!--                        marketing-->
<!--                    </div>-->
<!--                    <div @click="scrollToDetails('projects')"-->
<!--                         class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">-->
<!--                        Produkcija-->
<!--                    </div>-->
                </div>
            </div>

            <!-- Kontakt -->
            <a @click="scrollToDetails('contact')" href="#kontakt" class="hover:text-gray-300">Kontakt</a>
        </nav>

        <!-- Hamburger meni animiran -->
        <button @click="menuOpen = !menuOpen" class="md:hidden relative w-8 h-8 focus:outline-none group z-50">
  <span :class="[
        'absolute left-0 top-1 w-full h-0.5 bg-black transition-transform duration-300',
        menuOpen ? 'rotate-45 top-3' : 'top-1'
    ]"></span>
            <span :class="[
        'absolute left-0 top-3 w-full h-0.5 bg-black transition-opacity duration-300',
        menuOpen ? 'opacity-0' : 'opacity-100'
    ]"></span>
            <span :class="[
        'absolute left-0 top-5 w-full h-0.5 bg-black transition-transform duration-300',
        menuOpen ? '-rotate-45 top-3' : 'top-5'
    ]"></span>
        </button>
    </div>

    <transition name="slide">
        <div v-if="menuOpen"
             class="fixed inset-y-0 left-0 w-64 bg-white z-40 px-6 py-8 space-y-4 shadow-lg transform transition-transform duration-300 ease-in-out md:hidden">

            <!-- O nama sa podmenijem -->
            <div>
                <button @click="toggleSubmenu('onama')" class="w-full text-left block border-b border-gray-300 pb-2">
                    O nama
                </button>
                <transition name="fade">
                    <div v-show="activeSubmenu === 'onama'" class="pl-4 mt-2 space-y-2">
                        <div @click="goToSection(section.id)" v-for="section in sections" :key="section.title"
                             class="block hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">
                            [[
                            section.name]]
                        </div>
                    </div>
                </transition>
            </div>

            <!-- Usluge sa podmenijem -->
            <div>
                <button @click="toggleSubmenu('usluge')" class="w-full text-left block border-b border-gray-300 pb-2">
                    Usluge
                </button>
                <transition name="fade">
                    <div v-show="activeSubmenu === 'usluge'" class="">
                        <div
                                v-for="category in categories"
                                :key="category"
                                @click="selCategory(category)"
                                :class="['block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer', selectedCategory === category ? 'text-orange-500' : 'text-gray-500 hover:text-orange-200']">
                            [[ category ]]
                        </div>
<!--                        <div @click="scrollToDetails('projects')"-->
<!--                             class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">In-->
<!--                            store promocije-->
<!--                        </div>-->
<!--                        <div @click="scrollToDetails('projects')"-->
<!--                             class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">-->
<!--                            Organizacija događaja-->
<!--                        </div>-->
<!--                        <div @click="scrollToDetails('projects')"-->
<!--                             class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">-->
<!--                            Kreativna-->
<!--                            rešenja-->
<!--                        </div>-->
<!--                        <div @click="scrollToDetails('projects')"-->
<!--                             class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">-->
<!--                            Digitalni-->
<!--                            marketing-->
<!--                        </div>-->
<!--                        <div @click="scrollToDetails('projects')"-->
<!--                             class="block px-4 py-2 hover:text-orange-400 whitespace-nowrap rounded cursor-pointer">-->
<!--                            Produkcija-->
<!--                        </div>-->
                    </div>
                </transition>
            </div>

            <!-- Kontakt bez podmenija -->
            <div @click="scrollToDetails('contact')" class="block">Kontakt</div>
        </div>
    </transition>

</header>