"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
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();
  const [open, setOpen] = useState(false);

  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 }}
          className="text-[var(--ink)] hover:text-[var(--accent)] transition-colors"
          onClick={() => setOpen(false)}
        >
          Kennzeichensammler
        </Link>

        {/* Desktop nav */}
        <nav className="hidden sm: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>

        {/* Mobile hamburger */}
        <button
          className="sm:hidden flex flex-col gap-1.5 p-2 -mr-2"
          onClick={() => setOpen((o) => !o)}
          aria-label="Menü"
        >
          <span className={clsx("block w-5 h-0.5 bg-[var(--ink)] transition-all origin-center", open && "rotate-45 translate-y-2")} />
          <span className={clsx("block w-5 h-0.5 bg-[var(--ink)] transition-all", open && "opacity-0")} />
          <span className={clsx("block w-5 h-0.5 bg-[var(--ink)] transition-all origin-center", open && "-rotate-45 -translate-y-2")} />
        </button>
      </div>

      {/* Mobile menu */}
      {open && (
        <div className="sm:hidden border-t border-[var(--warm)] bg-[var(--paper)] px-4 py-3 flex flex-col gap-1">
          {links.map((l) => (
            <Link
              key={l.href}
              href={l.href}
              onClick={() => setOpen(false)}
              className={clsx(
                "px-3 py-2.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>
          ))}
        </div>
      )}
    </header>
  );
}