<!-- Brisbane Luxury Theme Header - Uses semantic palette classes -->
<!-- Sophisticated top bar with accent highlights -->
<header class="bg-pwb-secondary-900 text-white border-b border-pwb-accent/20">
  <div class="container mx-auto px-6">
    <div class="flex flex-wrap items-center justify-between py-2.5 text-xs tracking-wider">
      <div class="flex items-center space-x-6">
        <% if @current_agency.phone_number_primary %>
          <span class="flex items-center text-white/80 hover:text-pwb-accent transition-colors duration-300">
            <%= icon(:phone, size: :sm, class: "mr-2 text-pwb-accent") %>
            <%= @current_agency.phone_number_primary %>
          </span>
        <% end %>
        <% if @current_agency.email_primary %>
          <span class="hidden md:flex items-center text-white/80 hover:text-pwb-accent transition-colors duration-300">
            <%= icon(:email, size: :sm, class: "mr-2 text-pwb-accent") %>
            <%= @current_agency.email_primary %>
          </span>
        <% end %>
      </div>
      <% if @current_website.is_multilingual && not_devise %>
        <nav aria-label="<%= t('pwb.accessibility.language_selector', default: 'Language selector') %>" class="flex items-center space-x-1">
          <% @current_website.supported_locales_with_variants.uniq { |l| l["locale"] }.each do |locale_with_var| %>
            <% is_selected = locale.to_s == locale_with_var["locale"] %>
            <% locale_name = t("languages.#{locale_with_var['locale']}", default: locale_with_var['locale'].upcase) %>
            <%= link_to params.permit(:locale).merge({locale: locale_with_var["locale"]}),
                lang: locale_with_var["locale"],
                hreflang: locale_with_var["locale"],
                "aria-current": is_selected ? "page" : nil,
                class: "min-h-[44px] min-w-[44px] px-3 py-2 uppercase font-medium tracking-widest transition-all duration-300 inline-flex items-center justify-center #{is_selected ? 'text-pwb-accent border-b border-pwb-accent' : 'text-white/70 hover:text-pwb-accent'}" do %>
              <%= locale_name %>
            <% end %>
          <% end %>
        </nav>
      <% end %>
    </div>
  </div>
</header>

<!-- Elegant Main Navigation -->
<nav class="bg-white border-b border-gray-100 sticky top-0 z-50 transition-all duration-300">
  <div class="container mx-auto px-6">
    <div class="flex flex-wrap items-center justify-between py-5">
      <!-- Logo with Luxury Styling -->
      <%= link_to main_app.root_path(locale: locale), class: "flex items-center group" do %>
        <% if @current_website.logo_url %>
          <img src="<%= @current_website.logo_url %>" alt="<%= company_display_name %>" class="h-10 md:h-14 transition-transform duration-300 group-hover:scale-105" loading="eager" fetchpriority="high">
        <% else %>
          <span class="font-serif text-2xl md:text-3xl text-pwb-secondary-800 tracking-wide"><%= company_display_name %></span>
        <% end %>
      <% end %>

      <!-- Mobile menu button with refined styling -->
      <button
        data-collapse-toggle="navbar-main"
        type="button"
        class="inline-flex items-center justify-center min-h-[44px] min-w-[44px] p-2.5 text-pwb-secondary-800 md:hidden hover:text-pwb-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-pwb-accent transition-colors duration-300"
        aria-controls="navbar-main"
        aria-expanded="false"
        aria-label="<%= t('pwb.accessibility.open_main_menu', default: 'Open main navigation') %>">
        <svg class="w-6 h-6" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>

      <!-- Navigation Links with Luxury Typography -->
      <div class="hidden w-full md:block md:w-auto" id="navbar-main">
        <ul class="flex flex-col mt-6 md:flex-row md:items-center md:space-x-1 md:mt-0">
          <% @current_website.links.ordered_visible_top_nav.each do |page| %>
            <% next if page.slug == "top_nav_admin" %>
            <% target_path = nil %>
            <% begin %>
              <% if page.link_path.present? %>
                <% target_path = main_app.send(page.link_path, page.link_path_params, { locale: locale }) %>
              <% elsif page.link_url.present? %>
                <% target_path = page.link_url %>
              <% end %>
            <% rescue StandardError %>
            <% end %>

            <% if target_path %>
              <% is_active = current_page?(target_path) || (current_page?("/") && page.link_path == "home_path") %>
              <li>
                <%= link_to page.link_title, target_path,
                    target: page.href_target,
                    class: "block py-3 px-5 text-xs font-medium uppercase tracking-widest transition-all duration-300 #{is_active ? 'text-pwb-accent' : 'text-pwb-secondary-800 hover:text-pwb-accent'}" %>
              </li>
            <% end %>
          <% end %>

          <% if current_user %>
            <li class="relative group md:ml-4">
              <button type="button" class="flex items-center py-2.5 px-5 text-xs font-medium uppercase tracking-widest text-pwb-secondary-800 hover:text-pwb-accent transition-all duration-300 border border-pwb-secondary-200 hover:border-pwb-accent" data-dropdown-toggle="user-dropdown">
                <%= icon(:person, size: :sm, class: "mr-2") %>
                <%= current_user.email.split('@').first %>
                <svg class="w-3 h-3 ml-2" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
              </button>
              <div id="user-dropdown" class="hidden absolute right-0 z-10 mt-2 w-56 bg-white shadow-lg border border-gray-100">
                <ul class="py-1">
                  <li>
                    <%= link_to I18n.t("changePassword"), edit_user_registration_path(),
                        class: "block px-5 py-3 text-xs uppercase tracking-wider text-gray-600 hover:bg-gray-50 hover:text-pwb-accent transition-colors duration-300" %>
                  </li>
                  <li class="border-t border-gray-100">
                    <%= auth_logout_link I18n.t("signOut"),
                        class: "block px-5 py-3 text-xs uppercase tracking-wider text-gray-600 hover:bg-gray-50 hover:text-pwb-accent transition-colors duration-300" %>
                  </li>
                </ul>
              </div>
            </li>
          <% end %>

          <!-- Contact CTA Button -->
          <li class="md:ml-6 mt-4 md:mt-0">
            <%= link_to I18n.t("contactUs", default: "Contact"),
                main_app.contact_us_path(locale: locale),
                class: "block py-3 px-6 text-xs font-medium uppercase tracking-widest bg-pwb-secondary-800 text-white hover:bg-pwb-accent transition-all duration-300 text-center" %>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
