Navbar Announcement

"use client";

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

export interface NavbarAnnouncementProps {
  brand?: string;
  brandHref?: string;
  announcement?: { label: string; cta: string; href: string } | null;
  links?: { label: string; href: string }[];
  /** Called when the search trigger is pressed (or ⌘K / Ctrl+K). */
  onSearch?: () => void;
  signIn?: { label: string; href: string };
  cta?: { label: string; href: string };
  className?: string;
}

/** Two-tier header: dismissible announcement bar above a navbar with a ⌘K search trigger. */
export function NavbarAnnouncement({
  brand = "Tracewise",
  brandHref = "/",
  announcement = { label: "Tracewise raises $40M Series B to end alert fatigue", cta: "Read the post", href: "#blog" },
  links = [
    { label: "Product", href: "#product" },
    { label: "Solutions", href: "#solutions" },
    { label: "Pricing", href: "#pricing" },
    { label: "Docs", href: "#docs" },
  ],
  onSearch,
  signIn = { label: "Log in", href: "#login" },
  cta = { label: "Get a demo", href: "#demo" },
  className,
}: NavbarAnnouncementProps) {
  const [dismissed, setDismissed] = useState(false);
  const [open, setOpen] = useState(false);
  const menuId = useId();

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && onSearch) {
        e.preventDefault();
        onSearch();
      }
      if (e.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onSearch]);

  return (
    <header className={cn("relative z-40 text-da-fg", className)}>
      {announcement && !dismissed && (
        <div className="relative bg-da-fg text-da-bg">
          <div className="da-container flex h-10 items-center justify-center gap-3 pr-10 text-[13px]">
            <p className="truncate">{announcement.label}</p>
            <a
              href={announcement.href}
              className="da-focus group hidden shrink-0 items-center gap-1 rounded-da-sm font-medium underline-offset-4 hover:underline sm:inline-flex"
            >
              {announcement.cta}
              <ArrowRight aria-hidden className="da-transition size-3.5 group-hover:translate-x-0.5" />
            </a>
          </div>
          <button
            type="button"
            onClick={() => setDismissed(true)}
            aria-label="Dismiss announcement"
            className="da-focus absolute top-1/2 right-3 grid size-6 -translate-y-1/2 place-items-center rounded-da-sm opacity-70 hover:opacity-100"
          >
            <X aria-hidden className="size-3.5" />
          </button>
        </div>
      )}
      <div className="border-b border-da-border bg-da-bg">
        <nav aria-label="Main" className="da-container flex h-14 items-center gap-6">
          <a href={brandHref} className="da-focus flex items-center gap-2 rounded-da-sm text-[15px] font-semibold tracking-tight">
            <svg aria-hidden viewBox="0 0 24 24" className="size-5 text-da-primary" fill="none">
              <path d="M3 12h4l2.5-6 5 12 2.5-6H21" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            {brand}
          </a>
          <ul className="hidden items-center gap-1 lg:flex">
            {links.map((l) => (
              <li key={l.href}>
                <a href={l.href} className="da-focus da-transition rounded-da-md px-3 py-1.5 text-sm text-da-muted-fg hover:text-da-fg">
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
          <button
            type="button"
            onClick={onSearch}
            className="da-focus da-transition da-stroke ml-auto hidden h-8 w-56 items-center gap-2 rounded-da-md bg-da-surface px-2.5 text-[13px] text-da-muted-fg hover:border-da-border-strong sm:flex"
          >
            <Search aria-hidden className="size-3.5" />
            Search docs…
            <kbd className="ml-auto rounded-da-sm bg-da-muted px-1.5 font-da-mono text-[11px]">⌘K</kbd>
          </button>
          <div className="hidden items-center gap-2 lg:flex">
            <a href={signIn.href} className="da-focus da-transition rounded-da-md px-3 py-1.5 text-sm text-da-muted-fg hover:text-da-fg">
              {signIn.label}
            </a>
            <a
              href={cta.href}
              className="da-focus da-transition inline-flex h-8 items-center rounded-da-md bg-da-fg px-3.5 text-sm font-medium text-da-bg hover:bg-da-fg/85"
            >
              {cta.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 ml-auto grid size-9 place-items-center rounded-da-md text-da-muted-fg hover:bg-da-muted sm:ml-0 lg:hidden"
          >
            {open ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
          </button>
        </nav>
        <div id={menuId} hidden={!open} className="border-t border-da-border lg:hidden">
          <ul className="da-container py-2">
            {links.map((l) => (
              <li key={l.href}>
                <a href={l.href} onClick={() => setOpen(false)} className="da-focus block rounded-da-md px-3 py-2.5 text-[15px] hover:bg-da-muted">
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
          <div className="da-container grid grid-cols-2 gap-2 border-t border-da-border py-3">
            <a href={signIn.href} className="da-focus da-stroke rounded-da-md py-2 text-center text-sm font-medium">
              {signIn.label}
            </a>
            <a href={cta.href} className="da-focus rounded-da-md bg-da-fg py-2 text-center text-sm font-medium text-da-bg">
              {cta.label}
            </a>
          </div>
        </div>
      </div>
    </header>
  );
}

export default NavbarAnnouncement;