Navbar Bar

"use client";

import { useEffect, useId, useRef, useState } from "react";
import { CalendarCheck, ChevronDown, FileVideo, Menu, MessagesSquare, Sparkles, X, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NavbarBarProps {
  brand?: string;
  brandHref?: string;
  features?: { label: string; description: string; href: string; icon: LucideIcon }[];
  links?: { label: string; href: string }[];
  cta?: { label: string; href: string };
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

const DEFAULT_FEATURES = [
  { label: "AI Recaps", description: "Notes, decisions and action items after every call.", href: "#recaps", icon: Sparkles },
  { label: "Async video", description: "2-minute updates that replace status meetings.", href: "#video", icon: FileVideo },
  { label: "Meeting prep", description: "Agenda and context from last week’s calls.", href: "#prep", icon: CalendarCheck },
  { label: "Ask Halo", description: "Search everything your team said, in plain English.", href: "#ask", icon: MessagesSquare },
];

/** Full-width sticky frosted bar with a “Features” dropdown of glass cards, links and a gradient CTA; mobile sheet. */
export function NavbarBar({
  brand = "Halo",
  brandHref = "/",
  features = DEFAULT_FEATURES,
  links = [
    { label: "Customers", href: "#customers" },
    { label: "Pricing", href: "#pricing" },
    { label: "Blog", href: "#blog" },
  ],
  cta = { label: "Try Halo free", href: "#signup" },
  className,
}: NavbarBarProps) {
  const [menu, setMenu] = useState(false);
  const [mobile, setMobile] = useState(false);
  const panelId = useId();
  const mobileId = useId();
  const root = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!menu && !mobile) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setMenu(false);
        setMobile(false);
      }
    };
    const onDown = (e: MouseEvent) => root.current && !root.current.contains(e.target as Node) && setMenu(false);
    window.addEventListener("keydown", onKey);
    document.addEventListener("mousedown", onDown);
    return () => {
      window.removeEventListener("keydown", onKey);
      document.removeEventListener("mousedown", onDown);
    };
  }, [menu, mobile]);

  return (
    <header
      ref={root}
      className={cn("sticky top-0 z-40 border-b border-da-border bg-da-surface-2 text-da-fg backdrop-blur-da backdrop-saturate-150", 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 rounded-da-pill font-da-display text-lg font-semibold tracking-da-display">
          <span aria-hidden className="size-7 rounded-full bg-gradient-to-br from-da-primary to-da-accent shadow-da-sm" />
          {brand}
        </a>
        <ul className="hidden items-center gap-1 md:flex">
          <li>
            <button
              type="button"
              aria-expanded={menu}
              aria-controls={panelId}
              onClick={() => setMenu((m) => !m)}
              className={cn(
                "da-focus da-transition inline-flex items-center gap-1 rounded-da-pill px-3.5 py-2 text-sm font-medium",
                menu ? "bg-da-fg/5 text-da-fg" : "text-da-muted-fg hover:text-da-fg",
              )}
            >
              Features
              <ChevronDown aria-hidden className={cn("da-transition size-4", menu && "rotate-180")} />
            </button>
          </li>
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} className="da-focus da-transition rounded-da-pill px-3.5 py-2 text-sm font-medium 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 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-4 py-2 text-sm font-semibold text-da-primary-fg shadow-da-sm hover:-translate-y-px hover:shadow-da-md md:inline-flex"
        >
          {cta.label}
        </a>
        <button
          type="button"
          aria-expanded={mobile}
          aria-controls={mobileId}
          aria-label={mobile ? "Close menu" : "Open menu"}
          onClick={() => setMobile((o) => !o)}
          className="da-focus ml-auto grid size-10 place-items-center rounded-da-pill hover:bg-da-fg/5 md:hidden"
        >
          {mobile ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
        </button>
      </nav>
      <div id={panelId} hidden={!menu} className="absolute inset-x-0 top-full hidden px-4 pt-2 md:block">
        <ul
          className={cn(
            "mx-auto grid max-w-4xl grid-cols-2 gap-2 rounded-da-lg p-2 shadow-da-lg transition-[opacity,translate] duration-(--da-duration) ease-da starting:-translate-y-2 starting:opacity-0",
            GLASS,
          )}
        >
          {features.map((f) => (
            <li key={f.href}>
              <a href={f.href} onClick={() => setMenu(false)} className="da-focus da-transition flex gap-3 rounded-da-md p-3 hover:bg-da-surface">
                <span className="grid size-10 shrink-0 place-items-center rounded-da-md bg-gradient-to-br from-da-primary to-da-accent text-da-primary-fg shadow-da-sm">
                  <f.icon aria-hidden className="size-5" />
                </span>
                <span>
                  <span className="block text-sm font-semibold">{f.label}</span>
                  <span className="mt-0.5 block text-[13px] text-da-muted-fg">{f.description}</span>
                </span>
              </a>
            </li>
          ))}
        </ul>
      </div>
      <div id={mobileId} hidden={!mobile} className="border-t border-da-border md:hidden">
        <ul className="da-container grid gap-1 py-3">
          {features.map((f) => (
            <li key={f.href}>
              <a href={f.href} className="da-focus flex items-center gap-3 rounded-da-md px-3 py-2.5 text-[15px] font-medium hover:bg-da-surface">
                <f.icon aria-hidden className="size-4 text-da-primary" />
                {f.label}
              </a>
            </li>
          ))}
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} className="da-focus block rounded-da-md px-3 py-2.5 text-[15px] font-medium hover:bg-da-surface">
                {l.label}
              </a>
            </li>
          ))}
          <li>
            <a
              href={cta.href}
              className="da-focus mt-2 block rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent py-3 text-center text-sm font-semibold text-da-primary-fg"
            >
              {cta.label}
            </a>
          </li>
        </ul>
      </div>
    </header>
  );
}

export default NavbarBar;