<!-- Biarritz Theme Header - Elegant Coastal Design with Maximum Contrast -->
<!-- Top Bar - Ocean Dark Background with White Text (21:1 contrast) -->
<!-- Colors use CSS variables from _biarritz.css.erb for palette consistency -->
<header class="text-white border-b" style="background-color: var(--header-bg); border-color: var(--header-border);">
  <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="biarritz-header-link flex items-center transition-colors">
            <%= icon(:phone, size: :sm, class: "mr-2") %>
            <span><%= @current_agency.phone_number_primary %></span>
          </span>
        <% end %>
        <% if @current_agency.email_primary %>
          <span class="biarritz-header-link hidden md:flex items-center transition-colors">
            <%= icon(:email, size: :sm, class: "mr-2") %>
            <span><%= @current_agency.email_primary %></span>
          </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: "biarritz-lang-link min-h-[44px] min-w-[44px] px-3 py-2 rounded-md uppercase font-semibold text-xs transition-all inline-flex items-center justify-center #{is_selected ? 'biarritz-lang-active' : ''}" do %>
              <%= locale_name %>
            <% end %>
          <% end %>
        </nav>
      <% end %>
    </div>
  </div>
</header>

<!-- Main Navigation - White Background with Dark Text (Maximum Contrast) -->
<nav class="shadow-lg sticky top-0 z-50 border-b-4" style="background-color: var(--nav-bg); border-color: var(--nav-border-accent);" data-controller="toggle" role="navigation">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-between py-4">

      <!-- Logo - Playfair Display Font -->
      <%= link_to main_app.root_path(locale: locale),
          class: "flex items-center group transition-transform hover:scale-105",
          "aria-label": "#{@current_agency.display_name} - Home" do %>
        <% if @current_website.logo_url %>
          <img src="<%= @current_website.logo_url %>"
               alt="<%= @current_agency.display_name %> Logo"
               class="h-12 md:h-16"
               loading="eager"
               fetchpriority="high">
        <% else %>
          <div class="flex items-center space-x-3">
            <!-- Ocean Wave Icon -->
            <div class="w-12 h-12 md:w-14 md:h-14 rounded-lg flex items-center justify-center" style="background-color: var(--nav-icon-bg);">
              <svg class="w-7 h-7 md:w-8 md:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
              </svg>
            </div>
            <span class="biarritz-logo-text text-2xl md:text-3xl font-bold transition-colors"
                  style="font-family: 'Playfair Display', Georgia, serif;">
              <%= @current_agency.display_name %>
            </span>
          </div>
        <% end %>
      <% end %>

      <!-- Mobile Menu Button - High Contrast -->
      <button data-action="toggle#toggle"
              type="button"
              class="biarritz-mobile-menu inline-flex items-center p-3 rounded-lg md:hidden transition-colors"
              aria-controls="navbar-main"
              aria-expanded="false"
              aria-label="Toggle navigation menu">
        <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>

      <!-- Desktop Navigation - High Contrast 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-1 md:mt-0 md:items-center">
          <% @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: "biarritz-nav-link block px-4 py-3 md:py-2 rounded-lg font-medium transition-all #{is_active ? 'biarritz-nav-active font-semibold' : ''}",
                    "aria-current": (is_active ? 'page' : nil) %>
              </li>
            <% end %>
          <% end %>

          <!-- User Dropdown - If Logged In -->
          <% if current_user %>
            <li class="relative" data-controller="dropdown">
              <button type="button"
                      class="biarritz-nav-link biarritz-dropdown-btn flex items-center px-4 py-3 md:py-2 rounded-lg font-medium transition-all"
                      data-action="dropdown#toggle"
                      aria-haspopup="true"
                      aria-expanded="false">
                <span><%= current_user.email.split('@').first %></span>
                <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                  <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="biarritz-dropdown-menu hidden absolute right-0 z-10 mt-2 w-56 bg-white rounded-xl shadow-xl border-2"
                   role="menu">
                <ul class="py-2 text-sm">
                  <li role="none">
                    <%= link_to I18n.t("changePassword"), edit_user_registration_path(),
                        class: "biarritz-dropdown-item block px-4 py-3 font-medium transition-colors",
                        role: "menuitem" %>
                  </li>
                  <li role="none" class="biarritz-dropdown-divider border-t mt-2 pt-2">
                    <%= auth_logout_link I18n.t("signOut"),
                        class: "biarritz-signout-link block px-4 py-3 font-medium transition-colors",
                        role: "menuitem" %>
                  </li>
                </ul>
              </div>
            </li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
</nav>

<!-- Coastal Accent Wave - Decorative Only -->
<div class="biarritz-accent-wave h-1" aria-hidden="true"></div>
