<nav data-component-type="Navigation" class="bg-white max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24 lg:py-6 py-4 border-b border-gray-100" data-component-slug="ss-amusement-park-navbar">
  <div class>
    <div class="flex items-center justify-between h-16 md:h-20">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="/">
          <img data-node="logo" data-node-type="file" data-node-label="Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303829/seltrix/templates/ss-amusement-park-template/logo.svg" src="{{logo}}" alt="Logo" class="h-8 md:h-12 w-auto">
        </a>
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden lg:flex items-center space-x-8">
        <a data-node="nav_link_1_url" data-node-type="page_links" data-node-label="Nav Link 1 URL" data-node-default="home" href="{{nav_link_1_url}}" class="text-gray-900 font-medium transition-colors text-sm lg:text-base hover:text-[#2563EB]">
          <span data-node="nav_link_1_text" data-node-type="text" data-node-label="Nav Link 1 Text" data-node-default="Home">{{nav_link_1_text}}</span>
        </a>

        <a data-node="nav_link_2_url" data-node-type="page_links" data-node-label="Nav Link 2 URL" data-node-default="explore" href="{{nav_link_2_url}}" class="text-gray-600 hover:text-[#2563EB] font-medium transition-colors text-sm lg:text-base">
          <span data-node="nav_link_2_text" data-node-type="text" data-node-label="Nav Link 2 Text" data-node-default="Explore">{{nav_link_2_text}}</span>
        </a>

        <a data-node="nav_link_3_url" data-node-type="page_links" data-node-label="Nav Link 3 URL" data-node-default="tickets" href="{{nav_link_3_url}}" class="text-gray-600 hover:text-[#2563EB] font-medium transition-colors text-sm lg:text-base">
          <span data-node="nav_link_3_text" data-node-type="text" data-node-label="Nav Link 3 Text" data-node-default="Tickets">{{nav_link_3_text}}</span>
        </a>

        <a data-node="nav_link_4_url" data-node-type="page_links" data-node-label="Nav Link 4 URL" data-node-default="about" href="{{nav_link_4_url}}" class="text-gray-600 hover:text-[#2563EB] font-medium transition-colors text-sm lg:text-base">
          <span data-node="nav_link_4_text" data-node-type="text" data-node-label="Nav Link 4 Text" data-node-default="About Us">{{nav_link_4_text}}</span>
        </a>
      </div>

      <!-- CTA Button (Desktop) -->
      <div class="hidden lg:block">
        <a data-node="cta_url" data-node-type="url" data-node-label="CTA Button URL" data-node-default="#" href="{{cta_url}}" class="inline-flex items-center px-6 py-3 bg-[#2563EB] text-white font-semibold hover:bg-[#1D4ED8] transition-all text-sm md:text-base shadow-[0_8px_30px_rgba(37,99,235,0.3)]">
          <span data-node="cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Explore">{{cta_text}}</span>
        </a>
      </div>

      <!-- Mobile Menu Button -->
      <button type="button" class="lg:hidden p-2 rounded-lg text-gray-700 hover:bg-gray-100 mobile-menu-btn" aria-label="Toggle mobile menu">
        <svg class="w-8 h-8 hamburger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
        <svg class="w-6 h-6 close-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu Overlay -->
  <div class="mobile-overlay fixed inset-0 bg-black/50 z-40 opacity-0 pointer-events-none transition-opacity duration-300"></div>

  <!-- Mobile Menu Drawer -->
  <div class="mobile-drawer fixed top-0 right-0 h-full w-72 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300">
    <div class="flex flex-col h-full">
      <!-- Close Button -->
      <div class="flex justify-end p-4">
        <button type="button" class="mobile-close p-2 rounded-lg text-gray-700 hover:bg-gray-100" aria-label="Close menu">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>

      <!-- Mobile Links -->
      <nav class="flex-1 px-4 space-y-2">
        <a href="{{nav_link_1_url}}" class="block py-3 px-4 text-[#2563EB] font-medium rounded-lg hover:bg-gray-100">
          {{nav_link_1_text}}
        </a>
        <a href="{{nav_link_2_url}}" class="block py-3 px-4 text-gray-700 font-medium rounded-lg hover:bg-gray-100">
          {{nav_link_2_text}}
        </a>
        <a href="{{nav_link_3_url}}" class="block py-3 px-4 text-gray-700 font-medium rounded-lg hover:bg-gray-100">
          {{nav_link_3_text}}
        </a>
        <a href="{{nav_link_4_url}}" class="block py-3 px-4 text-gray-700 font-medium rounded-lg hover:bg-gray-100">
          {{nav_link_4_text}}
        </a>
      </nav>

      <!-- Mobile CTA -->
      <div class="p-4 border-t">
        <a href="{{cta_url}}" class="block w-full py-3 text-center bg-[#2563EB] text-white font-medium hover:bg-[#1D4ED8]">
          {{cta_text}}
        </a>
      </div>
    </div>
  </div>
</nav>