<script setup lang="ts">
</script>

<template>
  <header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-gray-200 dark:border-gray-700 px-6 sm:px-10 lg:px-20 py-4 sticky top-0 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-sm z-50">
    <div class="flex items-center gap-4">
      <div class="size-6 text-[#0d111b] dark:text-white">
        <svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
          <path d="M36.7273 44C33.9891 44 31.6043 39.8386 30.3636 33.69C29.123 39.8386 26.7382 44 24 44C21.2618 44 18.877 39.8386 17.6364 33.69C16.3957 39.8386 14.0109 44 11.2727 44C7.25611 44 4 35.0457 4 24C4 12.9543 7.25611 4 11.2727 4C14.0109 4 16.3957 8.16144 17.6364 14.31C18.877 8.16144 21.2618 4 24 4C26.7382 4 29.123 8.16144 30.3636 14.31C31.6043 8.16144 33.9891 4 36.7273 4C40.7439 4 44 12.9543 44 24C44 35.0457 40.7439 44 36.7273 44Z" fill="currentColor"></path>
        </svg>
      </div>
      <h2 class="text-[#0d111b] dark:text-white text-xl font-bold tracking-[-0.015em]">LUXE</h2>
    </div>
    <nav class="hidden lg:flex items-center gap-9">
      <a class="text-sm font-medium hover:text-primary dark:hover:text-primary" href="#">New Arrivals</a>
      <a class="text-sm font-medium hover:text-primary dark:hover:text-primary" href="#">Designers</a>
      <a class="text-sm font-medium hover:text-primary dark:hover:text-primary" href="#">Clothing</a>
      <a class="text-sm font-medium hover:text-primary dark:hover:text-primary" href="#">Accessories</a>
      <a class="text-sm font-medium hover:text-primary dark:hover:text-primary" href="#">Sale</a>
    </nav>
    <div class="flex items-center gap-2">
      <button class="flex items-center justify-center rounded-full h-10 w-10 hover:bg-gray-200 dark:hover:bg-gray-700">
        <span class="material-symbols-outlined text-2xl">search</span>
      </button>
      <button class="flex items-center justify-center rounded-full h-10 w-10 hover:bg-gray-200 dark:hover:bg-gray-700">
        <span class="material-symbols-outlined text-2xl">person</span>
      </button>
      <button class="flex items-center justify-center rounded-full h-10 w-10 hover:bg-gray-200 dark:hover:bg-gray-700">
        <span class="material-symbols-outlined text-2xl">shopping_bag</span>
      </button>
    </div>
  </header>
</template>
