@php
  $markets = app(\App\Domain\Markets\Services\MarketService::class);
  $locale = $markets->localeForCountry();
  $locales = $markets->locales();
  $currency = $locale['currency'];
  $country = $locale['code'];
  $cartToken = request()->cookie('tra_cart') ?: session('tra_cart');
  $cartQty = 0;
  if ($cartToken) {
      $cartQty = (int) \App\Models\CartLine::query()
          ->whereHas('cart', fn ($q) => $q->where('token', $cartToken))
          ->sum('quantity');
  }
  $categoryMenu = app(\App\Domain\Catalog\Services\CategoryService::class)->storefrontMenu();
  $aboutMenu = app(\App\Support\Storefront\AboutMenu::class)->items(request()->path());
  $signedInCustomer = auth('customer')->user();
  $isTradePartner = (bool) $signedInCustomer?->wholesaleMembership?->company?->isWholesaleActive();
@endphp
<div class="store-announce" role="region" aria-label="Announcement">
  Free Shipping on Orders over $100
</div>
<header id="store-header" class="store-header sticky top-0 z-50 border-b border-white/10 bg-[#0b0b0b]/95 text-white backdrop-blur-md" data-store-header>
  <div class="store-nav-shell">
    <button type="button" class="store-nav-icon store-nav-burger" data-mobile-nav-toggle aria-label="Open menu" aria-controls="mobile-nav" aria-expanded="false">
      <i data-lucide="menu" class="h-5 w-5"></i>
    </button>

    <a href="{{ route('home') }}" class="store-nav-logo" aria-label="The Ring Authority home">
      <span class="store-nav-logo-mark" aria-hidden="true">R</span>
      <span class="store-nav-logo-text">
        <span class="store-nav-logo-the">The Ring</span>
        <span class="store-nav-logo-auth">Authority</span>
      </span>
    </a>

    <nav class="store-nav-links" aria-label="Primary">
      <div class="store-nav-item has-mega" data-mega>
        <button type="button" class="store-nav-link" data-mega-toggle aria-expanded="false" aria-controls="mega-categories">
          <i data-lucide="layout-grid" class="h-4 w-4"></i>
          <span>Product Categories</span>
          <i data-lucide="chevron-down" class="store-nav-chevron"></i>
        </button>
        <div id="mega-categories" class="store-mega" data-mega-panel hidden>
          <div class="store-mega-inner">
            @if($categoryMenu === [])
              <div class="store-mega-empty">
                <p>Browse the full range.</p>
                <a href="/collections/all" class="store-mega-cta">Shop all products <i data-lucide="arrow-right" class="h-4 w-4"></i></a>
              </div>
            @else
              <div class="store-mega-rail" role="tablist" aria-label="Categories">
                @foreach($categoryMenu as $root)
                  <a
                    href="{{ $root['url'] }}"
                    class="store-mega-root {{ $loop->first ? 'is-active' : '' }}"
                    role="tab"
                    aria-selected="{{ $loop->first ? 'true' : 'false' }}"
                    aria-controls="mega-pane-{{ $root['id'] }}"
                    data-mega-root="{{ $root['id'] }}"
                  >
                    <span class="store-mega-root-thumb">
                      @if($root['image'])<img src="{{ $root['image'] }}" alt="" loading="lazy">@else<i data-lucide="package" class="h-4 w-4"></i>@endif
                    </span>
                    <span class="store-mega-root-text">
                      <span class="store-mega-root-title">{{ $root['title'] }}</span>
                      <span class="store-mega-root-count">{{ $root['count'] }} {{ \Illuminate\Support\Str::plural('product', $root['count']) }}</span>
                    </span>
                    <i data-lucide="chevron-right" class="store-mega-root-arrow"></i>
                  </a>
                @endforeach
                <a href="/collections/all" class="store-mega-all">Shop all products <i data-lucide="arrow-right" class="h-3.5 w-3.5"></i></a>
              </div>

              @foreach($categoryMenu as $root)
                <section id="mega-pane-{{ $root['id'] }}" class="store-mega-pane" role="tabpanel" data-mega-pane="{{ $root['id'] }}" @unless($loop->first) hidden @endunless>
                  <div class="store-mega-main">
                    <div class="store-mega-head">
                      <div>
                        <p class="store-mega-eyebrow">Category</p>
                        <h3 class="store-mega-title">{{ $root['title'] }}</h3>
                        @if($root['description'])<p class="store-mega-desc">{{ $root['description'] }}</p>@endif
                      </div>
                      <a href="{{ $root['url'] }}" class="store-mega-cta">Shop all <i data-lucide="arrow-right" class="h-4 w-4"></i></a>
                    </div>
                    @if($root['children'] !== [])
                      <div class="store-mega-grid">
                        @foreach($root['children'] as $child)
                          <div class="store-mega-card">
                            <a href="{{ $child['url'] }}" class="store-mega-card-link">
                              <span class="store-mega-card-thumb">
                                @if($child['image'])<img src="{{ $child['image'] }}" alt="" loading="lazy">@else<i data-lucide="image" class="h-5 w-5"></i>@endif
                              </span>
                              <span>
                                <span class="store-mega-card-title">{{ $child['title'] }}</span>
                                <span class="store-mega-card-count">{{ $child['count'] }} {{ \Illuminate\Support\Str::plural('product', $child['count']) }}</span>
                              </span>
                            </a>
                            @if($child['children'] !== [])
                              <ul class="store-mega-sublist">
                                @foreach($child['children'] as $grandchild)
                                  <li><a href="{{ $grandchild['url'] }}">{{ $grandchild['title'] }}</a></li>
                                @endforeach
                              </ul>
                            @endif
                          </div>
                        @endforeach
                      </div>
                    @else
                      <p class="store-mega-desc">Explore every product in {{ $root['title'] }}.</p>
                    @endif
                  </div>
                  @if($root['featured'] !== [])
                    <aside class="store-mega-featured" aria-label="Popular in {{ $root['title'] }}">
                      <p class="store-mega-eyebrow">Popular</p>
                      @foreach($root['featured'] as $product)
                        <a href="{{ $product['url'] }}" class="store-mega-product">
                          <span class="store-mega-product-thumb">
                            @if($product['image'])<img src="{{ $product['image'] }}" alt="" loading="lazy">@endif
                          </span>
                          <span class="min-w-0">
                            <span class="store-mega-product-title">{{ $product['title'] }}</span>
                            @if($product['grade'])<span class="store-mega-product-sub">{{ $product['grade'] }} grade</span>@endif
                          </span>
                        </a>
                      @endforeach
                    </aside>
                  @endif
                </section>
              @endforeach
            @endif
          </div>
        </div>
      </div>
      @if($aboutMenu === [])
        <div class="store-nav-item">
          <a href="/pages/about-us" class="store-nav-link">About Us</a>
        </div>
      @else
        <div class="store-nav-item has-children" data-nav-item>
          <button type="button" class="store-nav-link {{ collect($aboutMenu)->contains('active', true) ? 'is-current' : '' }}" data-nav-dropdown aria-expanded="false" aria-controls="nav-about" aria-haspopup="true">
            <span>About Us</span>
            <i data-lucide="chevron-down" class="store-nav-chevron"></i>
          </button>
          <div id="nav-about" class="store-nav-dropdown store-about-menu" hidden>
            <ul class="store-about-list">
              @foreach($aboutMenu as $item)
                <li>
                  <a href="{{ $item['url'] }}" class="store-about-link {{ $item['active'] ? 'is-active' : '' }}" @if($item['active']) aria-current="page" @endif @if($item['new_tab']) target="_blank" rel="noopener" @endif>
                    <span class="store-about-icon" aria-hidden="true"><i data-lucide="{{ $item['icon'] }}"></i></span>
                    <span class="store-about-text">
                      <span class="store-about-title">{{ $item['title'] }}</span>
                      @if($item['description'])<span class="store-about-desc">{{ $item['description'] }}</span>@endif
                    </span>
                    <i data-lucide="arrow-up-right" class="store-about-go" aria-hidden="true"></i>
                  </a>
                </li>
              @endforeach
            </ul>
            <a href="/pages/request-for-quotation" class="store-about-cta">
              <span><strong>Planning a custom ring?</strong> Free mockup and a firm quote in 48 hours.</span>
              <i data-lucide="arrow-right"></i>
            </a>
          </div>
        </div>
      @endif
    </nav>

    <form class="store-nav-search" action="{{ route('search.results') }}" method="get" role="search" data-live-search>
      <i data-lucide="search" class="store-nav-search-icon"></i>
      <input
        type="search"
        name="q"
        value="{{ request()->routeIs('search.results') ? request('q') : '' }}"
        placeholder="Search products, categories, SKUs…"
        autocomplete="off"
        spellcheck="false"
        maxlength="100"
        role="combobox"
        aria-label="Search products"
        aria-autocomplete="list"
        aria-expanded="false"
        aria-controls="live-search-results"
        data-live-search-input
      >
      <button type="button" class="store-nav-search-clear" data-live-search-clear aria-label="Clear search" hidden>
        <i data-lucide="x" class="h-4 w-4"></i>
      </button>
      <kbd class="store-nav-search-kbd" aria-hidden="true">/</kbd>
      <button type="submit" class="store-nav-search-submit" aria-label="Search">
        <i data-lucide="arrow-right" class="h-4 w-4"></i>
      </button>
      <div id="live-search-results" class="store-live" data-live-search-panel hidden></div>
    </form>

    <div class="store-nav-tools">
      {{-- Locale / currency --}}
      <div class="store-locale" data-locale-root>
        <button
          type="button"
          class="store-locale-trigger"
          data-locale-open
          aria-haspopup="dialog"
          aria-expanded="false"
          aria-controls="locale-panel"
        >
          <span data-locale-label>{{ $locale['name'] }} | {{ $currency }} {{ $locale['symbol'] }}</span>
          <i data-lucide="chevron-down" class="store-nav-chevron"></i>
        </button>
        <div id="locale-panel" class="store-locale-panel" data-locale-panel hidden role="dialog" aria-label="Country and currency">
          <div class="store-locale-head">
            <p class="store-locale-title">Country / region</p>
            <p class="store-locale-rate" data-locale-rate>{{ $locale['rate_hint'] }}</p>
          </div>
          <label class="store-locale-search">
            <i data-lucide="search" class="store-locale-search-icon"></i>
            <input type="search" placeholder="Search countries" data-locale-filter autocomplete="off" aria-label="Search countries">
          </label>
          <div class="store-locale-popular" data-locale-popular>
            @foreach(collect($locales)->where('popular', true) as $item)
              <button
                type="button"
                class="store-locale-chip {{ $item['code'] === $country ? 'is-active' : '' }}"
                data-locale-pick
                data-country="{{ $item['code'] }}"
                data-currency="{{ $item['currency'] }}"
                data-symbol="{{ $item['symbol'] }}"
                data-name="{{ $item['name'] }}"
                data-rate="{{ $item['rate_hint'] }}"
              >
                {{ $item['code'] }} · {{ $item['currency'] }}
              </button>
            @endforeach
          </div>
          <ul class="store-locale-list" data-locale-list>
            @foreach($locales as $item)
              <li data-locale-item data-search="{{ strtolower($item['name'].' '.$item['currency'].' '.$item['code']) }}">
                <button
                  type="button"
                  class="store-locale-option {{ $item['code'] === $country ? 'is-active' : '' }}"
                  data-locale-pick
                  data-country="{{ $item['code'] }}"
                  data-currency="{{ $item['currency'] }}"
                  data-symbol="{{ $item['symbol'] }}"
                  data-name="{{ $item['name'] }}"
                  data-rate="{{ $item['rate_hint'] }}"
                >
                  <span class="store-locale-check" aria-hidden="true">
                    <i data-lucide="check" class="h-3.5 w-3.5"></i>
                  </span>
                  <span class="store-locale-meta">
                    <span class="store-locale-name">{{ $item['name'] }}</span>
                    <span class="store-locale-fx">{{ $item['rate_hint'] }}</span>
                  </span>
                  <span class="store-locale-money">{{ $item['currency'] }} {{ $item['symbol'] }}</span>
                </button>
              </li>
            @endforeach
          </ul>
          <form method="post" action="{{ route('country.store') }}" class="hidden" data-locale-form>@csrf
            <input type="hidden" name="country" value="{{ $country }}" data-locale-country-input>
          </form>
        </div>
      </div>

      @if($signedInCustomer)
        @if($isTradePartner)
          <a href="{{ route('wholesale.dashboard') }}" class="store-nav-account is-trade hidden md:inline-flex">
            <i data-lucide="briefcase-business" class="h-4 w-4"></i><span>Trade desk</span>
          </a>
        @endif
        <a href="{{ route('account.dashboard') }}" class="store-nav-account" aria-label="My account">
          <i data-lucide="circle-user-round" class="h-4 w-4"></i><span class="hidden sm:inline">Account</span>
        </a>
      @else
        <a href="{{ route('account.login') }}" class="store-nav-account" aria-label="Sign in">
          <i data-lucide="user" class="h-4 w-4"></i><span class="hidden sm:inline">Sign in</span>
        </a>
      @endif

      <a
        href="{{ route('cart.show') }}"
        class="store-nav-icon relative"
        aria-label="{{ $cartQty > 0 ? 'Cart '.$cartQty.' '.($cartQty === 1 ? 'item' : 'items') : 'Cart' }}"
        aria-haspopup="dialog"
        aria-controls="cart-drawer"
        data-cart-trigger
      >
        <i data-lucide="shopping-bag" class="h-5 w-5"></i>
        @if($cartQty > 0)
          <span id="cart-badge" class="cart-badge-pulse absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--color-gold)] px-1 text-[10px] font-bold text-black">{{ $cartQty > 99 ? '99+' : $cartQty }}</span>
        @endif
      </a>
    </div>
  </div>

  <div id="mobile-nav" class="store-mobile-nav" hidden data-mobile-nav>
    <p class="store-mobile-label">Product Categories</p>
    @foreach($categoryMenu as $root)
      <details class="store-mobile-cat">
        <summary>
          <span>{{ $root['title'] }}</span>
          <span class="store-mobile-cat-count">{{ $root['count'] }}</span>
          <i data-lucide="chevron-down" class="h-4 w-4"></i>
        </summary>
        <a class="store-mobile-link store-mobile-link-child" href="{{ $root['url'] }}">All {{ $root['title'] }}</a>
        @foreach($root['children'] as $child)
          <a class="store-mobile-link store-mobile-link-child" href="{{ $child['url'] }}">{{ $child['title'] }}</a>
        @endforeach
      </details>
    @endforeach
    <a class="store-mobile-link" href="/collections/all">Shop all products</a>
    @if($aboutMenu === [])
      <a class="store-mobile-link" href="/pages/about-us">About Us</a>
    @else
      <details class="store-mobile-cat" @if(collect($aboutMenu)->contains('active', true)) open @endif>
        <summary>
          <span>About Us</span>
          <i data-lucide="chevron-down" class="h-4 w-4"></i>
        </summary>
        @foreach($aboutMenu as $item)
          <a class="store-mobile-link store-mobile-link-child {{ $item['active'] ? 'is-active' : '' }}" href="{{ $item['url'] }}" @if($item['active']) aria-current="page" @endif @if($item['new_tab']) target="_blank" rel="noopener" @endif>{{ $item['title'] }}</a>
        @endforeach
      </details>
    @endif
    @if($signedInCustomer)
      @if($isTradePartner)
        <a class="store-mobile-link" href="{{ route('wholesale.dashboard') }}">Trade desk</a>
      @endif
      <a class="store-mobile-link" href="{{ route('account.dashboard') }}">My account</a>
    @else
      <a class="store-mobile-link" href="{{ route('account.login') }}">Sign in / Create account</a>
      <a class="store-mobile-link" href="{{ route('account.login') }}">Trade partner sign in</a>
    @endif
    <a class="store-mobile-link" href="{{ route('wishlist.index') }}">Wishlist</a>
  </div>
</header>