@php
    $phone = trim((string) $company->phone_number);
    $mail = trim((string) $company->company_email);
    $topText = trim((string) $company->topbar_offer_text);
    $mega = collect($navCategories)->whereNull('parent_id')->values();
    if ($mega->isEmpty()) { $mega = collect($navCategories)->values(); }
    $megaCols = $mega->chunk(max(1, (int) ceil($mega->count() / 2)))->take(2);
@endphp
@if ($topText !== '' || $phone !== '' || $mail !== '')
<div class="topbar">
  <div class="container topbar-in">
    <span class="tb-l">
      @if ($topText !== ''){{ $topText }}@elseif ($phone !== '')Order online, call us <a href="tel:{{ preg_replace('/[^\d+]/', '', $phone) }}">{{ $phone }}</a>@endif
    </span>
    <span class="tb-r">
      @if ($company->full_address)<a href="{{ route('contact') }}"><svg viewBox="0 0 24 24"><path d="M12 21s7-6.2 7-11.5A7 7 0 005 9.5C5 14.800 12 21 12 21z"/><circle cx="12" cy="9.500" r="2.500"/></svg> Find a store</a>@endif
      @if ($mail !== '')<a href="mailto:{{ $mail }}"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg> {{ $mail }}</a>@endif
    </span>
  </div>
</div>
@endif

<header class="header">
  <div class="container header-in">
    <button class="icon-btn burger" id="burger" aria-label="Menu" aria-expanded="false"><span></span><span></span><span></span></button>

    <nav class="nav" id="nav" aria-label="Main">
      <button type="button" class="nav-close" id="navClose" aria-label="Close menu"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
      <a href="{{ route('home') }}">Home</a>
      <div class="has-sub has-mega">
        <a href="{{ route('collection') }}">Shop <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></a>
        <div class="sub mega">
          <div class="mega-cols">
            @foreach ($megaCols as $ci => $col)
              <div class="mega-col">
                <h5>{{ $ci === 0 ? 'Shop by category' : 'More to explore' }}</h5>
                @if ($ci === 0)<a href="{{ route('collection') }}">All products</a>@endif
                @foreach ($col as $cat)
                  <a href="{{ collection_filter_url(['cat' => [$cat['slug']]]) }}" data-filter="{{ json_encode(['cat' => [$cat['slug']]]) }}">{{ $cat['name'] }}</a>
                @endforeach
                @if ($loop->last)<a href="{{ route('collections') }}">All collections</a>@endif
              </div>
            @endforeach
            <div class="mega-col mega-promo">
              <a href="{{ collection_filter_url(['sort' => 'new']) }}">
                <small>Just landed</small>
                <b>New arrivals</b>
                <span>Shop now</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <a href="{{ route('collections') }}">Collections</a>
      <a href="{{ route('blog') }}">Blog</a>
      <div class="has-sub">
        <a href="{{ route('about') }}">Pages <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></a>
        <div class="sub">
          <a href="{{ route('about') }}">About us</a>
          <a href="{{ route('faq') }}">FAQs</a>
          <a href="{{ route('size-guide') }}">Size guide</a>
          <a href="{{ route('privacy') }}">Privacy policy</a>
          <a href="{{ route('terms') }}">Terms of service</a>
        </div>
      </div>
      <a href="{{ route('contact') }}">Contact</a>
    </nav>

    <a href="{{ route('home') }}" class="logo">
      @if ($company->logo_url)
        <img src="{{ $company->logo_url }}" alt="{{ $company->name }}" onerror="this.replaceWith(document.createTextNode(this.alt))">
      @else
        {{ $company->name }}
      @endif
    </a>

    <div class="header-right">
      <form class="hsearch" id="hsearch" action="{{ route('search') }}" method="get" role="search" autocomplete="off">
        <input type="search" name="q" id="hq" placeholder="Search our store" aria-label="Search our store" minlength="2" maxlength="80">
        <button type="submit" aria-label="Search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg></button>
        <div class="hs-drop" id="hsDrop" hidden></div>
      </form>
      <div class="header-actions">
        <a class="icon-btn hs-open" id="hsOpen" href="{{ route('search') }}" aria-label="Open search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg></a>
        <a class="icon-btn" id="accountLink" href="{{ auth()->check() ? route('account') : route('login') }}" aria-label="Account" title="{{ auth()->check() ? auth()->user()->name : 'Log in' }}"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.400 3.600-7 8-7s8 2.600 8 7"/></svg></a>
        <a class="icon-btn cart" href="{{ route('wishlist') }}" aria-label="Wishlist"><svg viewBox="0 0 24 24"><path d="M12 20.500l-7.600-7.600a5 5 0 017.100-7.100l.5.5.5-.5a5 5 0 017.100 7.100z"/></svg><b id="wishCount">0</b></a>
        <a class="icon-btn cart" href="{{ route('cart') }}" aria-label="Cart"><svg viewBox="0 0 24 24"><path d="M5 8h14l-1 12H6z"/><path d="M9 8V6a3 3 0 016 0v2"/></svg><b id="cartCount">0</b></a>
      </div>
    </div>
  </div>
</header>
<div class="nav-shade" id="navShade" hidden></div>