"use client";

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

export default function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

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

  const navLinks = [
    { name: "Hakkımızda", href: "#about" },
    { name: "Etkinlikler", href: "#events" },
    { name: "Kokteyller", href: "#cocktails" },
    { name: "Galeri", href: "#gallery" },
    { name: "Rezervasyon", href: "#contact" },
  ];

  return (
    <nav
      className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
        isScrolled ? "bg-primary/95 backdrop-blur-md py-4 shadow-lg border-b border-white/5" : "bg-transparent py-6"
      }`}
    >
      <div className="container mx-auto px-6 md:px-12 flex justify-between items-center">
        {/* Left Side Links (Desktop) */}
        <div className="hidden md:flex space-x-8 w-1/3 justify-start">
          {navLinks.slice(0, 2).map((link) => (
            <a
              key={link.name}
              href={link.href}
              className="text-text-main/80 hover:text-accent1 transition-colors uppercase tracking-widest text-xs font-semibold"
            >
              {link.name}
            </a>
          ))}
        </div>

        {/* Logo (Centered) */}
        <div className="w-1/3 flex justify-center text-center">
          <a href="#" className="flex flex-col items-center group">
            <span className="font-serif text-3xl md:text-4xl text-text-main group-hover:text-accent1 transition-colors border-2 border-transparent group-hover:border-accent1 rounded-full px-6 py-2">
              LUNA
            </span>
            <span className="text-[10px] uppercase tracking-[0.3em] text-accent1 mt-1 font-light opacity-80">
              Cocktail and More
            </span>
          </a>
        </div>

        {/* Right Side Links (Desktop) */}
        <div className="hidden md:flex space-x-8 w-1/3 justify-end items-center">
          {navLinks.slice(2, 4).map((link) => (
            <a
              key={link.name}
              href={link.href}
              className="text-text-main/80 hover:text-accent1 transition-colors uppercase tracking-widest text-xs font-semibold"
            >
              {link.name}
            </a>
          ))}
          <a
            href="#contact"
            className="bg-accent1 text-primary px-6 py-2 uppercase tracking-widest text-xs font-bold hover:bg-accent2 transition-colors"
          >
            Rezervasyon
          </a>
        </div>

        {/* Mobile Menu Toggle */}
        <div className="md:hidden w-1/3 flex justify-end">
          <button
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            className="text-text-main hover:text-accent1 focus:outline-none transition-colors"
          >
            {isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="absolute top-full left-0 w-full bg-primary/95 backdrop-blur-lg border-t border-white/10 shadow-2xl py-8 flex flex-col items-center space-y-6 md:hidden"
          >
            {navLinks.map((link) => (
              <a
                key={link.name}
                href={link.href}
                onClick={() => setIsMobileMenuOpen(false)}
                className="text-text-main hover:text-accent1 text-lg uppercase tracking-widest font-medium transition-colors"
              >
                {link.name}
              </a>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}
