<div x-data="{ open: false }" class="w-full bg-[#302C61] text-white px-8 shadow-md fixed top-0 left-0 z-50">

  <div class="flex items-center justify-between md:justify-start">

    <div class="flex items-center space-x-4">
      <%= link_to root_path do %>
        <%= image_tag "/logo2.png", alt: "Logo", class: "max-h-[70px]" %>
      <% end %>
    </div>

    <!-- mobile (closed) -->
    <button @click="open = !open" class="md:hidden text-white focus:outline-none">
      <svg 
        xmlns="http://www.w3.org/2000/svg" 
        class="h-6 w-6 transform transition-transform duration-300" 
        :class="{ 'rotate-90': open }" 
        fill="none" 
        viewBox="0 0 24 24" 
        stroke="currentColor"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>

    <!-- desktop -->
    <div class="hidden md:flex items-center space-x-6 my-4 ml-8 *:font-dystopian *:uppercase *:hover:underline 2xl:text-2xl text-xl text-center text-[#AFBDEF]">
        <%= link_to "Getting started", "/getting-started", class: "#{request.path.start_with?('/getting-started') ? 'glow' : ''}" %>
        <%= link_to "Custom projects", "/advanced", class: "text-[#AFEFCB] #{request.path.start_with?('/advanced') ? 'glow' : ''}" %>
        <%= link_to "Guides", "/guides", class: "text-[#D1AFEF] #{request.path.start_with?('/guides') ? 'glow' : ''}" %>
        <%= link_to "Gallery", projects_path, class: "#{current_page?(projects_path) ? 'glow' : ''}" %>
        <%= link_to "Events", events_path, class: "#{current_page?(events_path) ? 'glow' : ''}" %>
        <%= link_to "Faq", "/getting-started/faq", class: "#{current_page?('/getting-started/faq') ? 'glow' : ''}" %>
    </div>

    <div class="hidden md:flex items-center ml-auto text-[#AFBDEF] text-xl font-bold">
        <a href="https://hackclub.com/" target="_blank" rel="noopenner noreferrer"><%= image_tag "/hcflag.svg", class: "max-h-[40px] ml-8 hover:-rotate-6 transition-transform duration-100" %></a>
    </div>
  </div>

  <!-- mobile (open) -->
  <div 
    x-show="open" 
    x-transition:enter="transition ease-out duration-100" 
    x-transition:enter-start="opacity-0 transform scale-95" 
    x-transition:enter-end="opacity-100 transform scale-100" 
    x-transition:leave="transition ease-out duration-100" 
    x-transition:leave-start="opacity-100 transform scale-100" 
    x-transition:leave-end="opacity-0 transform scale-95" 
    class="md:hidden mt-4 space-y-4 pb-5 *:font-dystopian *:uppercase *:hover:underline *:text-2xl flex flex-col"
  >
    <%= link_to "Getting started", "/getting-started" %>
    <%= link_to "Starter projects", "/starter-projects" %>
    <%= link_to "Custom projects", "/advanced" %>
    <%= link_to "Gallery", projects_path %>
    <%= link_to "Events", events_path %>
    <%= link_to "Faq", "/getting-started/faq" %>
  </div>
</div>