"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Menu, X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";

const NAV_LINKS = [
  { name: "Hizmetler", href: "/hizmetler" },
  { name: "Filomuz", href: "/filomuz" },
  { name: "Hakkımızda", href: "/hakkimizda" },
  { name: "İletişim", href: "/iletisim" },
];

export function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <nav
      className={cn(
        "fixed top-0 left-0 w-full z-[100] flex justify-between items-center px-6 md:px-12 py-6 transition-all duration-300",
        isScrolled
          ? "bg-surface-container-lowest/80 backdrop-blur-xl border-b border-outline-variant/15"
          : "bg-transparent"
      )}
    >
      {/* Logo */}
      <Link href="/" className="text-xl md:text-2xl font-black tracking-tighter text-primary">
        AYDOĞAN <span className="text-white">NAKLİYAT</span>
      </Link>

      {/* Desktop Links */}
      <div className="hidden md:flex items-center gap-12">
        {NAV_LINKS.map((link) => (
          <Link
            key={link.name}
            href={link.href}
            className="font-headline uppercase tracking-widest text-xs font-bold text-white/60 hover:text-primary transition-all duration-300"
          >
            {link.name}
          </Link>
        ))}
      </div>

      {/* CTA Button */}
      <div className="hidden md:flex items-center gap-4">
        <button className="bg-primary-container text-on-primary px-8 py-3 font-headline font-bold uppercase tracking-widest text-xs hover:brightness-110 active:scale-95 transition-all rounded-none ring-offset-2 focus:ring-2 focus:ring-primary">
          Teklif Alın
        </button>
      </div>

      {/* Mobile Menu Toggle */}
      <button
        className="md:hidden text-white focus:outline-none p-2"
        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        aria-label="Menu toggle"
      >
        {mobileMenuOpen ? <X size={32} /> : <Menu size={32} />}
      </button>

      {/* Mobile Menu Overlay */}
      <AnimatePresence>
        {mobileMenuOpen && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="fixed inset-0 bg-black/60 backdrop-blur-md md:hidden z-[-1]"
              onClick={() => setMobileMenuOpen(false)}
            />
            <motion.div
              initial={{ x: "100%" }}
              animate={{ x: 0 }}
              exit={{ x: "100%" }}
              transition={{ type: "spring", damping: 25, stiffness: 200 }}
              className="fixed top-0 right-0 h-screen w-[85%] bg-surface-container-highest flex flex-col p-12 md:hidden shadow-2xl z-[101]"
            >
              <div className="flex justify-between items-center mb-16">
                <span className="font-headline font-black text-xl text-primary">MENÜ</span>
                <button onClick={() => setMobileMenuOpen(false)}>
                  <X size={32} className="text-white" />
                </button>
              </div>
              <div className="flex flex-col gap-10">
                {NAV_LINKS.map((link) => (
                  <Link
                    key={link.name}
                    href={link.href}
                    className="font-headline text-3xl font-bold text-white uppercase tracking-tighter hover:text-primary transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {link.name}
                  </Link>
                ))}
                <button className="mt-10 bg-primary-container text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none transition-all">
                  Hızlı Teklif
                </button>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </nav>
  );
}