Navbar Dock

"use client";

import { useState } from "react";
import { motion, useReducedMotion } from "motion/react";
import { Home, LayoutGrid, MessageCircle, Sparkles, Tag, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NavbarDockItem {
  label: string;
  href: string;
  icon: LucideIcon;
}

export interface NavbarDockProps {
  items?: NavbarDockItem[];
  activeHref?: string;
  cta?: { label: string; href: string };
  /** fixed: pinned to the viewport bottom; static: in flow (previews, footers). */
  position?: "fixed" | "static";
  className?: string;
}

const DEFAULT_ITEMS: NavbarDockItem[] = [
  { label: "Home", href: "#home", icon: Home },
  { label: "Features", href: "#features", icon: Sparkles },
  { label: "Integrations", href: "#integrations", icon: LayoutGrid },
  { label: "Pricing", href: "#pricing", icon: Tag },
  { label: "Contact", href: "#contact", icon: MessageCircle },
];

/** Floating bottom dock (macOS-style): glass pill of icon buttons that magnify on hover, labels in tooltips, sliding active dot, gradient CTA. */
export function NavbarDock({
  items = DEFAULT_ITEMS,
  activeHref = "#home",
  cta = { label: "Try free", href: "#signup" },
  position = "fixed",
  className,
}: NavbarDockProps) {
  const reduce = useReducedMotion();
  const [hover, setHover] = useState<number | null>(null);

  const scale = (i: number) => {
    if (reduce || hover === null) return 1;
    const d = Math.abs(hover - i);
    return d === 0 ? 1.35 : d === 1 ? 1.12 : 1;
  };

  return (
    <nav
      aria-label="Main"
      className={cn(position === "fixed" ? "fixed inset-x-0 bottom-5 z-40" : "relative", "flex justify-center px-4 text-da-fg", className)}
    >
      <ul
        onMouseLeave={() => setHover(null)}
        className="da-stroke flex items-end gap-1 rounded-da-pill bg-da-surface p-2 shadow-da-lg backdrop-blur-da backdrop-saturate-150"
      >
        {items.map((it, i) => {
          const active = it.href === activeHref;
          return (
            <li key={it.href} className="relative">
              <motion.a
                href={it.href}
                aria-current={active ? "page" : undefined}
                onMouseEnter={() => setHover(i)}
                onFocus={() => setHover(i)}
                onBlur={() => setHover(null)}
                animate={{ scale: scale(i), y: scale(i) > 1 ? -4 * (scale(i) - 1) * 10 : 0 }}
                transition={{ type: "spring", stiffness: 400, damping: 22 }}
                className={cn(
                  "da-focus group relative grid size-11 origin-bottom place-items-center rounded-full",
                  active
                    ? "bg-gradient-to-br from-da-primary to-da-accent text-da-primary-fg shadow-da-sm"
                    : "bg-da-surface-2 text-da-muted-fg hover:text-da-fg",
                )}
              >
                <it.icon aria-hidden className="size-5" />
                <span className="sr-only">{it.label}</span>
                <span
                  aria-hidden
                  className="da-stroke pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 rounded-da-pill bg-da-surface px-2.5 py-1 text-xs font-medium whitespace-nowrap text-da-fg opacity-0 shadow-da-sm backdrop-blur-da transition-opacity duration-(--da-duration) group-hover:opacity-100 group-focus-visible:opacity-100"
                >
                  {it.label}
                </span>
              </motion.a>
              {active && <span aria-hidden className="absolute -bottom-1.5 left-1/2 size-1 -translate-x-1/2 rounded-full bg-da-fg" />}
            </li>
          );
        })}
        <li className="ml-1 border-l border-da-border-strong pl-2">
          <a
            href={cta.href}
            className="da-focus da-transition inline-flex h-11 items-center rounded-da-pill bg-da-fg px-4 text-sm font-semibold whitespace-nowrap text-da-bg hover:-translate-y-0.5"
          >
            {cta.label}
          </a>
        </li>
      </ul>
    </nav>
  );
}

export default NavbarDock;