"use client";

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

const navLinks = [
  { href: "/gallery", label: "GALLERY" },
  { href: "/submit", label: "SUBMIT ART" },
  { href: "/about", label: "ABOUT" },
  { href: "/rules", label: "RULES" },
  { href: "/faq", label: "FAQ" },
  { href: "/contact", label: "CONTACT" },
];

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

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-zinc-950/90 backdrop-blur-md border-b border-zinc-800">
      {/* Announcement Bar */}
      <div className="bg-lime-400 text-black overflow-hidden">
        <div className="whitespace-nowrap py-2 text-xs tracking-widest flex">

          {/* Track */}
          <div className="animate-marquee flex">
            {[...Array(10)].map((_, i) => (
              <span key={`first-${i}`} className="mx-8 shrink-0">
                ✦ OPEN FOR SUBMISSIONS
              </span>
            ))}

            {/* Duplicate for seamless loop */}
            {[...Array(10)].map((_, i) => (
              <span key={`second-${i}`} className="mx-8 shrink-0">
                ✦ OPEN FOR SUBMISSIONS
              </span>
            ))}
          </div>

        </div>
      </div>

      {/* Main Navbar */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2 group">
            <Diamond className="w-6 h-6 text-lime-400 group-hover:rotate-12 transition-transform" />
            <span className="text-xl font-bold tracking-tight text-white">ARTSPLASH</span>
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden lg:flex items-center gap-8">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="text-sm font-medium tracking-wide text-zinc-300 hover:text-white transition-colors relative group"
              >
                {link.label}
                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-lime-400 group-hover:w-full transition-all duration-300" />
              </Link>
            ))}
          </div>

          {/* CTA Button */}
          <div className="hidden lg:block">
            <Link
              href="/register"
              className="bg-lime-400 text-black px-6 py-2.5 text-sm font-bold tracking-wide hover:bg-lime-300 transition-colors rounded-full"
            >
              REGISTER NOW
            </Link>
          </div>

          {/* Mobile Menu Button */}
          <button
            onClick={() => setIsOpen(!isOpen)}
            className="lg:hidden p-2 hover:bg-zinc-800 rounded-lg transition-colors text-white"
            aria-label="Toggle menu"
          >
            {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="lg:hidden bg-zinc-950 border-t border-zinc-800"
          >
            <div className="px-4 py-6 space-y-4">
              {navLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  onClick={() => setIsOpen(false)}
                  className="block text-lg font-medium text-zinc-300 hover:text-white hover:pl-2 transition-all"
                >
                  {link.label}
                </Link>
              ))}
              <Link
                href="/register"
                onClick={() => setIsOpen(false)}
                className="block w-full text-center bg-lime-400 text-black px-6 py-3 text-sm font-bold tracking-wide hover:bg-lime-300 transition-colors rounded-full mt-6"
              >
                REGISTER NOW
              </Link>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}