Navbar Corporate

"use client";

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

export interface NavbarCorporateMenu {
  label: string;
  items: { label: string; description: string; href: string }[];
}

export interface NavbarCorporateProps {
  brand?: string;
  brandHref?: string;
  menus?: NavbarCorporateMenu[];
  links?: { label: string; href: string }[];
  signIn?: { label: string; href: string };
  sales?: { label: string; href: string };
  cta?: { label: string; href: string };
  className?: string;
}

const DEFAULT_MENUS: NavbarCorporateMenu[] = [
  {
    label: "Product",
    items: [
      { label: "Invoicing", description: "Branded invoices and automatic reminders.", href: "#invoicing" },
      { label: "Payments", description: "Card, ACH and SEPA in 40 currencies.", href: "#payments" },
      { label: "Spend management", description: "Cards, approvals and receipts.", href: "#spend" },
      { label: "Reconciliation", description: "Match bank lines to invoices automatically.", href: "#recon" },
    ],
  },
  {
    label: "Solutions",
    items: [
      { label: "Startups", description: "Get paid faster from day one.", href: "#startups" },
      { label: "Mid-market", description: "Multi-entity close in days.", href: "#midmarket" },
      { label: "Enterprise", description: "Controls, SSO and audit trails.", href: "#enterprise" },
    ],
  },
];

function LedgerlyMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 28 28" className={cn("size-7", className)}>
      <rect width="28" height="28" rx="7" fill="var(--da-primary)" />
      <path d="M8 8v12h12" stroke="var(--da-primary-fg)" strokeWidth="2.6" fill="none" strokeLinecap="round" />
      <path d="M13 15h7M13 11h7" stroke="var(--da-primary-fg)" strokeWidth="2.2" strokeLinecap="round" opacity=".7" />
    </svg>
  );
}

/** Corporate navbar: logo, two dropdown menus (items with descriptions), plain links, “Sign in”, bordered “Contact sales” and a blue primary; mobile accordion menu. */
export function NavbarCorporate({
  brand = "Ledgerly",
  brandHref = "/",
  menus = DEFAULT_MENUS,
  links = [
    { label: "Customers", href: "#customers" },
    { label: "Pricing", href: "#pricing" },
  ],
  signIn = { label: "Sign in", href: "#login" },
  sales = { label: "Contact sales", href: "#sales" },
  cta = { label: "Start free trial", href: "#signup" },
  className,
}: NavbarCorporateProps) {
  const [open, setOpen] = useState<string | null>(null);
  const [mobile, setMobile] = useState(false);
  const root = useRef<HTMLElement>(null);
  const mobileId = useId();

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

  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.5 rounded-da-sm font-da-display text-lg font-extrabold tracking-da-display">
          <LedgerlyMark />
          {brand}
        </a>
        <ul className="hidden items-center gap-1 lg:flex">
          {menus.map((m) => (
            <li key={m.label} className="relative">
              <button
                type="button"
                aria-expanded={open === m.label}
                onClick={() => setOpen(open === m.label ? null : m.label)}
                className={cn(
                  "da-focus da-transition inline-flex items-center gap-1 rounded-da-sm px-3 py-2 text-[15px] font-medium hover:text-da-fg",
                  open === m.label ? "text-da-fg" : "text-da-muted-fg",
                )}
              >
                {m.label}
                <ChevronDown aria-hidden className={cn("da-transition size-4", open === m.label && "rotate-180")} />
              </button>
              {open === m.label && (
                <ul className="da-stroke absolute top-full left-0 mt-2 w-80 rounded-da-lg bg-da-surface p-2 text-da-surface-fg shadow-da-lg transition-[opacity,translate] duration-(--da-duration) ease-da starting:-translate-y-1 starting:opacity-0">
                  {m.items.map((it) => (
                    <li key={it.href}>
                      <a href={it.href} onClick={() => setOpen(null)} className="da-focus da-transition block rounded-da-md p-3 hover:bg-da-surface-2">
                        <span className="block text-sm font-semibold">{it.label}</span>
                        <span className="mt-0.5 block text-sm text-da-muted-fg">{it.description}</span>
                      </a>
                    </li>
                  ))}
                </ul>
              )}
            </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>
        <div className="ml-auto hidden items-center gap-2 lg:flex">
          <a href={signIn.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">
            {signIn.label}
          </a>
          <a
            href={sales.href}
            className="da-focus da-transition da-stroke inline-flex h-10 items-center rounded-da-md bg-da-surface px-4 text-sm font-semibold hover:border-da-border-strong"
          >
            {sales.label}
          </a>
          <a
            href={cta.href}
            className="da-focus da-transition inline-flex h-10 items-center rounded-da-md bg-da-primary px-4 text-sm font-semibold text-da-primary-fg shadow-da-sm hover:bg-da-primary/90"
          >
            {cta.label}
          </a>
        </div>
        <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={mobileId} hidden={!mobile} className="border-t border-da-border lg:hidden">
        <div className="da-container py-3">
          {menus.map((m) => (
            <details key={m.label} className="group border-b border-da-border">
              <summary className="da-focus flex cursor-pointer list-none items-center justify-between py-3 font-semibold [&::-webkit-details-marker]:hidden">
                {m.label}
                <ChevronDown aria-hidden className="da-transition size-4 group-open:rotate-180" />
              </summary>
              <ul className="pb-3">
                {m.items.map((it) => (
                  <li key={it.href}>
                    <a href={it.href} className="da-focus block rounded-da-sm py-2 text-da-muted-fg hover:text-da-fg">
                      {it.label}
                    </a>
                  </li>
                ))}
              </ul>
            </details>
          ))}
          {links.map((l) => (
            <a key={l.href} href={l.href} className="da-focus block border-b border-da-border py-3 font-semibold">
              {l.label}
            </a>
          ))}
          <div className="mt-4 grid gap-2 sm:grid-cols-2">
            <a href={sales.href} className="da-focus da-stroke rounded-da-md py-2.5 text-center text-sm font-semibold">
              {sales.label}
            </a>
            <a href={cta.href} className="da-focus rounded-da-md bg-da-primary py-2.5 text-center text-sm font-semibold text-da-primary-fg">
              {cta.label}
            </a>
          </div>
        </div>
      </div>
    </header>
  );
}

export default NavbarCorporate;