Navbar Sheet

"use client";

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

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

const TINTS = ["bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg", "bg-da-primary/12 text-da-fg", "bg-da-warning/25 text-da-fg"];

/** Minimal bar with a big “Menu” pill that opens a full-screen sheet of pastel link tiles (with descriptions) on every screen size. */
export function NavbarSheet({
  brand = "Planta",
  brandHref = "/",
  links = [
    { label: "Boards", href: "#boards", description: "Drag tasks between columns." },
    { label: "Weekly plan", href: "#week", description: "See your week at a glance." },
    { label: "Reminders", href: "#reminders", description: "Gentle nudges, never spam." },
    { label: "Pricing", href: "#pricing", description: "Free for teams up to 5." },
  ],
  cta = { label: "Start free", href: "#signup" },
  className,
}: NavbarSheetProps) {
  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("relative z-40 text-da-fg", className)}>
      <nav aria-label="Main" className="da-container flex h-18 items-center justify-between">
        <a href={brandHref} className="da-focus rounded-da-md font-da-display text-2xl font-extrabold tracking-da-display">
          {brand}
          <span className="text-da-primary">.</span>
        </a>
        <div className="flex items-center gap-2">
          <a
            href={cta.href}
            className="da-focus da-transition hidden h-11 items-center rounded-da-pill bg-da-primary px-5 font-semibold text-da-primary-fg hover:-translate-y-0.5 sm:inline-flex"
          >
            {cta.label}
          </a>
          <button
            type="button"
            aria-expanded={open}
            aria-controls={id}
            onClick={() => setOpen((o) => !o)}
            className="da-focus da-transition inline-flex h-11 items-center gap-2 rounded-da-pill bg-da-surface px-5 font-semibold shadow-da-sm hover:shadow-da-md"
          >
            {open ? <X aria-hidden className="size-4" /> : <Menu aria-hidden className="size-4" />}
            {open ? "Close" : "Menu"}
          </button>
        </div>
      </nav>
      <div id={id} hidden={!open} className="da-container pb-6">
        <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          {links.map((l, i) => (
            <li
              key={l.href}
              className="transition-[opacity,translate] duration-(--da-duration-slow) ease-da-emphasized starting:translate-y-3 starting:opacity-0"
              style={{ transitionDelay: `${i * 50}ms` }}
            >
              <a
                href={l.href}
                onClick={() => setOpen(false)}
                className={cn("da-focus da-transition group flex h-full flex-col rounded-da-lg p-6 hover:-translate-y-1", TINTS[i % TINTS.length])}
              >
                <span className="font-da-display text-2xl font-extrabold tracking-da-display">{l.label}</span>
                <span className="mt-1 text-sm opacity-85">{l.description}</span>
                <ArrowRight aria-hidden className="da-transition mt-6 size-5 group-hover:translate-x-1" />
              </a>
            </li>
          ))}
        </ul>
      </div>
    </header>
  );
}

export default NavbarSheet;