Holo Pill Nav

"use client";

import { type CSSProperties } from "react";

/* ============================================================================
 * SHARED PIECES
 * ========================================================================== */

/** The kit's face. Urbanist is set at 300 for the quiet line, 700 for the loud one. */
export const HG_FONT = 'var(--font-urbanist, "Urbanist"), "Outfit", ui-sans-serif, system-ui, sans-serif';

/** The kit's palette. Ground and ink do the work; the colour lives inside the glass. */
export const HG = {
  ground: "#eef0f5",
  paper: "#f7f8fb",
  ink: "#15161b",
  inkSoft: "rgba(21,22,27,0.62)",
  inkMute: "rgba(21,22,27,0.42)",
  line: "rgba(21,22,27,0.10)",
  night: "#0d0e11",
  cobalt: "#2b46ff",
  violet: "#7b5cff",
  pink: "#ff6fb5",
  coral: "#ff4a4a",
  orange: "#ff8a1f",
} as const;

/** The eight-spoke asterisk the kit uses as caret, bullet and spinner. */
export function HgAsterisk({ className, style, stroke = 1.6 }: { className?: string; style?: CSSProperties; stroke?: number }) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden className={className} style={style} fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round">
      <path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4" />
    </svg>
  );
}

/** viberdy's V, as a solid mark. */
export function HgVMark({ className, style }: { className?: string; style?: CSSProperties }) {
  return (
    <svg viewBox="0 0 32 32" aria-hidden className={className} style={style}>
      <rect width="32" height="32" rx="9" fill="currentColor" />
      <path d="M9 10.5 L15.2 22.5 L16.8 22.5 L23 10.5 L19.6 10.5 L16 18.2 L12.4 10.5 Z" fill="#fff" />
    </svg>
  );
}

/* ============================================================================
 * NAV + ASTERISK HEADLINE
 * ========================================================================== */

const HG_NAV_CSS = `
.hg-pill{position:relative;overflow:hidden;isolation:isolate;transition:color .45s cubic-bezier(.2,.7,.2,1),border-color .45s,background-color .45s}
.hg-pill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--hg-pill-fill);transform:translateY(102%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hg-pill:hover::before,.hg-pill:focus-visible::before{transform:none}
.hg-pill:hover,.hg-pill:focus-visible{color:var(--hg-pill-on)}
.hg-pill .hg-pill-star{width:0;opacity:0;margin-left:0;transition:width .45s cubic-bezier(.2,.7,.2,1),opacity .3s,margin .45s}
.hg-pill:hover .hg-pill-star,.hg-pill:focus-visible .hg-pill-star{width:.8em;opacity:1;margin-left:.45em;animation:hg-spin 2.4s linear infinite}
.hg-pill:focus-visible{outline:2px solid var(--hg-ring) !important;outline-offset:3px}
@keyframes hg-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.hg-pill::before,.hg-pill .hg-pill-star{transition:none}.hg-pill:hover .hg-pill-star{animation:none}}
`;

export type HgTone = "light" | "dark";

/**
 * The header: the mark and wordmark left, one outlined pill right. The pill
 * fills from below on hover and an asterisk turns in beside the label. `tone`
 * flips it for dark sections; the site drives it from what is underneath.
 */
export function HgNav({
  brand = "viberdy",
  cta = "Pricing",
  href = "#pricing",
  tone = "light",
  links,
  className,
  style,
}: {
  brand?: string;
  cta?: string;
  href?: string;
  tone?: HgTone;
  links?: { label: string; href: string }[];
  className?: string;
  style?: CSSProperties;
}) {
  const dark = tone === "dark";
  const ink = dark ? "#f4f5f8" : HG.ink;
  return (
    <header
      className={"flex items-center justify-between " + (className ?? "")}
      style={{ fontFamily: HG_FONT, color: ink, transition: "color .45s", ...style }}
    >
      <style>{HG_NAV_CSS}</style>
      <a href="#top" className="flex items-center gap-[0.55em] rounded-md text-[17px] font-semibold tracking-[-0.02em] outline-none focus-visible:ring-2" style={{ color: "inherit" }}>
        <HgVMark className="h-[1.3em] w-[1.3em]" style={{ color: dark ? "#f4f5f8" : HG.cobalt, transition: "color .45s" }} />
        {brand}
      </a>
      <nav className="flex items-center gap-7" aria-label="Primary">
        {links?.map((l) => (
          <a key={l.href + l.label} href={l.href} className="hidden text-[13px] font-medium opacity-70 transition-opacity hover:opacity-100 md:block" style={{ color: "inherit" }}>
            {l.label}
          </a>
        ))}
        <a
          href={href}
          className="hg-pill inline-flex h-9 items-center rounded-full px-[18px] text-[13px] font-medium"
          style={
            {
              color: "inherit",
              border: "1px solid " + (dark ? "rgba(244,245,248,0.28)" : "rgba(21,22,27,0.14)"),
              background: dark ? "rgba(255,255,255,0.05)" : "rgba(255,255,255,0.55)",
              backdropFilter: "blur(10px)",
              WebkitBackdropFilter: "blur(10px)",
              "--hg-pill-fill": dark ? "#f4f5f8" : HG.ink,
              "--hg-pill-on": dark ? HG.ink : "#fff",
              "--hg-ring": dark ? "#f4f5f8" : HG.cobalt,
            } as CSSProperties
          }
        >
          {cta}
          <HgAsterisk className="hg-pill-star inline-block h-[0.8em]" stroke={2.2} />
        </a>
      </nav>
    </header>
  );
}