'use client';

import { motion } from 'framer-motion';
import { Menu, X } from 'lucide-react';
import { useState } from 'react';

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

  const navLinks = [
    { name: 'Research', href: '#research' },
    { name: 'Projects', href: '#projects' },
    { name: 'About', href: '#about' },
    { name: 'Contact', href: '#contact' },
  ];

  return (
    <motion.nav
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
      className="fixed top-0 left-0 w-full z-50 px-6 py-6 flex justify-between items-center mix-blend-difference"
    >
      <a href="/" className="font-serif text-2xl font-bold tracking-tighter hover:opacity-70 transition-opacity">
        A.I.
      </a>

      {/* Desktop Nav */}
      <div className="hidden md:flex items-center gap-8 font-mono text-sm uppercase tracking-widest">
        {navLinks.map((link) => (
          <a
            key={link.name}
            href={link.href}
            className="relative group overflow-hidden"
          >
            <span className="block transition-transform duration-300 group-hover:-translate-y-full">
              {link.name}
            </span>
            <span className="absolute top-0 left-0 block translate-y-full transition-transform duration-300 group-hover:translate-y-0 text-gray-400">
              {link.name}
            </span>
          </a>
        ))}
        <a 
          href="https://huggingface.co/spaces/akhaliq/anycoder" 
          target="_blank" 
          rel="noopener noreferrer"
          className="text-xs border-b border-white/30 pb-0.5 hover:border-white transition-colors"
        >
          Built with anycoder
        </a>
      </div>

      {/* Mobile Toggle */}
      <button 
        className="md:hidden"
        onClick={() => setIsOpen(!isOpen)}
      >
        {isOpen ? <X /> : <Menu />}
      </button>

      {/* Mobile Menu */}
      {isOpen && (
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="absolute top-full left-0 w-full bg-void/90 backdrop-blur-xl border-b border-white/10 p-6 flex flex-col gap-4 md:hidden"
        >
          {navLinks.map((link) => (
            <a
              key={link.name}
              href={link.href}
              className="font-mono text-lg uppercase tracking-widest hover:text-gray-400"
              onClick={() => setIsOpen(false)}
            >
              {link.name}
            </a>
          ))}
          <a 
            href="https://huggingface.co/spaces/akhaliq/anycoder" 
            target="_blank" 
            rel="noopener noreferrer"
            className="text-xs border-b border-white/30 pb-0.5 w-fit"
          >
            Built with anycoder
          </a>
        </motion.div>
      )}
    </motion.nav>
  );
}