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;
  links?: NavbarPillLink[];
  signIn?: NavbarPillLink;
  cta?: NavbarPillLink;
  className?: string;
}

function BrandMark() {
  return (
    <span aria-hidden className="relative grid size-7 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent">
      <span className="size-2.5 rounded-full bg-da-bg" />
    </span>
  );
}

/** Sticky dark bar: glowing brand mark, centered links in a hairline pill, sign-in + primary CTA; full-screen sheet on mobile. */
export function NavbarPill({
  brand = "Nova",
  links = [
    { label: "Product", href: "#product" },
    { label: "Agents", href: "#agents" },
    { label: "Pricing", href: "#pricing" },
    { label: "Changelog", href: "#changelog" },
  ],
  signIn = { label: "Sign in", href: "#signin" },
  cta = { label: "Try Nova free", href: "#start" },
  className,
}: NavbarPillProps) {
  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("sticky top-0 z-40 border-b border-da-border bg-da-bg/80 backdrop-blur-da", className)}>
      <nav aria-label="Main" className="da-container flex h-16 items-center gap-4">
        <a href="#" className="da-focus flex items-center gap-2.5 rounded-da-sm font-da-display text-[17px] font-semibold tracking-da-display">
          <BrandMark />
          {brand}
        </a>

        <ul className="da-stroke mx-auto hidden items-center gap-1 rounded-da-pill bg-da-surface/60 p-1 md:flex">
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} className="da-focus da-transition block rounded-da-pill px-4 py-1.5 text-sm text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg">
                {l.label}
              </a>
            </li>
          ))}
        </ul>

        <div className="ml-auto flex items-center gap-2 md:ml-0">
          <a href={signIn.href} className="da-focus da-transition hidden rounded-da-pill px-4 py-2 text-sm font-medium text-da-muted-fg hover:text-da-fg sm:block">
            {signIn.label}
          </a>
          <a
            href={cta.href}
            className="da-focus da-transition hidden h-9 items-center rounded-da-pill bg-da-primary px-4 text-sm font-semibold text-da-primary-fg shadow-[0_0_24px_-6px_var(--da-primary)] hover:brightness-110 sm:inline-flex"
          >
            {cta.label}
          </a>
          <button
            type="button"
            aria-expanded={open}
            aria-controls={menuId}
            aria-label={open ? "Close menu" : "Open menu"}
            onClick={() => setOpen(!open)}
            className="da-focus da-transition grid size-9 place-items-center rounded-da-pill text-da-fg hover:bg-da-surface md:hidden"
          >
            {open ? <X className="size-5" /> : <Menu className="size-5" />}
          </button>
        </div>
      </nav>

      <div id={menuId} hidden={!open} className="border-t border-da-border bg-da-bg md:hidden">
        <ul className="da-container flex flex-col gap-1 py-4">
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} onClick={() => setOpen(false)} className="da-focus block rounded-da-md px-3 py-3 text-base text-da-fg hover:bg-da-surface">
                {l.label}
              </a>
            </li>
          ))}
          <li className="mt-3 flex flex-col gap-2">
            <a href={signIn.href} className="da-focus da-stroke rounded-da-pill px-4 py-3 text-center text-sm font-medium">
              {signIn.label}
            </a>
            <a href={cta.href} className="da-focus rounded-da-pill bg-da-primary px-4 py-3 text-center text-sm font-semibold text-da-primary-fg">
              {cta.label}
            </a>
          </li>
        </ul>
      </div>
    </header>
  );
}

export default NavbarPill;