"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

const NAV_LINKS = [
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
  { label: "Projects", href: "/projects" },
  { label: "Contact", href: "/contact" },
];

export function Nav() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 w-full bg-background/80 backdrop-blur-xl">
      <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
        <Link
          href="/"
          className="font-headline text-xl font-bold uppercase tracking-tighter text-primary"
        >
          JASON WOLTJE
        </Link>

        {/* Desktop links */}
        <div className="hidden items-center gap-8 md:flex">
          {NAV_LINKS.filter((l) => l.label !== "Contact").map((link) => {
            const active = pathname === link.href;
            return (
              <Link
                key={link.href}
                href={link.href}
                className={`font-label text-[13px] uppercase tracking-tighter transition-colors hover:text-primary ${
                  active
                    ? "border-b border-primary pb-0.5 text-primary"
                    : "text-on-surface-variant"
                }`}
              >
                {link.label}
              </Link>
            );
          })}
          <Link
            href="/contact"
            className="neon-cta rounded-md px-4 py-2 font-label text-[12px] uppercase tracking-[0.15em] transition-opacity hover:opacity-90 active:scale-95"
          >
            Contact
          </Link>
        </div>

        {/* Mobile hamburger */}
        <button
          className="flex flex-col items-center justify-center gap-1.5 p-2 md:hidden"
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen((v) => !v)}
        >
          <span
            className={`block h-px w-6 bg-on-surface transition-transform duration-200 ${open ? "translate-y-[4px] rotate-45" : ""}`}
          />
          <span
            className={`block h-px w-6 bg-on-surface transition-opacity duration-200 ${open ? "opacity-0" : ""}`}
          />
          <span
            className={`block h-px w-6 bg-on-surface transition-transform duration-200 ${open ? "-translate-y-[10px] -rotate-45" : ""}`}
          />
        </button>
      </nav>

      {/* Mobile sheet */}
      {open && (
        <div className="glass border-t border-outline-variant/10 md:hidden">
          <div className="mx-auto flex max-w-7xl flex-col gap-0 px-6 py-4">
            {NAV_LINKS.map((link) => {
              const active = pathname === link.href;
              return (
                <Link
                  key={link.href}
                  href={link.href}
                  onClick={() => setOpen(false)}
                  className={`border-b border-outline-variant/10 py-3 font-label text-[13px] uppercase tracking-widest transition-colors hover:text-primary ${
                    active ? "text-primary" : "text-on-surface-variant"
                  }`}
                >
                  {link.label}
                </Link>
              );
            })}
          </div>
        </div>
      )}
    </header>
  );
}
