Navbar Bold

"use client";

import { useEffect, useId, useState } from "react";
import { Menu, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NavbarBoldLink {
  label: string;
  href: string;
}

export interface NavbarBoldProps {
  brand?: string;
  brandHref?: string;
  links?: NavbarBoldLink[];
  secondaryCta?: NavbarBoldLink;
  primaryCta?: NavbarBoldLink;
  /** Sticks the bar to the top of the viewport. */
  sticky?: boolean;
  className?: string;
}

const DEFAULT_LINKS: NavbarBoldLink[] = [
  { label: "Product", href: "#product" },
  { label: "Changelog", href: "#changelog" },
  { label: "Pricing", href: "#pricing" },
  { label: "Docs", href: "#docs" },
];

export function NavbarBold({
  brand = "Shipyard",
  brandHref = "/",
  links = DEFAULT_LINKS,
  secondaryCta = { label: "Log in", href: "#login" },
  primaryCta = { label: "Start shipping", href: "#signup" },
  sticky = true,
  className,
}: NavbarBoldProps) {
  const [open, setOpen] = useState(false);
  const menuId = useId();

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

  return (
    <header className={cn("da-stroke-b z-40 bg-da-bg text-da-fg", sticky && "sticky top-0", className)}>
      <nav aria-label="Main" className="da-container flex h-16 items-center gap-6">
        <a href={brandHref} className="da-focus flex items-center gap-2 font-da-display text-xl tracking-da-display uppercase">
          <span aria-hidden className="da-stroke grid size-8 place-items-center bg-da-primary text-base text-da-primary-fg">
            S
          </span>
          {brand}
        </a>

        <ul className="hidden items-center gap-1 md:flex">
          {links.map((l) => (
            <li key={l.href}>
              <a
                href={l.href}
                className="da-focus da-transition px-3 py-2 font-da-mono text-xs font-bold tracking-da-label uppercase hover:bg-da-fg hover:text-da-bg"
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>

        <div className="ml-auto hidden items-center gap-3 md:flex">
          <a href={secondaryCta.href} className="da-focus px-2 py-2 text-sm font-bold underline decoration-[3px] underline-offset-4 hover:decoration-da-secondary">
            {secondaryCta.label}
          </a>
          <a
            href={primaryCta.href}
            className="da-focus da-transition da-stroke 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"
          >
            {primaryCta.label}
          </a>
        </div>

        <button
          type="button"
          aria-expanded={open}
          aria-controls={menuId}
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen((o) => !o)}
          className="da-focus da-stroke ml-auto grid size-10 place-items-center bg-da-surface text-da-surface-fg shadow-da-sm md:hidden"
        >
          {open ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
        </button>
      </nav>

      <div id={menuId} hidden={!open} className="da-stroke-t bg-da-bg md:hidden">
        <ul className="da-container flex flex-col py-2">
          {links.map((l) => (
            <li key={l.href} className="da-stroke-b last:border-b-0">
              <a
                href={l.href}
                onClick={() => setOpen(false)}
                className="da-focus flex items-center justify-between py-4 font-da-display text-2xl tracking-da-display uppercase"
              >
                {l.label}
                <span aria-hidden>→</span>
              </a>
            </li>
          ))}
        </ul>
        <div className="da-container grid grid-cols-2 gap-3 pb-5">
          <a href={secondaryCta.href} className="da-focus da-stroke bg-da-surface py-3 text-center text-sm font-bold text-da-surface-fg">
            {secondaryCta.label}
          </a>
          <a href={primaryCta.href} className="da-focus da-stroke bg-da-primary py-3 text-center text-sm font-bold text-da-primary-fg shadow-da-sm">
            {primaryCta.label}
          </a>
        </div>
      </div>
    </header>
  );
}

export default NavbarBold;