"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import DynamicLogo from "./DynamicLogo";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, X } from "lucide-react";

const NAV_LINKS = [
    { label: "Ana Sayfa", href: "/" },
    { label: "Çalışmalar", href: "/works" },
    { label: "Hizmetler", href: "/services" },
    { label: "Partnerler", href: "/partners" },
    { label: "Hakkımızda", href: "/about" },
    { label: "İletişim", href: "/contact" },
];

export default function Navbar() {
    const [isOpen, setIsOpen] = useState(false);

    // Body scroll lock
    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = "hidden";
        } else {
            document.body.style.overflow = "unset";
        }
        return () => {
            document.body.style.overflow = "unset";
        };
    }, [isOpen]);

    return (
        <>
            <motion.nav
                initial={{ y: -100 }}
                animate={{ y: 0 }}
                transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
                className="fixed top-0 left-0 w-full z-50 bg-[#f5f5f0]/90 backdrop-blur-md border-b border-black/10"
            >
                <div className="  flex items-center justify-between  py-2 md:py-5">
                    {/* Logo */}
                    <Link
                        href="/"
                        className="flex items-center gap-3 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm z-50"
                        aria-label="Muğla Dijital - Ana Sayfaya Dön"
                        onClick={() => setIsOpen(false)}
                    >
                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ delay: 0.5 }}
                            className="relative md:w-36 w-18 h-7 md:h-10"
                        >
                            <DynamicLogo
                                src="/logo.png"
                                color="black"
                                width="100%"
                                height="100%"
                                size="contain"
                            />
                        </motion.div>
                    </Link>

                    {/* Center Nav - Desktop */}
                    <div className="hidden lg:flex items-center">
                        {NAV_LINKS.map((item, idx) => (
                            <div key={item.label} className="flex items-center">
                                {/* Diagonal separator */}
                                <motion.div
                                    initial={{ opacity: 0, scaleY: 0 }}
                                    animate={{ opacity: 1, scaleY: 1 }}
                                    transition={{ delay: 0.2 + idx * 0.1 }}
                                    className="w-16 h-10 relative mx-1"
                                >
                                    <div className="absolute inset-0 flex items-center justify-center">
                                        <div className="w-px h-14 bg-black/10 rotate-[-25deg]" />
                                    </div>
                                </motion.div>
                                <motion.div
                                    initial={{ opacity: 0, y: 10 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    transition={{ delay: 0.3 + idx * 0.1 }}
                                >
                                    <Link
                                        href={item.href}
                                        className="text-[11px] tracking-[0.15em] uppercase text-black/70 hover:text-black transition-colors nav-link-hover px-3 py-2 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm"
                                    >
                                        {item.label}
                                    </Link>
                                </motion.div>
                            </div>
                        ))}
                    </div>

                    {/* Right - Mobile Toggle & Brand */}
                    <div className="flex items-center gap-0 md:gap-6">
                        <motion.span
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ delay: 1 }}
                            className="hidden md:block text-[13px] font-bold tracking-[0.1em] uppercase text-black"
                            aria-hidden="true"
                        >
                            Muğla Dijital
                        </motion.span>

                        <button
                            onClick={() => setIsOpen(!isOpen)}
                            className="lg:hidden p-2 flex items-center justify-center text-black/70 hover:text-black transition-colors z-50"
                            aria-label={isOpen ? "Menüyü Kapat" : "Menüyü Aç"}
                        >
                            {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
                        </button>
                    </div>
                </div>
            </motion.nav>

            {/* Mobile Menu Overlay */}
            <AnimatePresence>
                {isOpen && (
                    <motion.div
                        initial={{ opacity: 0, x: "100%" }}
                        animate={{ opacity: 1, x: 0 }}
                        exit={{ opacity: 0, x: "100%" }}
                        transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
                        className="fixed inset-0 z-40 bg-[#f5f5f0] flex flex-col justify-center px-8 md:px-16"
                    >
                        <div className="flex flex-col gap-8">
                            {NAV_LINKS.map((item, idx) => (
                                <motion.div
                                    key={item.label}
                                    initial={{ opacity: 0, y: 20 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    transition={{ delay: 0.1 + idx * 0.05 }}
                                >
                                    <Link
                                        href={item.href}
                                        onClick={() => setIsOpen(false)}
                                        className="text-4xl md:text-6xl font-bold tracking-tighter text-black/90 hover:text-black transition-all hover:pl-4"
                                        style={{ fontFamily: "var(--font-martian)" }}
                                    >
                                        {item.label}
                                    </Link>
                                </motion.div>
                            ))}
                        </div>


                    </motion.div>
                )}
            </AnimatePresence>
        </>
    );
}