<template>
  <header class="sticky top-0 z-50 border-b bg-zinc-100 backdrop-blur">
    <div class="container mx-auto flex items-center justify-between px-4 py-4">
      <NuxtLink
        to="/"
        class="text-2xl font-bold text-primary"
      >
        MyStore
      </NuxtLink>

      <nav class="hidden items-center gap-6 md:flex">
        <NuxtLink
          to="/"
          class="text-sm font-medium text-gray-700 transition hover:text-primary"
        >
          Home
        </NuxtLink>

        <a
          href="#products"
          class="text-sm font-medium text-gray-700 transition hover:text-primary"
        >
          Products
        </a>

        <a
          href="#about"
          class="text-sm font-medium text-gray-700 transition hover:text-primary"
        >
          About
        </a>

        <a
          href="#contact"
          class="text-sm font-medium text-gray-700 transition hover:text-primary"
        >
          Contact
        </a>
      </nav>

      <div class="flex items-center gap-3">
        <UButton
          color="neutral"
          variant="ghost"
        >
          Login
        </UButton>

        <UButton>
          Get Started
        </UButton>
      </div>
    </div>
  </header>
</template>
