Navbar Overlay

"use client";

import { useEffect, useId, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface NavbarOverlayLink {
  label: string;
  href: string;
  /** Small mono note next to the big link, e.g. "New". */
  note?: string;
}

export interface NavbarOverlayProps {
  brand?: string;
  brandHref?: string;
  links?: NavbarOverlayLink[];
  cta?: { label: string; href: string };
  contact?: { label: string; href: string };
  className?: string;
}

export function NavbarOverlay({
  brand = "Shipyard",
  brandHref = "/",
  links = [
    { label: "Product", href: "#product" },
    { label: "Changelog", href: "#changelog", note: "v4.2" },
    { label: "Customers", href: "#customers" },
    { label: "Pricing", href: "#pricing" },
    { label: "Docs", href: "#docs" },
  ],
  cta = { label: "Start free", href: "#signup" },
  contact = { label: "hello@shipyard.dev", href: "mailto:hello@shipyard.dev" },
  className,
}: NavbarOverlayProps) {
  const [open, setOpen] = useState(false);
  const panelId = useId();
  const toggleRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setOpen(false);
        toggleRef.current?.focus();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <header className={cn("relative z-40 text-da-fg", className)}>
      <div className="da-container flex h-20 items-center justify-between">
        <a href={brandHref} className="da-focus font-da-display text-2xl tracking-da-display uppercase">
          {brand}
          <span aria-hidden className="text-da-secondary">.</span>
        </a>
        <div className="flex items-center gap-3">
          <a
            href={cta.href}
            className="da-focus da-transition da-stroke hidden bg-da-primary px-4 py-2 text-sm font-bold text-da-primary-fg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none sm:block"
          >
            {cta.label}
          </a>
          <button
            ref={toggleRef}
            type="button"
            aria-expanded={open}
            aria-controls={panelId}
            onClick={() => setOpen((o) => !o)}
            className="da-focus da-stroke relative z-50 flex h-11 items-center gap-3 bg-da-fg px-4 font-da-mono text-xs font-bold tracking-da-label text-da-bg uppercase shadow-da-sm"
          >
            {open ? "Close" : "Menu"}
            <span aria-hidden className="flex w-5 flex-col gap-1">
              <span className={cn("h-[3px] bg-current transition-transform duration-(--da-duration)", open && "translate-y-[7px] rotate-45")} />
              <span className={cn("h-[3px] bg-current transition-opacity duration-(--da-duration)", open && "opacity-0")} />
              <span className={cn("h-[3px] bg-current transition-transform duration-(--da-duration)", open && "-translate-y-[7px] -rotate-45")} />
            </span>
          </button>
        </div>
      </div>

      <div
        id={panelId}
        hidden={!open}
        className="fixed inset-0 z-40 overflow-y-auto bg-da-primary text-da-primary-fg transition-[clip-path] duration-(--da-duration-slow) ease-da-emphasized starting:[clip-path:inset(0_0_100%_0)] [clip-path:inset(0)] motion-reduce:transition-none"
      >
        <div className="da-container flex min-h-full flex-col pt-28 pb-10">
          <nav aria-label="Main">
            <ol className="da-stroke-t">
              {links.map((l, i) => (
                <li key={l.href} className="da-stroke-b">
                  <a
                    href={l.href}
                    onClick={() => setOpen(false)}
                    className="da-focus group flex items-baseline gap-4 py-3 font-da-display text-[clamp(2.5rem,9vw,6rem)] leading-none tracking-da-display uppercase"
                  >
                    <span className="font-da-mono text-sm font-bold">{String(i + 1).padStart(2, "0")}</span>
                    <span className="da-transition group-hover:translate-x-4">{l.label}</span>
                    {l.note && (
                      <span className="da-stroke ml-auto self-center bg-da-fg px-2 py-1 font-da-mono text-xs font-bold text-da-bg">{l.note}</span>
                    )}
                  </a>
                </li>
              ))}
            </ol>
          </nav>
          <div className="mt-auto flex flex-wrap items-center justify-between gap-4 pt-10 font-da-mono text-sm font-bold">
            <a href={contact.href} className="da-focus underline decoration-[3px] underline-offset-4">
              {contact.label}
            </a>
            <a href={cta.href} className="da-focus da-stroke bg-da-fg px-5 py-3 text-da-bg shadow-da-sm">
              {cta.label} →
            </a>
          </div>
        </div>
      </div>
    </header>
  );
}

export default NavbarOverlay;