"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { BrandWordmark } from "@/components/BrandWordmark";
import { platformStatus } from "@/lib/status";

const nav = [
  { href: "/forside", label: "Forside" },
  { href: "/om-nexus", label: "Om Nexus" },
  { href: "/ideen-bag", label: "Ideen bag" },
  { href: "/support", label: "Support" },
  { href: "/kontakt", label: "Kontakt" },
  { href: "/downloads", label: "Downloads" },
];

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

  return (
    <header className="sticky top-0 z-50 border-b border-nexus-border bg-white/70 backdrop-blur-xl">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
        <BrandWordmark size="sm" asLink />

        <nav className="hidden items-center gap-1 md:flex" aria-label="Hovednavigation">
          {nav.map((item) => {
            const active = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`rounded-xl px-3 py-2 text-sm transition-colors ${
                  active
                    ? "bg-[#A855F7]/10 font-medium text-[#9333EA]"
                    : "text-nexus-muted hover:text-nexus-navy"
                }`}
                aria-current={active ? "page" : undefined}
              >
                {item.label}
              </Link>
            );
          })}
        </nav>

        <div className="flex items-center gap-2">
          <Link
            href="/downloads"
            className="btn-brand hidden rounded-xl px-4 py-2 text-sm shadow-sm sm:inline-flex"
          >
            Download Build {platformStatus.latestBuild}
          </Link>

          <button
            type="button"
            className="inline-flex rounded-xl border border-nexus-border p-2 md:hidden"
            aria-expanded={open}
            aria-controls="mobile-menu"
            aria-label={open ? "Luk menu" : "Åbn menu"}
            onClick={() => setOpen(!open)}
          >
            <span className="sr-only">Menu</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden>
              {open ? (
                <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" />
              ) : (
                <path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="2" />
              )}
            </svg>
          </button>
        </div>
      </div>

      {open && (
        <nav
          id="mobile-menu"
          className="border-t border-nexus-border bg-white/95 px-4 py-3 md:hidden"
          aria-label="Mobilnavigation"
        >
          <ul className="space-y-1">
            {nav.map((item) => (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className="block rounded-xl px-3 py-2 text-sm text-nexus-navy hover:bg-slate-50"
                  onClick={() => setOpen(false)}
                >
                  {item.label}
                </Link>
              </li>
            ))}
            <li>
              <Link
                href="/downloads"
                className="btn-brand mt-2 block rounded-xl px-3 py-2 text-center text-sm"
                onClick={() => setOpen(false)}
              >
                Download Build {platformStatus.latestBuild}
              </Link>
            </li>
          </ul>
        </nav>
      )}
    </header>
  );
}
