"use client";

import Link from "next/link";
import DynamicLogo from "./DynamicLogo";
import { motion } from "framer-motion";

export default function Navbar() {
    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 px-6 md:px-12 py-5">
                {/* Logo */}
                <Link href="/" className="flex items-center gap-3">
                    <motion.div 
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ delay: 0.5 }}
                        className="relative w-36 h-10"
                    >
                        <DynamicLogo
                            src="/logo.png"
                            color="black"
                            width="100%"
                            height="100%"
                            size="contain"
                        />
                    </motion.div>
                </Link>

                {/* Center Nav */}
                <div className="hidden lg:flex items-center">
                    {[
                        { label: "Çalışmalar", href: "/works" },
                        { label: "Hizmetler", href: "/services" },
                        { label: "Partnerler", href: "/partners" },
                        { label: "Hakkımızda", href: "/about" },
                        { label: "İletişim", href: "/contact" },
                    ].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/60 hover:text-black transition-colors nav-link-hover px-3 py-2"
                                >
                                    {item.label}
                                </Link>
                            </motion.div>
                        </div>
                    ))}
                </div>

                {/* Right - Brand name */}
                <motion.span 
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ delay: 1 }}
                    className="text-[13px] font-bold tracking-[0.1em] uppercase text-black"
                >
                    Muğla Dijital
                </motion.span>
            </div>
        </motion.nav>
    );
}