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

const links = [
  { href: "/", label: "Home" },
  { href: "/companions", label: "Companions" },
  { href: "/services", label: "Services" },
  { href: "/reviews", label: "Reviews" },
  { href: "/safety", label: "Safety" },
  { href: "/about", label: "About" },
  { href: "/contact", label: "Contact" },
];

export default function Navbar() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [location] = useLocation();

  useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, []);

  useEffect(() => setOpen(false), [location]);

  return (
    <header
      className="fixed top-0 left-0 right-0 z-50 transition-all duration-500"
      style={{
        background: scrolled
          ? "rgba(10,10,10,0.97)"
          : "transparent",
        borderBottom: scrolled ? "1px solid rgba(201,169,110,0.15)" : "none",
        backdropFilter: scrolled ? "blur(12px)" : "none",
      }}
    >
      <div className="max-w-7xl mx-auto px-6 lg:px-12 flex items-center justify-between h-20">
        <Link href="/">
          <span className="flex items-center gap-3 cursor-pointer select-none">
            <span className="text-2xl tracking-[0.25em] font-serif text-primary">
              ÉLITE
            </span>
            <span className="w-px h-5 bg-primary/40" />
            <span className="text-xs tracking-[0.35em] text-muted-foreground uppercase">
              Companions
            </span>
          </span>
        </Link>

        <nav className="hidden lg:flex items-center gap-8">
          {links.map(({ href, label }) => (
            <Link key={href} href={href}>
              <span
                className="text-xs tracking-[0.2em] uppercase cursor-pointer transition-colors duration-200"
                style={{
                  color: location === href ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))",
                }}
                onMouseEnter={e => (e.currentTarget.style.color = "hsl(var(--primary))")}
                onMouseLeave={e =>
                  (e.currentTarget.style.color =
                    location === href ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))")
                }
              >
                {label}
              </span>
            </Link>
          ))}
          <Link href="/contact">
            <span className="ml-2 px-5 py-2 text-xs tracking-[0.2em] uppercase border border-primary/60 text-primary hover:bg-primary hover:text-background transition-all duration-300 cursor-pointer">
              Inquire
            </span>
          </Link>
        </nav>

        <button
          className="lg:hidden text-primary p-2"
          onClick={() => setOpen(v => !v)}
          aria-label="Toggle menu"
        >
          {open ? <X size={22} /> : <Menu size={22} />}
        </button>
      </div>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            className="lg:hidden overflow-hidden"
            style={{ background: "rgba(10,10,10,0.98)", borderTop: "1px solid rgba(201,169,110,0.1)" }}
          >
            <div className="flex flex-col py-6 px-8 gap-6">
              {links.map(({ href, label }) => (
                <Link key={href} href={href}>
                  <span className="text-sm tracking-[0.2em] uppercase text-muted-foreground hover:text-primary transition-colors cursor-pointer">
                    {label}
                  </span>
                </Link>
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  );
}
