"use client";

import { Menu, X } from "lucide-react";
import {
  AnimatePresence,
  motion,
  useMotionValueEvent,
  useReducedMotion,
  useScroll,
  type Variants,
} from "motion/react";
import { useCallback, useEffect, useRef, useState } from "react";
import useMeasure from "react-use-measure";
import { cn } from "@/lib/utils";

const APPLE_EASE = [0.22, 1, 0.36, 1] as const;

const NAV_LINKS = [
  { label: "Features", href: "#features" },
  { label: "Pricing", href: "#pricing" },
  { label: "About", href: "#about" },
  { label: "Blog", href: "#blog" },
] as const;

const logoVariants: Variants = {
  hidden: { opacity: 0, x: -8, filter: "blur(6px)" },
  visible: {
    opacity: 1,
    x: 0,
    filter: "blur(0px)",
    transition: { duration: 0.5, ease: APPLE_EASE },
  },
};

const linkContainerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.06, delayChildren: 0.15 },
  },
};

const linkItemVariants: Variants = {
  hidden: { opacity: 0, y: 10, filter: "blur(6px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.45, ease: APPLE_EASE },
  },
};

const actionsVariants: Variants = {
  hidden: { opacity: 0, x: 8, filter: "blur(6px)" },
  visible: {
    opacity: 1,
    x: 0,
    filter: "blur(0px)",
    transition: { duration: 0.5, delay: 0.4, ease: APPLE_EASE },
  },
};

const mobileMenuVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.05, delayChildren: 0.05 },
  },
  exit: { opacity: 0, transition: { duration: 0.15 } },
};

const mobileLinkVariants: Variants = {
  hidden: { opacity: 0, y: 16 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.35, ease: APPLE_EASE },
  },
  exit: {
    opacity: 0,
    y: -8,
    transition: { duration: 0.2 },
  },
};

