<nav 
    x-data="{ scrolled: false }"
    x-init="window.addEventListener('scroll', () => scrolled = window.scrollY > 50)"
    :class="scrolled 
        ? 'shadow-md transition-shadow duration-300' 
        : 'transition-shadow duration-300'"
    class="fixed top-0 left-0 w-full bg-white z-50"
>
  <div class="lg:container mx-auto px-4 md:px-10 lg:px-24 py-1 flex justify-between items-center">
    <!-- Logo -->
    <a href="<?php echo e(url('/')); ?>" class="logo">
      <img src="<?php echo e(asset('assets/logo_real.webp')); ?>" alt="">
    </a>

    <!-- Desktop Navbar Links -->
    <ul class="hidden md:flex space-x-10 items-center">
      <li><a href="<?php echo e(url('/')); ?>" class="text-base py-2 font-medium transition-all hover:text-[var(--primary-color)]">Home</a></li>
      <li><a href="<?php echo e(url('about-us')); ?>" class="text-base py-2 font-medium transition-all hover:text-[var(--primary-color)]">About</a></li>

      <!-- Property Dropdown -->
      <li class="relative group">
        <button class="text-base py-2 font-medium transition-all hover:text-[var(--primary-color)] inline-flex items-center gap-x-1">
          Property
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="opacity-90 size-5 lucide lucide-chevron-down-icon lucide-chevron-down">
            <path d="m6 9 6 6 6-6" />
          </svg>
        </button>
        <ul class="absolute left-0 z-50 w-48 bg-white shadow-lg rounded-lg overflow-hidden hidden group-hover:block transition duration-300">
            <?php if(!empty($headerCategories)): ?>
                <?php $__currentLoopData = $headerCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li>
                        <a href="<?php echo e(url('/' . strtolower($category))); ?>" class="block px-4 py-2 text-sm text-gray-700 font-medium hover:bg-[var(--primary-color)] hover:text-white transition duration-200">
                            <?php echo e($category === 'sell' ? 'Buy' : ucfirst($category)); ?>

                        </a>
                    </li>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php else: ?>
                <li>
                    <span class="text-gray-400 text-sm">Loading Categories...</span>
                </li>
            <?php endif; ?>
        </ul>
      </li>

      <li><a href="<?php echo e(url('contact')); ?>" class="text-base py-2 font-medium transition-all hover:text-[var(--primary-color)]">Contact</a></li>
    </ul>

    <!-- Get a Quote Button -->
    <div>
      <a draggable="false" href="tel:+919876543210" class="text-sm md:text-base inline-flex items-center justify-center gap-x-2 bg-[var(--primary-color)] text-white px-6 py-3 rounded-md focus:outline-none hover:scale-95 transition-all duration-200">
        <img draggable="false" class="size-5 md:size-6 select-none pointer-events-none" src="<?php echo e(asset('/assets/images/icons/call.gif')); ?>" alt="Call Icon" />
        Get a Quote
      </a>
    </div>

    <!-- Mobile Menu Button -->
    <button class="md:hidden text-gray-700" id="mobile-menu-button">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" class="size-9">
        <path d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>

  <!-- Mobile Menu (with AOS animation) -->
  <div class="md:hidden hidden" id="mobile-menu" data-aos="fade-down" data-aos-duration="500">
    <ul class="space-y-3 py-4 px-6 bg-white shadow-lg">
      <li><a href="<?php echo e(url('/')); ?>" class="text-base py-2 font-medium transition-all hover:text-[var(--primary-color)]">Home</a></li>
      <li><a href="<?php echo e(url('about-us')); ?>" class="text-base py-2 font-medium transition-all hover:text-[var(--primary-color)]">About</a></li>

      <!-- Mobile Property Dropdown -->
      <li class="relative">
        <button class="py-2 text-base font-medium transition-all hover:text-[var(--primary-color)] inline-flex items-center gap-x-1" id="mobile-property-button">
          Property
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="opacity-90 size-5 lucide lucide-chevron-down-icon lucide-chevron-down">
            <path d="m6 9 6 6 6-6" />
          </svg>
        </button>
        <ul id="mobile-property-dropdown" class="space-y-3 px-3 py-3 hidden bg-gray-50 rounded-lg">
            <?php if(!empty($headerCategories)): ?>
                <?php $__currentLoopData = $headerCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li>
                        <a href="<?php echo e(url('/' . strtolower($category))); ?>" class="block px-4 py-2 text-sm text-gray-700 font-medium hover:bg-[var(--primary-color)] hover:text-white transition duration-200">
                            <?php echo e($category === 'sell' ? 'Buy' : ucfirst($category)); ?>

                        </a>
                    </li>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php else: ?>
                <li>
                    <span class="text-gray-400 text-sm">Loading Categories...</span>
                </li>
            <?php endif; ?>
        </ul>
      </li>

      <li><a href="<?php echo e(url('contact')); ?>" class="text-base py-2 font-medium transition-all hover:text-[var(--primary-color)]">Contact</a></li>
    </ul>
  </div>
</nav>

<div class="pt-[60px]"><!--===Space===--></div><?php /**PATH E:\laravel\realStateNew\resources\views/frontend/body/header.blade.php ENDPATH**/ ?>