"use client"

import Link from "next/link"
import { useSyncExternalStore } from "react"
import { ShoppingBag } from "lucide-react"
import { cartStore } from "@/lib/cart"
import { LogoGlitch } from "@/components/logo-glitch"

export function Navbar() {
  const items = useSyncExternalStore(
    cartStore.subscribe,
    cartStore.getSnapshot,
    cartStore.getServerSnapshot
  )
  const cartCount = items.reduce((sum, i) => sum + i.quantity, 0)

  return (
    <header className="sticky top-0 z-50 border-b border-white/15 bg-white/10 backdrop-blur-xl">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="relative flex h-16 items-center justify-between">
          {/* Gauche : Drops */}
          <Link
            href="/drops"
            className="font-mono text-xs uppercase tracking-widest text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors px-3 py-1.5"
          >
            Drops
          </Link>

          {/* Centre : logo VALABEL */}
          <Link
            href="/"
            aria-label="VALABEL"
            className="absolute left-1/2 -translate-x-1/2 hover:opacity-80 transition-opacity text-[var(--text)]"
          >
            <LogoGlitch className="h-9 w-auto" />
          </Link>

          {/* Droite : Shop + panier (seulement si non vide) */}
          <div className="flex items-center gap-3">
            <Link
              href="/shop"
              className="font-mono text-xs uppercase tracking-widest text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors px-3 py-1.5"
            >
              Shop
            </Link>

            {cartCount > 0 && (
              <Link
                href="/cart"
                aria-label={`Panier (${cartCount} articles)`}
                className="relative text-[var(--text)] hover:text-[var(--accent)] transition-colors"
              >
                <ShoppingBag size={18} />
                <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--accent)] text-[10px] font-bold text-white font-mono">
                  {cartCount}
                </span>
              </Link>
            )}
          </div>
        </div>
      </div>
    </header>
  )
}