Navbar Organic

"use client";

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

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

function GroveMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 32 32" className={cn("size-8 shrink-0", className)}>
      <circle cx="16" cy="16" r="16" fill="var(--da-primary)" />
      <path d="M16 25V13" stroke="var(--da-primary-fg)" strokeWidth="2" strokeLinecap="round" />
      <path d="M16 17c-4 0-6.5-2.6-6.5-6.5 4 0 6.5 2.6 6.5 6.5Z" fill="var(--da-primary-fg)" opacity=".85" />
      <path d="M16 14c3.6 0 6-2.3 6-6-3.6 0-6 2.3-6 6Z" fill="var(--da-primary-fg)" />
    </svg>
  );
}

/** Calm cream navbar: round leaf logo + serif wordmark, links with a hand-drawn underline on the active one, text sign-in and a sage pill CTA; rounded sheet menu on mobile. */
export function NavbarOrganic({
  brand = "Grove",
  brandHref = "/",
  links = [
    { label: "Product", href: "#product" },
    { label: "How it works", href: "#how" },
    { label: "Customers", href: "#customers" },
    { label: "Pricing", href: "#pricing" },
    { label: "Journal", href: "#journal" },
  ],
  activeHref = "#product",
  signIn = { label: "Sign in", href: "#signin" },
  cta = { label: "Start measuring", href: "#start" },
  className,
}: NavbarOrganicProps) {
  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 bg-da-bg text-da-fg", className)}>
      <nav aria-label="Main" className="da-container flex h-20 items-center gap-8">
        <a href={brandHref} className="da-focus flex items-center gap-2.5 rounded-da-pill font-da-display text-2xl">
          <GroveMark />
          {brand}
        </a>
        <ul className="hidden items-center gap-7 lg:flex">
          {links.map((l) => {
            const on = l.href === activeHref;
            return (
              <li key={l.href}>
                <a
                  href={l.href}
                  aria-current={on ? "page" : undefined}
                  className={cn("da-focus da-transition relative rounded-da-sm py-1 text-[15px]", on ? "text-da-fg" : "text-da-muted-fg hover:text-da-fg")}
                >
                  {l.label}
                  {on && (
                    <svg aria-hidden viewBox="0 0 60 8" preserveAspectRatio="none" className="absolute -bottom-1.5 left-0 h-2 w-full text-da-primary">
                      <path d="M2 5.5C14 2 30 2 58 4.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                    </svg>
                  )}
                </a>
              </li>
            );
          })}
        </ul>
        <div className="ml-auto hidden items-center gap-5 lg:flex">
          <a href={signIn.href} className="da-focus rounded-da-sm text-[15px] text-da-muted-fg hover:text-da-fg">
            {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-medium text-da-primary-fg hover:bg-da-primary/90"
          >
            {cta.label}
          </a>
        </div>
        <button
          type="button"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          aria-controls={id}
          onClick={() => setOpen(!open)}
          className="da-focus ml-auto grid size-11 place-items-center rounded-full bg-da-surface-2 lg:hidden"
        >
          {open ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
        </button>
      </nav>
      <div
        id={id}
        hidden={!open}
        className="absolute inset-x-3 top-full z-40 rounded-da-lg bg-da-surface p-4 text-da-surface-fg shadow-da-lg transition-[opacity,translate] duration-(--da-duration) starting:-translate-y-2 starting:opacity-0 lg:hidden"
      >
        <ul className="grid gap-1">
          {links.map((l) => (
            <li key={l.href}>
              <a
                href={l.href}
                aria-current={l.href === activeHref ? "page" : undefined}
                className="da-focus block rounded-da-md px-4 py-3 text-lg hover:bg-da-surface-2 aria-[current=page]:bg-da-accent aria-[current=page]:text-da-accent-fg"
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <div className="mt-3 grid gap-2 border-t border-da-border pt-4">
          <a href={signIn.href} className="da-focus rounded-da-pill py-3 text-center">
            {signIn.label}
          </a>
          <a href={cta.href} className="da-focus rounded-da-pill bg-da-primary py-3 text-center font-medium text-da-primary-fg">
            {cta.label}
          </a>
        </div>
      </div>
    </header>
  );
}

export default NavbarOrganic;