Navbar Scroll

"use client";

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

export interface NavbarScrollProps {
  brand?: string;
  brandHref?: string;
  links?: { label: string; href: string }[];
  cta?: { label: string; href: string };
  /** Scroll offset (px) after which the bar condenses. */
  threshold?: number;
  className?: string;
}

/** Sticky navbar that starts tall and transparent and condenses on scroll into a white bordered bar with a subtle shadow and a smaller CTA. */
export function NavbarScroll({
  brand = "Ledgerly",
  brandHref = "/",
  links = [
    { label: "Invoicing", href: "#invoicing" },
    { label: "Payments", href: "#payments" },
    { label: "Spend", href: "#spend" },
    { label: "Pricing", href: "#pricing" },
  ],
  cta = { label: "Start free trial", href: "#signup" },
  threshold = 24,
  className,
}: NavbarScrollProps) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const id = useId();

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [threshold]);

  return (
    <header
      className={cn(
        "sticky top-0 z-40 text-da-fg transition-[background-color,border-color,box-shadow] duration-(--da-duration-slow) ease-da",
        scrolled || open ? "border-b border-da-border bg-da-bg/95 shadow-da-sm backdrop-blur-da" : "border-b border-transparent bg-transparent",
        className,
      )}
    >
      <nav
        aria-label="Main"
        className={cn("da-container flex items-center gap-8 transition-[height] duration-(--da-duration-slow) ease-da", scrolled ? "h-14" : "h-20")}
      >
        <a href={brandHref} className="da-focus rounded-da-sm font-da-display text-xl font-extrabold tracking-da-display">
          {brand}
        </a>
        <ul className="mx-auto hidden items-center gap-7 md:flex">
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} className="da-focus da-transition rounded-da-sm text-[15px] font-medium text-da-muted-fg hover:text-da-fg">
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <a
          href={cta.href}
          className={cn(
            "da-focus da-transition hidden items-center rounded-da-md bg-da-primary font-semibold text-da-primary-fg hover:bg-da-primary/90 md:inline-flex",
            scrolled ? "h-9 px-3.5 text-sm" : "h-11 px-5 text-[15px]",
          )}
        >
          {cta.label}
        </a>
        <button
          type="button"
          aria-expanded={open}
          aria-controls={id}
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen((v) => !v)}
          className="da-focus da-stroke ml-auto grid size-10 place-items-center rounded-da-md md:hidden"
        >
          {open ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
        </button>
      </nav>
      <ul id={id} hidden={!open} className="da-container pb-4 md:hidden">
        {links.map((l) => (
          <li key={l.href}>
            <a href={l.href} onClick={() => setOpen(false)} className="da-focus block rounded-da-sm py-2.5 font-medium">
              {l.label}
            </a>
          </li>
        ))}
        <li className="pt-2">
          <a href={cta.href} className="da-focus block rounded-da-md bg-da-primary py-2.5 text-center text-sm font-semibold text-da-primary-fg">
            {cta.label}
          </a>
        </li>
      </ul>
    </header>
  );
}

export default NavbarScroll;