<nav
  class="sticky w-full bg-white z-50 border-b border-gray-100 shadow-sm relative min-h-screen pt-20 overflow-hidden"
  id="nav"
>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-20">
      <a href="/" class="text-3xl font-playfair text-primary transition-all duration-300 hover:opacity-80">
        {{ settings.seo.title.split(' - ')[0] }}
      </a>

      <!-- Mobile Hamburger -->
      <div class="md:hidden">
        <button
          id="mobile-menu-button"
          type="button"
          class="text-gray-700 hover:text-primary focus:outline-none transition-colors duration-300"
        >
          <i class="ri-menu-line text-2xl"></i>
        </button>
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden md:flex space-x-8">
        {% for link in sections.navigation.links %}
        <a 
          href="{{ link.url }}" 
          class="text-gray-700 hover:text-primary relative py-2 transition-colors duration-300 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-primary after:transition-all hover:after:w-full"
        >
          {{ link.label }}
        </a>
        {% endfor %}
      </div>

      <!-- Desktop CTA -->
      <div class="hidden md:flex items-center space-x-6">
        {% for link in sections.navigation.items %}
        <a 
          href="{{ link.url }}" 
          class="text-gray-700 hover:text-primary transition-colors duration-300"
        >
          {{ link.label }}
        </a>
        {% endfor %} 
        
        {% if sections.navigation.ctaItems and sections.navigation.ctaItems|length > 0 %} 
        {% for ctaItem in sections.navigation.ctaItems %}
        <a
          href="{{ ctaItem.url }}"
          class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 shadow-sm hover:shadow transition-all duration-300 transform hover:-translate-y-0.5"
        >
          {{ ctaItem.label }}
        </a>
        {% endfor %} 
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div
    id="mobile-menu"
    class="hidden absolute top-full left-0 w-full bg-white border-t border-gray-100 shadow-md md:hidden"
  >
    <div class="px-6 py-6 space-y-4">
      {% for link in sections.navigation.items %}
      <div>
        <a
          href="{{ link.url }}"
          onclick="toggleMobileMenu()"
          class="block text-gray-700 hover:text-primary py-2 transition-colors duration-300"
        >
          {{ link.label }}
        </a>
      </div>
      {% endfor %} 
      
      {% if sections.navigation.ctaItems and sections.navigation.ctaItems|length > 0 %} 
      <div class="pt-2">
        {% for ctaItem in sections.navigation.ctaItems %}
        <a
          href="{{ ctaItem.url }}"
          onclick="toggleMobileMenu()"
          class="block text-center px-8 py-3 bg-primary text-white rounded-md hover:bg-primary/90 shadow-sm hover:shadow transition-all duration-300"
        >
          {{ ctaItem.label }}
        </a>
        {% endfor %} 
      </div>
      {% endif %}
    </div>
  </div>

  <script>
    function toggleMobileMenu() {
      var menu = document.getElementById("mobile-menu");
      menu.classList.toggle("hidden");
    }
    document
      .getElementById("mobile-menu-button")
      .addEventListener("click", toggleMobileMenu);
  </script>
</nav>
