<!-- Default Theme Header - Tailwind CSS + Flowbite -->
<!-- Top Bar - Uses semantic palette classes for theme customization -->
<header class="bg-pwb-secondary-800 text-white">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-between py-2 text-sm">
      <div class="flex items-center space-x-4">
        <% if @current_agency.phone_number_primary %>
          <span class="flex items-center">
            <%= icon(:phone, size: :sm, class: "mr-2") %>
            <%= @current_agency.phone_number_primary %>
          </span>
        <% end %>
        <% if @current_agency.email_primary %>
          <span class="hidden md:flex items-center">
            <%= icon(:email, size: :sm, class: "mr-2") %>
            <%= @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-2">
          <% @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 rounded text-sm font-medium text-white inline-flex items-center justify-center #{is_selected ? 'bg-pwb-primary' : 'hover:bg-pwb-secondary-700'}" do %>
              <%= locale_name %>
            <% end %>
          <% end %>
        </nav>
      <% end %>
    </div>
  </div>
</header>

<!-- Main Navigation - using Stimulus toggle controller for mobile menu -->
<nav class="bg-white border-b border-gray-200 sticky top-0 z-50" data-controller="toggle">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-between py-4">
      <!-- Logo -->
      <%= link_to main_app.root_path(locale: locale), class: "flex items-center" do %>
        <% if @current_website.logo_url %>
          <img src="<%= @current_website.logo_url %>" alt="<%= company_display_name %>" class="h-8 md:h-12" loading="eager" fetchpriority="high">
        <% else %>
          <span class="text-xl font-bold text-gray-800"><%= company_display_name %></span>
        <% end %>
      <% end %>

      <!-- Mobile menu button -->
      <button
        data-action="toggle#toggle"
        data-toggle-target="trigger"
        type="button"
        class="inline-flex items-center justify-center min-h-[44px] min-w-[44px] p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus-visible:ring-blue-500"
        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="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        </svg>
      </button>

      <!-- Navigation Links -->
      <div class="hidden md:block w-full md:w-auto" id="navbar-main" data-toggle-target="content">
        <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
          <% @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-2 px-3 md:p-0 #{is_active ? 'text-pwb-primary font-semibold' : 'text-gray-700 hover:text-pwb-primary'}" %>
              </li>
            <% end %>
          <% end %>

          <%# User dropdown - using Stimulus dropdown controller %>
          <% if current_user %>
            <li class="relative" data-controller="dropdown">
              <button type="button" class="flex items-center py-2 px-3 text-gray-700 hover:text-pwb-primary md:p-0" data-action="dropdown#toggle">
                <%= current_user.email.split('@').first %>
                <svg class="w-4 h-4 ml-1" 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 data-dropdown-target="menu" class="hidden absolute right-0 z-10 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200">
                <ul class="py-2 text-sm text-gray-700">
                  <li>
                    <%= link_to I18n.t("changePassword"), edit_user_registration_path(),
                        class: "block px-4 py-2 hover:bg-gray-100" %>
                  </li>
                  <li>
                    <%= auth_logout_link I18n.t("signOut"),
                        class: "block px-4 py-2 hover:bg-gray-100 text-red-600" %>
                  </li>
                </ul>
              </div>
            </li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
</nav>

