Navbar Pill

"use client";

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

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

export interface NavbarPillProps {
  brand?: string;
  brandHref?: string;
  links?: NavbarPillLink[];
  /** Href of the link to mark as current (aria-current). */
  activeHref?: string;
  cta?: NavbarPillLink;
  className?: string;
}

/** Floating centered pill navbar with a sliding hover indicator; collapses to a sheet on mobile. */
export function NavbarPill({
  brand = "Tracewise",
  brandHref = "/",
  links = [
    { label: "Product", href: "#product" },
    { label: "Integrations", href: "#integrations" },
    { label: "Pricing", href: "#pricing" },
    { label: "Changelog", href: "#changelog" },
  ],
  activeHref = "#product",
  cta = { label: "Start free", href: "#signup" },
  className,
}: NavbarPillProps) {
  const [open, setOpen] = useState(false);
  const [hover, setHover] = useState<number | null>(null);
  const menuId = useId();
  const activeIndex = Math.max(
    0,
    links.findIndex((l) => l.href === activeHref),
  );
  const indicator = hover ?? activeIndex;

  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("sticky top-3 z-40 px-4 text-da-fg", className)}>
      <nav
        aria-label="Main"
        className="da-stroke mx-auto flex h-12 max-w-3xl items-center gap-2 rounded-da-pill bg-da-surface/80 pr-1.5 pl-4 text-da-surface-fg shadow-da-md backdrop-blur-da"
      >
        <a href={brandHref} className="da-focus flex items-center gap-2 rounded-da-sm text-sm font-semibold tracking-tight">
          <span aria-hidden className="grid size-5 place-items-center rounded-full bg-da-primary">
            <span className="size-1.5 rounded-full bg-da-primary-fg" />
          </span>
          {brand}
        </a>
        <ul className="relative mx-auto hidden items-center md:flex" onMouseLeave={() => setHover(null)}>
          {links.map((l, i) => (
            <li key={l.href} className="relative">
              {indicator === i && <span aria-hidden className="absolute inset-0 rounded-da-pill bg-da-muted transition-all duration-(--da-duration) ease-da" />}
              <a
                href={l.href}
                aria-current={l.href === activeHref ? "page" : undefined}
                onMouseEnter={() => setHover(i)}
                onFocus={() => setHover(i)}
                onBlur={() => setHover(null)}
                className={cn(
                  "da-focus da-transition relative block rounded-da-pill px-3.5 py-1.5 text-[13px]",
                  indicator === i ? "text-da-fg" : "text-da-muted-fg hover:text-da-fg",
                )}
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <a
          href={cta.href}
          className="da-focus da-transition ml-auto hidden h-9 items-center rounded-da-pill bg-da-fg px-4 text-[13px] font-medium text-da-bg hover:bg-da-fg/85 md:ml-0 md:inline-flex"
        >
          {cta.label}
        </a>
        <button
          type="button"
          aria-expanded={open}
          aria-controls={menuId}
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen((o) => !o)}
          className="da-focus da-transition ml-auto grid size-9 place-items-center rounded-full text-da-muted-fg hover:bg-da-muted hover:text-da-fg md:hidden"
        >
          {open ? <X aria-hidden className="size-4" /> : <Menu aria-hidden className="size-4" />}
        </button>
      </nav>
      <div
        id={menuId}
        hidden={!open}
        className="da-stroke mx-auto mt-2 max-w-3xl rounded-da-lg bg-da-surface p-2 text-da-surface-fg shadow-da-lg transition-[opacity,translate] duration-(--da-duration) starting:-translate-y-1 starting:opacity-0 md:hidden"
      >
        <ul>
          {links.map((l) => (
            <li key={l.href}>
              <a
                href={l.href}
                aria-current={l.href === activeHref ? "page" : undefined}
                onClick={() => setOpen(false)}
                className="da-focus block rounded-da-md px-3 py-2.5 text-[15px] hover:bg-da-muted aria-[current=page]:font-medium"
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <a href={cta.href} className="da-focus mt-2 block rounded-da-md bg-da-fg py-2.5 text-center text-sm font-medium text-da-bg">
          {cta.label}
        </a>
      </div>
    </header>
  );
}

export default NavbarPill;