<!-- ✅ ADD THIS ONCE IN <head> (layout file) -->
<style>
  [x-cloak] { display: none !important; }
</style>

<header x-data="{
    mega: false,
    mobile: false,
    mobileServices: false,
    lastScroll: 0,
    showHeader: true
}" x-init="window.addEventListener('scroll', () => {
    let current = window.pageYOffset;

    if (current > lastScroll && current > 100) {
        // scroll down
        showHeader = false;
    } else {
        // scroll up OR scroll stopped
        showHeader = true;
    }

    lastScroll = current;
});" :class="showHeader ? 'translate-y-0' : '-translate-y-full'"
    class="fixed top-0 left-0 w-full bg-white z-50 text-black transition-transform duration-500 ease-in-out">

    <!-- ================= TOP BAR ================= -->
    <div class="mx-auto h-[75px] sm:h-[96px] px-4 lg:px-20 flex items-center relative">

        <!-- LOGO (FIXED) -->
        <div class="flex-shrink-0">
            <a href="{{ route('home') }}" wire:navigate>
               <img src="{{ asset('uploads/logo/logo.svg') }}" class="h-8 sm:h-10 w-auto" alt="Eggfirst">
            </a>
        </div>

        <!-- ================= DESKTOP NAV (FIXED) ================= -->
        <nav class="hidden lg:flex items-center gap-10 mx-auto">

            <a href="{{ route('about') }}" wire:navigate class="relative group font-medium text-[16px] cursor-pointer">
                About
                <span
                    class="absolute left-1/2 -bottom-1 h-[1px] w-0 bg-black
                             transition-all duration-300
                             group-hover:w-full group-hover:left-0"></span>
            </a>

            <!-- SERVICES -->
            <button @click="mega = !mega"
                class="relative group flex items-center gap-2
                       font-medium text-[16px]
                       cursor-pointer select-none">

                <span>Services</span>

                <svg class="w-3 h-3 transition-transform duration-300" :class="mega && 'rotate-180'" viewBox="0 0 10 6">
                    <path d="M1 1l4 4 4-4" stroke="#000" stroke-width="1.5" fill="none" />
                </svg>

                <span
                    class="absolute left-1/2 -bottom-1 h-[1px] w-0 bg-black
                             transition-all duration-300
                             group-hover:w-full group-hover:left-0"></span>
            </button>

            <a href="{{ route('work') }}" wire:navigate class="relative group font-medium text-[16px] cursor-pointer">
                Work
                <span
                    class="absolute left-1/2 -bottom-1 h-[1px] w-0 bg-black
                             transition-all duration-300
                             group-hover:w-full group-hover:left-0"></span>
            </a>

            <a href="{{ route('careers') }}" wire:navigate class="relative group font-medium text-[16px] cursor-pointer">
                Careers
                <span
                    class="absolute left-1/2 -bottom-1 h-[1px] w-0 bg-black
                             transition-all duration-300
                             group-hover:w-full group-hover:left-0"></span>
            </a>

            <a href="{{ route('chalobharat') }}" wire:navigate class="relative group font-medium text-[16px] cursor-pointer">
                Chalo Bharat
                <span
                    class="absolute left-1/2 -bottom-1 h-[1px] w-0 bg-black
                             transition-all duration-300
                             group-hover:w-full group-hover:left-0"></span>
            </a>

        </nav>

        <!-- CTA -->
        <div class="hidden lg:block">
            <a href="{{ route('contact') }}" wire:navigate
                class="inline-flex items-center justify-center
                      px-7 py-2.5 text-[16px] font-medium
                      bg-[#f38121] text-white
                      border border-transparent
                      transition-all duration-300 ease-out
                      hover:bg-white hover:text-black hover:border-black">
                Contact
            </a>
        </div>

        <!-- MOBILE BUTTON -->
        <button @click="mobile = true" class="lg:hidden ml-auto cursor-pointer">
            <svg class="w-7 h-7" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>

    </div>

    <!-- ================= MEGA MENU ================= -->
    <div x-cloak x-show="mega" x-transition.opacity.duration.300ms class="relative w-full bg-white z-40">

        <div class="mx-auto pt-2 px-20 py-12">

            <!-- ================= STICKY HEADER ================= -->
            <div
                class="sticky top-[var(--header-h)]
                    bg-white/95 backdrop-blur
                    z-30 pb-5">

                <a href="{{ route('services.index') }}" wire:navigate
                    class="inline-flex items-center gap-2
                      text-[26px] font-bold group">
                    Services Overview
                    <span class="transition-transform duration-300 group-hover:translate-x-2">→</span>
                </a>

                <div class="w-full h-[1px] bg-black mt-5"></div>
            </div>

            <!-- ================= GRID ================= -->
            <div class="grid grid-cols-4 gap-x-10 pt-0">

                <!-- ================= COLUMN 1 ================= -->
                <div>
                    @if (isset($megaMenuColumns[1]))

                        <h4 class="text-[16px] font-semibold mb-4">
                            <a href="{{ route('services.category.view', $megaMenuColumns[1]->slug) }}"
                               class="hover:text-[#f38121] transition">
                                {{ $megaMenuColumns[1]->name }}
                            </a>
                        </h4>

                        <ul class="space-y-4 text-[15px]">
                            @foreach ($megaMenuColumns[1]->menus as $service)
                                <li>
                                    <a href="{{ route('services.category.service', [$megaMenuColumns[1]->slug, $service->slug]) }}"
                                       class="group inline-flex items-center gap-2 text-gray-700 hover:text-orange-600 transition">
                                        {{ $service->title }}
                                        <span class="opacity-0 -translate-x-2 transition-all duration-300
                                            group-hover:opacity-100 group-hover:translate-x-0">→</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>

                    @endif
                </div>

                <!-- ================= COLUMN 2 ================= -->
                <div>
                    @if (isset($megaMenuColumns[2]))

                        <h4 class="text-[16px] font-semibold mb-4">
                            <a href="{{ route('services.category.view', $megaMenuColumns[2]->slug) }}"
                               class="hover:text-[#f38121] transition">
                                {{ $megaMenuColumns[2]->name }}
                            </a>
                        </h4>

                        <ul class="space-y-4 text-[15px]">
                            @foreach ($megaMenuColumns[2]->menus as $service)
                                <li>
                                    <a href="{{ route('services.category.service', [$megaMenuColumns[2]->slug, $service->slug]) }}"
                                       class="group inline-flex items-center gap-2 text-gray-700 hover:text-orange-600 transition">
                                        {{ $service->title }}
                                        <span class="opacity-0 -translate-x-2 transition-all duration-300
                                            group-hover:opacity-100 group-hover:translate-x-0">→</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>

                    @endif
                </div>

                <!-- ================= COLUMN 3 (STACKED 2 CATEGORIES) ================= -->
                <div>

                    {{-- Digital & Experiential --}}
                    @if (isset($megaMenuColumns[3]))
                        <h4 class="text-[16px] font-semibold mb-4">
                            <a href="{{ route('services.category.view', $megaMenuColumns[3]->slug) }}"
                               class="hover:text-[#f38121] transition">
                                {{ $megaMenuColumns[3]->name }}
                            </a>
                        </h4>

                        <ul class="space-y-4 text-[15px] mb-10">
                            @foreach ($megaMenuColumns[3]->menus as $service)
                                <li>
                                    <a href="{{ route('services.category.service', [$megaMenuColumns[3]->slug, $service->slug]) }}"
                                       class="group inline-flex items-center gap-2 text-gray-700 hover:text-orange-600 transition">
                                        {{ $service->title }}
                                        <span class="opacity-0 -translate-x-2 transition-all duration-300
                                            group-hover:opacity-100 group-hover:translate-x-0">→</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif

                    {{-- Media & MarTech --}}
                    @if (isset($megaMenuColumns[4]))
                        <h4 class="text-[16px] font-semibold mb-4">
                            <a href="{{ route('services.category.view', $megaMenuColumns[4]->slug) }}"
                               class="hover:text-[#f38121] transition">
                                {{ $megaMenuColumns[4]->name }}
                            </a>
                        </h4>

                        <ul class="space-y-4 text-[15px]">
                            @foreach ($megaMenuColumns[4]->menus as $service)
                                <li>
                                    <a href="{{ route('services.category.service', [$megaMenuColumns[4]->slug, $service->slug]) }}"
                                       class="group inline-flex items-center gap-2 text-gray-700 hover:text-orange-600 transition">
                                        {{ $service->title }}
                                        <span class="opacity-0 -translate-x-2 transition-all duration-300
                                            group-hover:opacity-100 group-hover:translate-x-0">→</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif

                </div>

                <!-- ================= COLUMN 4 ================= -->
                <div>
                    @if (isset($megaMenuColumns[5]))

                        <h4 class="text-[16px] font-semibold mb-4">
                            <a href="{{ route('services.category.view', $megaMenuColumns[5]->slug) }}"
                               class="hover:text-[#f38121] transition">
                                {{ $megaMenuColumns[5]->name }}
                            </a>
                        </h4>

                        <ul class="space-y-4 text-[15px]">
                            @foreach ($megaMenuColumns[5]->menus as $service)
                                <li>
                                    <a href="{{ route('services.category.service', [$megaMenuColumns[5]->slug, $service->slug]) }}"
                                       class="group inline-flex items-center gap-2 text-gray-700 hover:text-orange-600 transition">
                                        {{ $service->title }}
                                        <span class="opacity-0 -translate-x-2 transition-all duration-300
                                            group-hover:opacity-100 group-hover:translate-x-0">→</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>

                    @endif
                </div>

            </div>
        </div>
    </div>

<!-- ================= MOBILE MENU (TELEPORT TO BODY) ================= -->
<template x-teleport="body">
  <div x-cloak
      x-show="mobile"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0 translate-y-4"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-200"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 translate-y-4"
      class="fixed inset-0 bg-white z-[9999] lg:hidden overflow-y-scroll overscroll-contain"
  >

      <!-- MOBILE HEADER -->
      <div class="flex items-center justify-between px-4 h-[60px] border-b">
        
        <a href="{{ route('home') }}" wire:navigate>
         <img
            src="{{ asset('uploads/logo/logo.svg') }}"
            class="h-7"
            alt="Eggfirst">
            </a>


          <button
              @click="mobile=false"
              class="p-2 rounded-full hover:bg-gray-100 transition cursor-pointer">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
          </button>
      </div>

      <!-- MOBILE CONTENT -->
      <div class="px-6 py-10 space-y-8 text-[18px] font-medium min-h-full">

          <a href="{{ route('about') }}" wire:navigate class="block cursor-pointer">About</a>
         
          <!-- SERVICES ACCORDION -->
          <div>
              <button @click="mobileServices = !mobileServices"
                  class="w-full flex justify-between items-center cursor-pointer">
                  <span>Services</span>
                  <svg class="w-4 h-4 transition-transform duration-300" :class="mobileServices && 'rotate-180'"
                      fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                  </svg>
              </button>

              <div x-cloak x-show="mobileServices" x-transition class="pl-4 pt-6 space-y-5 text-[16px] font-normal">
                  <a href="{{ route('services.index') }}"
                      class="block cursor-pointer hover:text-[#f38121] transition">
                      Services Overview
                  </a>

                  @foreach ($megaMenuColumns as $column)
                      @if ($column)
                          <a href="{{ route('services.category.view', $column->slug) }}"
                              class="block cursor-pointer hover:text-[#f38121] transition">
                              {{ $column->name }}
                          </a>
                      @endif
                  @endforeach
              </div>
          </div>
           <a href="{{ route('work') }}" wire:navigate class="block cursor-pointer">Work</a>
          <a href="{{ route('careers') }}" wire:navigate class="block cursor-pointer">Careers</a>

          <a href="{{ route('chalobharat') }}" wire:navigate class="block cursor-pointer">Chalo Bharat</a>
          <a href="{{ route('contact') }}" wire:navigate class="block cursor-pointer">Contact</a>

      </div>
  </div>
</template>

</header>
