Navbar Soft

"use client";

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

export interface NavbarSoftProps {
  brand?: string;
  brandHref?: string;
  links?: { label: string; href: string }[];
  activeHref?: string;
  signIn?: { label: string; href: string };
  cta?: { label: string; href: string };
  className?: string;
}

function PlantaLogo({ className }: { className?: string }) {
  return (
    <span aria-hidden className={cn("relative grid size-8 place-items-center rounded-[11px] bg-da-primary", className)}>
      <span className="absolute top-1.5 left-1.5 size-2.5 rounded-full bg-da-accent" />
      <span className="absolute right-1.5 bottom-1.5 size-3 rounded-[4px] bg-da-secondary" />
    </span>
  );
}

/** Friendly white navbar: rounded logo mark, pill links with a soft active fill, text sign-in and a pill CTA; drop-down sheet on mobile. */
export function NavbarSoft({
  brand = "Planta",
  brandHref = "/",
  links = [
    { label: "Features", href: "#features" },
    { label: "Templates", href: "#templates" },
    { label: "Pricing", href: "#pricing" },
    { label: "Blog", href: "#blog" },
  ],
  activeHref = "#features",
  signIn = { label: "Log in", href: "#login" },
  cta = { label: "Get started — it’s free", href: "#signup" },
  className,
}: NavbarSoftProps) {
  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("sticky top-0 z-40 bg-da-bg/85 text-da-fg backdrop-blur-da", className)}>
      <nav aria-label="Main" className="da-container flex h-18 items-center gap-6">
        <a href={brandHref} className="da-focus flex items-center gap-2.5 rounded-da-md font-da-display text-xl font-extrabold tracking-da-display">
          <PlantaLogo />
          {brand}
        </a>
        <ul className="mx-auto hidden items-center gap-1 md:flex">
          {links.map((l) => (
            <li key={l.href}>
              <a
                href={l.href}
                aria-current={l.href === activeHref ? "page" : undefined}
                className="da-focus da-transition rounded-da-pill px-4 py-2 text-[15px] font-medium text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg aria-[current=page]:bg-da-primary/12 aria-[current=page]:text-da-fg"
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <div className="ml-auto hidden items-center gap-2 md:ml-0 md:flex">
          <a href={signIn.href} className="da-focus da-transition rounded-da-pill px-4 py-2 text-[15px] font-medium hover:bg-da-surface-2">
            {signIn.label}
          </a>
          <a
            href={cta.href}
            className="da-focus da-transition inline-flex h-11 items-center rounded-da-pill bg-da-primary px-5 text-[15px] font-semibold text-da-primary-fg shadow-da-sm hover:-translate-y-0.5 hover:shadow-da-md"
          >
            {cta.label}
          </a>
        </div>
        <button
          type="button"
          aria-expanded={open}
          aria-controls={id}
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen((o) => !o)}
          className="da-focus ml-auto grid size-11 place-items-center rounded-da-pill bg-da-surface shadow-da-sm md:hidden"
        >
          {open ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
        </button>
      </nav>
      <div id={id} hidden={!open} className="px-4 pb-4 md:hidden">
        <div className="rounded-da-lg bg-da-surface p-3 shadow-da-md transition-[opacity,translate] duration-(--da-duration) ease-da-emphasized starting:-translate-y-2 starting:opacity-0">
          <ul>
            {links.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>
          <div className="mt-2 grid gap-2">
            <a href={signIn.href} className="da-focus rounded-da-pill bg-da-surface-2 py-3 text-center font-medium">
              {signIn.label}
            </a>
            <a href={cta.href} className="da-focus rounded-da-pill bg-da-primary py-3 text-center font-semibold text-da-primary-fg">
              {cta.label}
            </a>
          </div>
        </div>
      </div>
    </header>
  );
}

export default NavbarSoft;