Navbar Mega

"use client";

import { useEffect, useId, useRef, useState } from "react";
import { ArrowRight, BarChart3, Building2, CreditCard, FileText, Globe2, Menu, Receipt, ShieldCheck, Workflow, X, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NavbarMegaColumn {
  title: string;
  items: { label: string; href: string; icon: LucideIcon }[];
}

export interface NavbarMegaProps {
  brand?: string;
  brandHref?: string;
  columns?: NavbarMegaColumn[];
  promo?: { eyebrow: string; title: string; href: string };
  links?: { label: string; href: string }[];
  cta?: { label: string; href: string };
  className?: string;
}

const DEFAULT_COLUMNS: NavbarMegaColumn[] = [
  {
    title: "Get paid",
    items: [
      { label: "Invoicing", href: "#invoicing", icon: FileText },
      { label: "Payments", href: "#payments", icon: CreditCard },
      { label: "Global collections", href: "#global", icon: Globe2 },
    ],
  },
  {
    title: "Control spend",
    items: [
      { label: "Corporate cards", href: "#cards", icon: CreditCard },
      { label: "Bill pay", href: "#bills", icon: Receipt },
      { label: "Approval flows", href: "#approvals", icon: Workflow },
    ],
  },
  {
    title: "Close faster",
    items: [
      { label: "Reconciliation", href: "#recon", icon: BarChart3 },
      { label: "Multi-entity", href: "#entities", icon: Building2 },
      { label: "Audit & controls", href: "#audit", icon: ShieldCheck },
    ],
  },
];

/** Navbar with a wide “Platform” mega menu: three titled columns of icon links plus a navy promo card, closing on Escape/outside click; stacked on mobile. */
export function NavbarMega({
  brand = "Ledgerly",
  brandHref = "/",
  columns = DEFAULT_COLUMNS,
  promo = { eyebrow: "Report", title: "The 2026 State of the Financial Close — 1,200 CFOs surveyed", href: "#report" },
  links = [
    { label: "Customers", href: "#customers" },
    { label: "Pricing", href: "#pricing" },
    { label: "Developers", href: "#developers" },
  ],
  cta = { label: "Book a demo", href: "#demo" },
  className,
}: NavbarMegaProps) {
  const [open, setOpen] = useState(false);
  const [mobile, setMobile] = useState(false);
  const root = useRef<HTMLElement>(null);
  const panelId = useId();
  const mobileId = useId();

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

  return (
    <header ref={root} className={cn("relative z-40 border-b border-da-border bg-da-bg text-da-fg", className)}>
      <nav aria-label="Main" className="da-container flex h-16 items-center gap-8">
        <a href={brandHref} className="da-focus flex items-center gap-2 rounded-da-sm font-da-display text-lg font-extrabold tracking-da-display">
          <span aria-hidden className="grid size-7 place-items-center rounded-da-md bg-da-fg font-da-display text-sm text-da-bg">
            L
          </span>
          {brand}
        </a>
        <ul className="hidden items-center gap-1 lg:flex">
          <li>
            <button
              type="button"
              aria-expanded={open}
              aria-controls={panelId}
              onClick={() => setOpen((o) => !o)}
              className={cn(
                "da-focus da-transition rounded-da-sm px-3 py-2 text-[15px] font-medium",
                open ? "bg-da-surface-2 text-da-fg" : "text-da-muted-fg hover:text-da-fg",
              )}
            >
              Platform
            </button>
          </li>
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} className="da-focus da-transition rounded-da-sm px-3 py-2 text-[15px] 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 h-10 items-center rounded-da-md bg-da-primary px-4 text-sm font-semibold text-da-primary-fg hover:bg-da-primary/90 lg:inline-flex"
        >
          {cta.label}
        </a>
        <button
          type="button"
          aria-expanded={mobile}
          aria-controls={mobileId}
          aria-label={mobile ? "Close menu" : "Open menu"}
          onClick={() => setMobile((v) => !v)}
          className="da-focus da-stroke ml-auto grid size-10 place-items-center rounded-da-md lg:hidden"
        >
          {mobile ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
        </button>
      </nav>
      <div
        id={panelId}
        hidden={!open}
        className="absolute inset-x-0 top-full hidden border-b border-da-border bg-da-surface shadow-da-lg transition-opacity duration-(--da-duration) starting:opacity-0 lg:block"
      >
        <div className="da-container grid grid-cols-[1fr_1fr_1fr_300px] gap-8 py-8">
          {columns.map((c) => (
            <div key={c.title}>
              <p className="text-xs font-semibold tracking-da-label text-da-muted-fg uppercase">{c.title}</p>
              <ul className="mt-4 space-y-1">
                {c.items.map((it) => (
                  <li key={it.href}>
                    <a
                      href={it.href}
                      onClick={() => setOpen(false)}
                      className="da-focus da-transition group flex items-center gap-3 rounded-da-md p-2 text-[15px] font-medium hover:bg-da-surface-2"
                    >
                      <span className="da-stroke grid size-9 place-items-center rounded-da-md bg-da-surface text-da-primary group-hover:border-da-primary">
                        <it.icon aria-hidden className="size-4" />
                      </span>
                      {it.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
          <a href={promo.href} className="da-focus group flex flex-col justify-between rounded-da-lg bg-da-fg p-6 text-da-bg">
            <span>
              <span className="text-xs font-semibold tracking-da-label uppercase opacity-70">{promo.eyebrow}</span>
              <span className="mt-2 block font-da-display text-lg leading-snug font-bold">{promo.title}</span>
            </span>
            <span className="mt-6 inline-flex items-center gap-1 text-sm font-semibold">
              Download free <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
            </span>
          </a>
        </div>
      </div>
      <div id={mobileId} hidden={!mobile} className="da-container border-t border-da-border py-4 lg:hidden">
        {columns.map((c) => (
          <div key={c.title} className="mb-4">
            <p className="text-xs font-semibold tracking-da-label text-da-muted-fg uppercase">{c.title}</p>
            <ul className="mt-2 grid grid-cols-2 gap-1">
              {c.items.map((it) => (
                <li key={it.href}>
                  <a href={it.href} className="da-focus flex items-center gap-2 rounded-da-md p-2 text-sm font-medium hover:bg-da-surface-2">
                    <it.icon aria-hidden className="size-4 text-da-primary" />
                    {it.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
        <a href={cta.href} className="da-focus block rounded-da-md bg-da-primary py-2.5 text-center text-sm font-semibold text-da-primary-fg">
          {cta.label}
        </a>
      </div>
    </header>
  );
}

export default NavbarMega;