Navbar Islands

"use client";

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

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

const GLASS = "da-stroke bg-da-surface shadow-da-sm backdrop-blur-da backdrop-saturate-150";

/** Three separate floating glass islands: brand on the left, links in the center, actions on the right. Merges into one pill + panel on mobile. */
export function NavbarIslands({
  brand = "Halo",
  brandHref = "/",
  links = [
    { label: "Product", href: "#product" },
    { label: "Recaps", href: "#recaps" },
    { label: "Pricing", href: "#pricing" },
    { label: "Changelog", href: "#changelog" },
  ],
  signIn = { label: "Sign in", href: "#login" },
  cta = { label: "Get Halo", href: "#signup" },
  className,
}: NavbarIslandsProps) {
  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-4 z-40 px-4 text-da-fg", className)}>
      <nav aria-label="Main" className="mx-auto flex max-w-6xl items-center justify-between gap-3">
        <a
          href={brandHref}
          className={cn("da-focus flex h-12 items-center gap-2 rounded-da-pill pr-5 pl-2 font-da-display text-lg font-semibold tracking-da-display", GLASS)}
        >
          <span aria-hidden className="grid size-8 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent">
            <span className="size-3 rounded-full bg-da-bg/90" />
          </span>
          {brand}
        </a>
        <ul className={cn("hidden h-12 items-center gap-1 rounded-da-pill px-2 md:flex", GLASS)}>
          {links.map((l) => (
            <li key={l.href}>
              <a
                href={l.href}
                className="da-focus da-transition rounded-da-pill px-4 py-2 text-sm font-medium text-da-muted-fg hover:bg-da-surface hover:text-da-fg"
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <div className={cn("hidden h-12 items-center gap-1 rounded-da-pill p-1.5 md:flex", GLASS)}>
          <a href={signIn.href} className="da-focus da-transition rounded-da-pill px-4 py-2 text-sm font-medium text-da-muted-fg hover:text-da-fg">
            {signIn.label}
          </a>
          <a
            href={cta.href}
            className="da-focus da-transition inline-flex h-full items-center rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-4 text-sm font-semibold text-da-primary-fg shadow-da-sm 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={cn("da-focus grid size-12 place-items-center rounded-full md:hidden", GLASS)}
        >
          {open ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
        </button>
      </nav>
      <div
        id={id}
        hidden={!open}
        className={cn(
          "mx-auto mt-2 max-w-6xl rounded-da-lg p-3 transition-[opacity,scale] duration-(--da-duration) ease-da starting:scale-95 starting:opacity-0 md:hidden",
          GLASS,
        )}
      >
        <ul>
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} onClick={() => setOpen(false)} className="da-focus block rounded-da-md px-3 py-2.5 text-[15px] font-medium hover:bg-da-surface">
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <div className="mt-2 grid grid-cols-2 gap-2">
          <a href={signIn.href} className="da-focus da-stroke rounded-da-pill bg-da-surface py-2.5 text-center text-sm font-medium">
            {signIn.label}
          </a>
          <a
            href={cta.href}
            className="da-focus rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent py-2.5 text-center text-sm font-semibold text-da-primary-fg"
          >
            {cta.label}
          </a>
        </div>
      </div>
    </header>
  );
}

export default NavbarIslands;