Navbar Centered

"use client";

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

export interface NavbarCenteredProps {
  brand?: string;
  brandHref?: string;
  left?: { label: string; href: string }[];
  right?: { label: string; href: string }[];
  cta?: { label: string; href: string };
  className?: string;
}

/** Symmetric navbar: links split on both sides of a centered rounded wordmark, CTA pill at the far right; stacked sheet on mobile. */
export function NavbarCentered({
  brand = "planta",
  brandHref = "/",
  left = [
    { label: "Product", href: "#product" },
    { label: "Templates", href: "#templates" },
  ],
  right = [
    { label: "Pricing", href: "#pricing" },
    { label: "Log in", href: "#login" },
  ],
  cta = { label: "Try free", href: "#signup" },
  className,
}: NavbarCenteredProps) {
  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]);

  const link = "da-focus da-transition rounded-da-pill px-4 py-2 text-[15px] font-medium text-da-muted-fg hover:bg-da-surface hover:text-da-fg";

  return (
    <header className={cn("px-4 pt-4 text-da-fg", className)}>
      <nav aria-label="Main" className="mx-auto grid h-16 max-w-6xl grid-cols-[1fr_auto_1fr] items-center rounded-da-lg bg-da-surface-2 px-3">
        <ul className="hidden items-center gap-1 md:flex">
          {left.map((l) => (
            <li key={l.href}>
              <a href={l.href} className={link}>
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <a
          href={brandHref}
          className="da-focus col-start-2 flex items-center gap-2 rounded-da-md px-2 font-da-display text-2xl font-extrabold tracking-da-display"
        >
          <span aria-hidden className="flex -space-x-1.5">
            <span className="size-4 rounded-full bg-da-primary" />
            <span className="size-4 rounded-full bg-da-warning" />
          </span>
          {brand}
        </a>
        <div className="col-start-3 flex items-center justify-end gap-1">
          <ul className="hidden items-center gap-1 md:flex">
            {right.map((l) => (
              <li key={l.href}>
                <a href={l.href} className={link}>
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
          <a
            href={cta.href}
            className="da-focus da-transition hidden h-10 items-center rounded-da-pill bg-da-fg px-5 text-sm font-semibold text-da-bg hover:-translate-y-0.5 md:inline-flex"
          >
            {cta.label}
          </a>
          <button
            type="button"
            aria-expanded={open}
            aria-controls={id}
            aria-label={open ? "Close menu" : "Open menu"}
            onClick={() => setOpen((o) => !o)}
            className="da-focus grid size-10 place-items-center rounded-da-pill bg-da-surface md:hidden"
          >
            {open ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
          </button>
        </div>
      </nav>
      <div id={id} hidden={!open} className="mx-auto mt-2 max-w-6xl rounded-da-lg bg-da-surface p-3 shadow-da-md md:hidden">
        <ul>
          {[...left, ...right].map((l) => (
            <li key={l.href}>
              <a href={l.href} onClick={() => setOpen(false)} className="da-focus block rounded-da-md px-4 py-3 font-medium hover:bg-da-surface-2">
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <a href={cta.href} className="da-focus mt-2 block rounded-da-pill bg-da-fg py-3 text-center font-semibold text-da-bg">
          {cta.label}
        </a>
      </div>
    </header>
  );
}

export default NavbarCentered;