<script setup lang="ts">
import { ref } from 'vue'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'

const navItems = [
  { label: 'Women', href: '#' },
  { label: 'Men', href: '#' },
  { label: 'Kids', href: '#' },
  { label: 'Sale', href: '#', highlight: true },
]

const cartCount = ref(3)
</script>

<template>
  <header class="sticky top-0 z-50 w-full">
    <!-- Utility Bar -->
    <div class="bg-foreground text-background">
      <div class="container mx-auto flex h-8 items-center justify-center px-4 text-xs tracking-wide md:px-6">
        Free shipping on orders over 50 € — Shop now
      </div>
    </div>

    <!-- Main Header -->
    <div class="border-b bg-background">
      <div class="container mx-auto flex h-14 items-center justify-between px-4 md:px-6">
        <!-- Logo -->
        <a href="#" class="text-xl font-bold tracking-tight">
          STORE
        </a>

        <!-- Desktop Navigation -->
        <nav class="hidden items-center gap-6 md:flex">
          <a
            v-for="item in navItems"
            :key="item.label"
            :href="item.href"
            class="text-sm font-medium transition-colors hover:text-foreground/80"
            :class="item.highlight ? 'text-destructive' : 'text-foreground'"
          >
            {{ item.label }}
          </a>
        </nav>

        <!-- Actions -->
        <div class="flex items-center gap-1">
          <!-- Search -->
          <Button variant="ghost" icon aria-label="Search">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
          </Button>

          <!-- Account -->
          <Button variant="ghost" icon aria-label="Account" class="hidden sm:flex">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
          </Button>

          <!-- Cart -->
          <Button variant="ghost" icon aria-label="Cart" class="relative">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1" /><circle cx="19" cy="21" r="1" /><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" /></svg>
            <Badge
              v-if="cartCount > 0"
              variant="default"
              size="sm"
              class="absolute -right-1 -top-1 flex size-5 items-center justify-center rounded-full p-0 text-[10px]"
            >
              {{ cartCount > 9 ? '9+' : cartCount }}
            </Badge>
          </Button>

          <!-- Mobile Menu -->
          <Button variant="ghost" icon aria-label="Menu" class="md:hidden">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="18" y2="18" /></svg>
          </Button>
        </div>
      </div>
    </div>
  </header>
</template>