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

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

const cartCount = ref(2)
</script>

<template>
  <header class="sticky top-0 z-50 w-full border-b bg-background">
    <!-- Top row: actions + logo + actions -->
    <div class="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
      <!-- Left: Search -->
      <div class="flex items-center gap-1">
        <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>
        <!-- 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>

      <!-- Center: Logo -->
      <a href="#" class="text-2xl font-bold tracking-tight">
        STORE
      </a>

      <!-- Right: Account + Cart -->
      <div class="flex items-center gap-1">
        <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>
        <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 }}
          </Badge>
        </Button>
      </div>
    </div>

    <!-- Bottom row: Navigation links (desktop) -->
    <nav class="hidden border-t md:block">
      <div class="container mx-auto flex items-center justify-center gap-8 px-4 py-2 md:px-6">
        <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-muted-foreground'"
        >
          {{ item.label }}
        </a>
      </div>
    </nav>
  </header>
</template>