sass-mohfarawati/components/layout/site-dock.tsx

"use client";

import { motion, useReducedMotion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLocale, useTranslations } from "next-intl";
import { useState } from "react";

import { FloatingControls } from "@/components/layout/floating-controls";
import { Dock, DockIcon } from "@/components/ui/dock";
import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
import { cn } from "@/lib/utils";

type SiteDockProps = {
  defaultLocale: AppLocale;
  /**
   * Server-computed via `isSuperAdmin()` in the parent layout. This client
   * component only decides whether to *render* the Admin shortcut — it performs
   * no auth check and grants no access; the real guard lives server-side on
   * each admin page/action.
   */
  isSuperAdmin?: boolean;
};

type NavKey = "about" | "portfolio" | "products" | "contact";

type NavItem = {
  key: NavKey;
  path: string;
  /** Icon file under /public. Swap these for real macOS app icons anytime. */
  icon: string;
  disabled?: boolean;
};

// "Home" is intentionally omitted — the logo (first dock icon) is the home link.
const navItems: NavItem[] = [
  { key: "about", path: "/about", icon: "/dock/about.svg" },
  { key: "portfolio", path: "/portfolio", icon: "/dock/portfolio.svg" },
  { key: "products", path: "/products", icon: "/dock/products.svg", disabled: true },
  { key: "contact", path: "/contact", icon: "/dock/contact.svg" },
];

function isNavItemActive(currentPath: string, itemPath: string) {
  if (itemPath === "/") {
    return currentPath === "/";
  }
  return currentPath === itemPath || currentPath.startsWith(`${itemPath}/`);
}

export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps) {
  const locale = useLocale();
  const pathname = usePathname();
  const t = useTranslations("navigation");
  const reducedMotion = useReducedMotion();
  const [bouncing, setBouncing] = useState<string | null>(null);

  const currentPath = stripLocalePrefix(pathname);
  const homeHref = getLocalizedPath(locale, "/", defaultLocale);

  // macOS-style launch hop on click.
  const bounceProps = (id: string) =>
    reducedMotion
      ? {}
      : {
          onClick: () => setBouncing(id),
          animate: bouncing === id ? { y: [0, -18, 0, -6, 0] } : { y: 0 },
          transition: { duration: 0.5, ease: "easeOut" as const },
          onAnimationComplete: () => setBouncing((cur) => (cur === id ? null : cur)),
        };

  return (
    <>
      {/* ===== Bottom dock — primary navigation ===== */}
      <div
        className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
        style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
      >
        <Dock
          direction="bottom"
          iconSize={50}
          iconMagnification={92}
          iconDistance={150}
          className="pointer-events-auto h-[66px] gap-3 border-border/60 bg-background/70"
        >
          {/* ── Logo (fixed src → no refresh flash) ── */}
          <DockIcon className="group relative overflow-visible">
            <Link
              href={homeHref}
              aria-label="mohfarawati — Home"
              className="flex h-full w-full items-center justify-center"
            >
              <motion.span
                className="flex h-full w-full items-center justify-center overflow-hidden rounded-[22%] bg-white ring-1 ring-black/10"
                {...bounceProps("logo")}
              >
                <Image
                  src="/logos/light-primary.svg"
                  alt="mohfarawati"
                  width={104}
                  height={104}
                  sizes="104px"
                  priority
                  className="h-full w-full object-contain"
                />
              </motion.span>
            </Link>
            <DockTip label="mohfarawati" />
          </DockIcon>

          <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />

          {/* ── Pages (icon art carries its own squircle shape) ── */}
          {navItems.map(({ key, path, icon: iconSrc, disabled }) => {
            const itemPath = path || "/";
            const isActive = isNavItemActive(currentPath, itemPath);
            const label = t(key);

            const icon = (
              <motion.span
                className="flex h-full w-full items-center justify-center"
                {...(disabled ? {} : bounceProps(key))}
              >
                <Image
                  src={iconSrc}
                  alt={label}
                  width={104}
                  height={104}
                  sizes="104px"
                  className={cn("h-full w-full object-contain", disabled && "opacity-55")}
                />
              </motion.span>
            );

            return (
              <DockIcon key={key} className="group relative overflow-visible">
                {disabled ? (
                  <span
                    aria-disabled="true"
                    className="flex h-full w-full cursor-not-allowed items-center justify-center"
                  >
                    {icon}
                  </span>
                ) : (
                  <Link
                    href={getLocalizedPath(locale, itemPath, defaultLocale)}
                    aria-label={label}
                    aria-current={isActive ? "page" : undefined}
                    className="flex h-full w-full items-center justify-center"
                  >
                    {icon}
                  </Link>
                )}

                {/* macOS running indicator */}
                {isActive ? (
                  <span
                    aria-hidden
                    className="pointer-events-none absolute -bottom-[7px] left-1/2 h-[5px] w-[5px] -translate-x-1/2 rounded-full bg-foreground/70"
                  />
                ) : null}

                <DockTip label={label} soon={disabled ? t("soon") : undefined} />
              </DockIcon>
            );
          })}
        </Dock>
      </div>

      {/* ===== Corner controls — theme / language / sound / admin (fan out) ===== */}
      <FloatingControls locale={locale} defaultLocale={defaultLocale} isSuperAdmin={isSuperAdmin} />
    </>
  );
}

function DockTip({ label, soon }: { label: string; soon?: string }) {
  return (
    <span
      role="tooltip"
      className="pointer-events-none absolute bottom-[calc(100%+0.85rem)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-lg border border-border/60 bg-background/90 px-3 py-1.5 text-sm font-semibold text-foreground opacity-0 backdrop-blur-chrome transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
    >
      {label}
      {soon ? <span className="ms-1.5 text-xs tracking-wide text-primary">{soon}</span> : null}
    </span>
  );
}