import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Menu, X } from "lucide-react";

const links = [
  { label: "The Land", href: "#land" },
  { label: "Pathways", href: "#vision" },
  { label: "Gallery", href: "#gallery" },
  { label: "Presentation", href: "#video" },
  { label: "Location", href: "#location" },
  { label: "Seasons", href: "#seasonal" },
  { label: "Market", href: "#market" },
  { label: "Represented By", href: "#team" },
  { label: "Inquiries", href: "#inquiry" },
];

export function Nav() {
  const [visible, setVisible] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > window.innerHeight * 0.6);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <AnimatePresence>
        {visible && (
          <motion.header
            initial={{ opacity: 0, y: -12 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -12 }}
            transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
            className="fixed inset-x-0 top-0 z-50 backdrop-blur-md bg-paper/80 border-b border-line-light"
          >
            <div className="mx-auto flex max-w-[1440px] items-center justify-between px-6 md:px-12 h-16">
              <a href="#top" className="label text-ink transition-opacity hover:opacity-60">
                The Private Gem
              </a>
              <nav className="hidden lg:flex items-center gap-7">
                {links.map((l) => (
                  <a
                    key={l.href}
                    href={l.href}
                    className="label text-stone-600 transition-all duration-300 hover:text-ink hover:-translate-y-0.5"
                  >
                    {l.label}
                  </a>
                ))}
              </nav>
              <button
                aria-label="Open menu"
                onClick={() => setOpen(true)}
                className="lg:hidden min-h-12 min-w-12 -mr-3 flex items-center justify-center text-ink"
              >
                <Menu className="h-5 w-5" />
              </button>
            </div>
          </motion.header>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.4 }}
            className="fixed inset-0 z-[60] bg-ink text-paper overflow-y-auto"
          >
            <div className="flex h-16 items-center justify-between px-6">
              <span className="label">The Private Gem</span>
              <button
                aria-label="Close menu"
                onClick={() => setOpen(false)}
                className="min-h-12 min-w-12 -mr-3 flex items-center justify-center"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            <nav className="flex flex-col gap-6 px-6 pt-12 pb-16">
              {links.map((l, i) => (
                <motion.a
                  key={l.href}
                  href={l.href}
                  onClick={() => setOpen(false)}
                  initial={{ opacity: 0, y: 16 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.1 + i * 0.04, duration: 0.6 }}
                  className="display text-4xl text-paper"
                >
                  {l.label}
                </motion.a>
              ))}
            </nav>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}
