"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import clsx from "clsx";

const links = [
  { href: "/",                     label: "Start"        },
  { href: "/kennzeichen",          label: "Datenbank"    },
  { href: "/diplomatenkennzeichen",label: "Diplomaten"   },
  { href: "/sammlung",             label: "Sammlung"     },
  { href: "/blog",                 label: "Blog"         },
];

export default function Nav() {
  const path = usePathname();

  return (
    <header className="sticky top-0 z-50 border-b border-[var(--warm)] bg-[var(--paper)]/90 backdrop-blur-sm">
      <div className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
        <Link
          href="/"
          style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 15, letterSpacing: "0em" }}
          className="text-[var(--ink)] hover:text-[var(--accent)] transition-colors"
        >
          Kennzeichensammler
        </Link>
        <nav className="flex items-center gap-1">
          {links.map((l) => (
            <Link
              key={l.href}
              href={l.href}
              className={clsx(
                "px-3 py-1.5 rounded-md text-sm transition-colors",
                path === l.href
                  ? "bg-[var(--ink)] text-[var(--paper)]"
                  : "text-[var(--muted)] hover:text-[var(--ink)] hover:bg-[var(--warm)]"
              )}
              style={{ fontFamily: "'Syne', sans-serif", fontWeight: 500 }}
            >
              {l.label}
            </Link>
          ))}
        </nav>
      </div>
    </header>
  );
}