{{-- Top Bar --}}
<div class="ct_top_bar">
  <div class="container-fluid">
    <div class="ct_top_bar_inner">
      <div class="ct_top_bar_left">
        <a href="{{ route('sell-your-items') }}">Sell your Items</a>
        <a href="{{ route('video-bid') }}">How to Bid</a>
      </div>

      <div class="ct_top_bar_right">
        <div class="ct_social_icons">
          <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
          <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
          <a href="#" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a>
          <a href="#" aria-label="Pinterest"><i class="fab fa-pinterest-p"></i></a>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- Header --}}
<header class="site-header">
  <div class="container">
    <div class="header-inner">
      <a href="{{ route('home') }}" class="logo">
        <img src="{{ asset('assets/img/logo.png') }}" alt="Auctions Ontario" />
      </a>

      <nav class="main-nav">
        <ul>
          <li><a href="{{ route('auctions.index') }}">Auctions</a></li>
          <li><a href="{{ route('buy-sell') }}">Buy & Sell</a></li>
          <li><a href="{{ route('auctioneers.index') }}">Auctioneers</a></li>
          <li>
            <a href="{{ route('liquidators.index') }}">Dealers/Resellers/Liquidators</a>
          </li>
          <li><a href="{{ route('events.index') }}">Events</a></li>
          <li>
            <a href="{{ route('woodbridge-advertiser') }}">Woodbridge Advertiser</a>
          </li>
          <li><a href="{{ route('advertise') }}">Advertise</a></li>
        </ul>
      </nav>

      <div class="header-actions">
        <svg
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"
            fill="black"
          />
        </svg>

        @auth
          <a href="{{ route('my-account') }}" class="account-link">
            <i class="fa-regular fa-user"></i>
            My Account
          </a>
        @else
          <a href="{{ route('login') }}" class="account-link">
            <i class="fa-regular fa-user"></i>
            My Account
          </a>
        @endauth

        <button type="button" class="menu-toggle" aria-label="Open menu">
          <i class="fa-solid fa-bars"></i>
        </button>
      </div>
    </div>
  </div>
</header>

<div class="mobile-menu-overlay"></div>

<div class="mobile-menu">
  <button type="button" class="close-menu" aria-label="Close menu">
    <i class="fa-solid fa-xmark"></i>
  </button>

  <ul>
    <li><a href="{{ route('auctions.index') }}">Auctions</a></li>
    <li><a href="{{ route('buy-sell') }}">Buy & Sell</a></li>
    <li><a href="{{ route('auctioneers.index') }}">Auctioneers</a></li>
    <li>
      <a href="{{ route('liquidators.index') }}">Dealers/Resellers/Liquidators</a>
    </li>
    <li><a href="{{ route('events.index') }}">Events</a></li>
    <li>
      <a href="{{ route('woodbridge-advertiser') }}">Woodbridge Advertiser</a>
    </li>
    <li><a href="{{ route('advertise') }}">Advertise</a></li>
  </ul>
</div>