Navbar Meta

"use client";

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

export interface NavbarMetaProps {
  brand?: string;
  brandHref?: string;
  meta?: string[];
  links?: { label: string; href: string }[];
  cta?: { label: string; href: string };
  className?: string;
}

function FrameMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className={cn("size-6 shrink-0", className)}>
      <rect x="1" y="1" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M7 1v22M1 7h22" stroke="currentColor" strokeWidth="2" />
      <rect x="15" y="15" width="4" height="4" fill="var(--da-accent)" />
    </svg>
  );
}

/** Two-tier editorial header: a mono meta strip (version, status with signal dot, changelog link) over a nav bar closed by a full-ink rule; oversize logo wordmark on desktop; stacked menu on mobile. */
export function NavbarMeta({
  brand = "Frame",
  brandHref = "/",
  meta = ["Frame 4.2 is live", "Status: all systems normal", "Changelog ↗"],
  links = [
    { label: "Product", href: "#product" },
    { label: "Templates", href: "#templates" },
    { label: "Customers", href: "#customers" },
    { label: "Pricing", href: "#pricing" },
  ],
  cta = { label: "Build your site", href: "#start" },
  className,
}: NavbarMetaProps) {
  const [open, setOpen] = useState(false);
  const id = 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("bg-da-bg text-da-fg", className)}>
      <div className="border-b border-da-border">
        <ul className="da-container flex h-9 items-center gap-6 overflow-x-auto font-da-mono text-[11px] tracking-da-label whitespace-nowrap text-da-muted-fg uppercase">
          {meta.map((m, i) => (
            <li key={m} className="flex items-center gap-2">
              {i === 1 && <span aria-hidden className="size-1.5 rounded-full bg-da-accent" />}
              {m}
            </li>
          ))}
        </ul>
      </div>
      <nav aria-label="Main" className="da-container flex items-end gap-10 border-b border-da-border-strong pt-6 pb-4">
        <a
          href={brandHref}
          className="da-focus flex items-center gap-3 rounded-da-sm font-da-display text-3xl leading-none font-semibold tracking-da-display sm:text-4xl"
        >
          <FrameMark className="size-7" />
          {brand}
        </a>
        <ul className="ml-auto hidden gap-8 md:flex">
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} className="da-focus rounded-da-sm text-[15px] hover:underline hover:underline-offset-4">
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <a
          href={cta.href}
          className="da-focus da-transition hidden h-10 items-center rounded-da-sm bg-da-primary px-4 text-[15px] font-medium text-da-primary-fg hover:opacity-85 md:inline-flex"
        >
          {cta.label}
        </a>
        <button
          type="button"
          aria-expanded={open}
          aria-controls={id}
          onClick={() => setOpen(!open)}
          className="da-focus ml-auto rounded-da-sm font-da-mono text-xs tracking-da-label uppercase md:hidden"
        >
          {open ? "Close" : "Menu"}
        </button>
      </nav>
      <div id={id} hidden={!open} className="border-b border-da-border md:hidden">
        <ul className="da-container py-2">
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} className="da-focus block rounded-da-sm py-3 text-lg">
                {l.label}
              </a>
            </li>
          ))}
          <li className="pb-3">
            <a href={cta.href} className="da-focus mt-2 flex h-12 items-center justify-center rounded-da-sm bg-da-primary font-medium text-da-primary-fg">
              {cta.label}
            </a>
          </li>
        </ul>
      </div>
    </header>
  );
}

export default NavbarMeta;