export function NavigationApple() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [activeLink, setActiveLink] = useState<string>(NAV_LINKS[0].href);
  const prefersReduced = useReducedMotion();
  const { scrollY } = useScroll();
  const navRef = useRef<HTMLElement>(null);
  const [mobileContentRef, { height: mobileHeight }] = useMeasure();

  useMotionValueEvent(scrollY, "change", (latest) => {
    setScrolled(latest > 20);
  });

  const closeMobile = useCallback(() => setMobileOpen(false), []);

  useEffect(() => {
    if (!mobileOpen) return;
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") closeMobile();
    };
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [mobileOpen, closeMobile]);

  useEffect(() => {
    if (!mobileOpen) return;
    const handleClick = (e: MouseEvent) => {
      if (navRef.current && !navRef.current.contains(e.target as Node)) {
        closeMobile();
      }
    };
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, [mobileOpen, closeMobile]);

  return (
    <motion.nav
      className="fixed top-0 right-0 left-0 z-50"
      initial={prefersReduced ? false : "hidden"}
      animate="visible"
      ref={navRef}
    >
      <div className="mx-auto max-w-5xl px-4 pt-3 sm:px-6">
        <motion.div
          animate={{
            backgroundColor: scrolled
              ? "hsl(var(--background) / 0.8)"
              : "hsl(var(--background) / 0)",
          }}
          className={cn(
            "rounded-full px-4 transition-[backdrop-filter,box-shadow] duration-300 sm:px-5",
            scrolled && [
              "backdrop-blur-xl",
              "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04)]",
              "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.08),0px_1px_2px_-1px_rgba(255,255,255,0.04),0px_2px_4px_0px_rgba(0,0,0,0.2)]",
            ],
          )}
          transition={{ duration: 0.4, ease: APPLE_EASE }}
        >
          {/* Desktop Bar */}
          <div className="flex h-14 items-center justify-between">
            {/* Logo */}
            <motion.a
              className="flex shrink-0 items-center gap-2"
              href="#"
              variants={logoVariants}
            >
              <div className="flex size-7 items-center justify-center rounded-lg bg-foreground">
                <span className="font-bold text-background text-xs">A</span>
              </div>
              <span className="font-semibold text-foreground tracking-tight">Acme</span>
            </motion.a>

            {/* Desktop Links */}
            <motion.div
              className="hidden items-center gap-1 md:flex"
              variants={linkContainerVariants}
            >
              {NAV_LINKS.map((link) => (
                <motion.a
                  className="relative rounded-full px-3.5 py-1.5 text-[14px] text-muted-foreground transition-colors duration-200 hover:text-foreground"
                  href={link.href}
                  key={link.href}
                  onClick={() => setActiveLink(link.href)}
                  variants={linkItemVariants}
                >
                  {activeLink === link.href && (
                    <motion.span
                      className="absolute inset-0 rounded-full bg-muted/60"
                      layoutId="nav-apple-active"
                      transition={{ type: "spring", bounce: 0.15, duration: 0.5 }}
                    />
                  )}
                  <span className="relative z-10">{link.label}</span>
                </motion.a>
              ))}
            </motion.div>

            {/* Desktop Actions */}
            <motion.div
              className="hidden items-center gap-2 md:flex"
              variants={actionsVariants}
            >
              <a
                className="rounded-full px-3.5 py-1.5 text-[14px] text-muted-foreground transition-colors duration-200 hover:text-foreground"
                href="#"
              >
                Sign in
              </a>
              <motion.a
                className="inline-flex items-center rounded-full bg-foreground px-4 py-1.5 text-[14px] font-medium text-background transition-shadow duration-300 hover:shadow-[0_8px_30px_rgb(0,0,0,0.12)] dark:hover:shadow-[0_8px_30px_rgb(255,255,255,0.08)]"
                href="#"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                Get Started
              </motion.a>
            </motion.div>

            {/* Mobile Toggle */}
            <motion.button
              aria-label={mobileOpen ? "Close menu" : "Open menu"}
              className="flex size-9 cursor-pointer items-center justify-center rounded-lg text-foreground md:hidden"
              onClick={() => setMobileOpen((prev) => !prev)}
              variants={actionsVariants}
              whileTap={{ scale: 0.95 }}
            >
              <AnimatePresence mode="popLayout" initial={false}>
                <motion.div
                  animate={{ opacity: 1, rotate: 0 }}
                  exit={{ opacity: 0, rotate: 90 }}
                  initial={{ opacity: 0, rotate: -90 }}
                  key={mobileOpen ? "close" : "open"}
                  transition={{ duration: 0.2 }}
                >
                  {mobileOpen ? <X className="size-5" /> : <Menu className="size-5" />}
                </motion.div>
              </AnimatePresence>
            </motion.button>
          </div>
        </motion.div>

        {/* Mobile Menu */}
        <AnimatePresence>
          {mobileOpen && (
            <motion.div
              animate={{ height: mobileHeight, opacity: 1 }}
              className="overflow-hidden md:hidden"
              exit={{ height: 0, opacity: 0 }}
              initial={{ height: 0, opacity: 0 }}
              transition={{ duration: 0.35, ease: APPLE_EASE }}
            >
              <div ref={mobileContentRef}>
                <motion.div
                  className={cn(
                    "mt-2 flex flex-col gap-1 rounded-2xl p-3",
                    "bg-background/90 backdrop-blur-xl",
                    "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_2px_4px_-1px_rgba(0,0,0,0.08),0px_4px_16px_0px_rgba(0,0,0,0.06)]",
                    "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.08),0px_2px_4px_-1px_rgba(255,255,255,0.04),0px_4px_16px_0px_rgba(0,0,0,0.25)]",
                  )}
                  animate="visible"
                  exit="exit"
                  initial="hidden"
                  variants={mobileMenuVariants}
                >
                  {NAV_LINKS.map((link) => (
                    <motion.a
                      className="rounded-xl px-4 py-2.5 text-[15px] text-foreground transition-colors hover:bg-muted/50"
                      href={link.href}
                      key={link.href}
                      onClick={closeMobile}
                      variants={mobileLinkVariants}
                    >
                      {link.label}
                    </motion.a>
                  ))}
                  <motion.div
                    className="mt-1 border-border/40 border-t pt-3"
                    variants={mobileLinkVariants}
                  >
                    <a
                      className="block rounded-xl px-4 py-2.5 text-[15px] text-muted-foreground transition-colors hover:text-foreground"
                      href="#"
                      onClick={closeMobile}
                    >
                      Sign in
                    </a>
                    <a
                      className="mt-1 block rounded-xl bg-foreground px-4 py-2.5 text-center text-[15px] font-medium text-background"
                      href="#"
                      onClick={closeMobile}
                    >
                      Get Started
                    </a>
                  </motion.div>
                </motion.div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </motion.nav>
  );
}
Marketing Navigation Apple

Marketing Navigation Apple
