Glass Nav

/**
 * VibeBox Motion · Glass Nav
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import { useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { Glass } from "@/lib/vibebox/glass";

export type GlassNavProps = {
  /** The wordmark or logo on the left. */
  brand?: string;
  links?: { label: string; href: string }[];
  /** The call to action on the right. */
  cta?: { label: string; href: string };
  /** The current page's href, marked with aria-current. */
  current?: string;
  tone?: "auto" | "dark" | "light";
  className?: string;
};

const LINKS = [
  { label: "Work", href: "#work" },
  { label: "Studio", href: "#studio" },
  { label: "Journal", href: "#journal" },
  { label: "Contact", href: "#contact" },
];

/**
 * A floating site header on glass, as a pill. A highlight glides to the link under the pointer or
 * keyboard focus (one `translateX` and `scaleX`), and rests on the current page.
 */
export function GlassNav({ brand = "Atelier", links = LINKS, cta = { label: "Book a call", href: "#contact" }, current, tone, className }: GlassNavProps) {
  const list = useRef<HTMLUListElement>(null);
  const [pill, setPill] = useState<{ x: number; w: number } | null>(null);

  const move = (target: HTMLElement | null) => {
    const root = list.current;
    if (!root || !target) return setPill(null);
    const a = root.getBoundingClientRect();
    const b = target.getBoundingClientRect();
    setPill({ x: b.left - a.left, w: b.width });
  };

  return (
    <Glass as="header" data-vb="glass-nav" tone={tone} radius={999} still className={cn("flex w-full max-w-[40rem] items-center gap-2 py-1.5 pr-1.5 pl-5", className)}>
      <a href="#top" className="mr-2 text-[0.98rem] font-semibold tracking-tight focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">
        {brand}
      </a>
      <nav aria-label="Main" className="ml-auto hidden sm:block">
        <ul ref={list} className="relative flex items-center" onPointerLeave={() => move(null)} onBlur={() => move(null)}>
          <span
            aria-hidden="true"
            className={cn(
              "pointer-events-none absolute top-0 left-0 h-full rounded-full border border-white/25 bg-white/20 transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.34,1.3,0.5,1)] motion-reduce:transition-none",
              pill ? "opacity-100" : "opacity-0",
            )}
            style={{ width: pill?.w ?? 0, transform: `translateX(${pill?.x ?? 0}px)` }}
          />
          {links.map((link) => (
            <li key={link.href}>
              <a
                href={link.href}
                aria-current={current === link.href ? "page" : undefined}
                onPointerEnter={(event) => move(event.currentTarget)}
                onFocus={(event) => move(event.currentTarget)}
                className="relative block rounded-full px-3.5 py-2 text-[0.86rem] font-medium opacity-80 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-ring aria-[current=page]:opacity-100"
              >
                {link.label}
              </a>
            </li>
          ))}
        </ul>
      </nav>
      <a
        href={cta.href}
        className="ml-auto inline-flex h-9 items-center rounded-full bg-white px-4 text-[0.84rem] font-semibold text-[#101521] transition-transform hover:scale-[1.03] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring sm:ml-1"
      >
        {cta.label}
      </a>
    </Glass>
  );
}

/**
 * VibeBox Motion · Glass Nav
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export * from "./glass-nav.client";