"use client"

import { useState, useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { Menu, X } from 'lucide-react'

const navLinks = [
  { href: '/', label: 'HOME' },
  { href: '/about', label: 'ABOUT' },
  { href: '/registration', label: 'REGISTRATION' },
  { href: '/my-race', label: 'MY RACE' },
  { href: '/race-info', label: 'RACE INFO' },
  { href: '/sponsors', label: 'SPONSORS' },
  { href: '/results', label: 'RACE RESULTS' },
  { href: '/prize-money', label: 'PRIZE MONEY' },
]

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

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

  return (
    <>
      <nav 
        className={`fixed top-0 left-0 right-0 z-50 h-20 transition-all duration-300 ${
          isScrolled 
            ? 'bg-white shadow-[0_2px_12px_rgba(0,0,0,0.08)]' 
            : 'bg-transparent'
        }`}
      >
        <div className="max-w-7xl mx-auto h-full px-6 flex items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex-shrink-0">
            <Image
              src={isScrolled 
                ? "https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2024/01/10-mil-marathon-logo-600x553-1.png"
                : "https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2024/01/marathon-logo-600x553-1.png"
              }
              alt="10 Million Trees Marathon Logo"
              width={78}
              height={72}
              className="h-[72px] w-auto"
              priority
            />
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden lg:flex items-center gap-6 xl:gap-8">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className={`font-[family-name:var(--font-raleway)] font-bold text-[13px] uppercase tracking-[0.06em] transition-colors hover:text-[#F0C000] ${
                  isScrolled ? 'text-[#111518]' : 'text-white'
                }`}
              >
                {link.label}
              </Link>
            ))}
          </div>

          {/* Register Button - Desktop */}
          <Link
            href="/registration"
            className="hidden lg:flex items-center justify-center h-[52px] px-7 bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#3BB34A] hover:text-white transition-colors duration-200"
          >
            Register Now
          </Link>

          {/* Mobile Menu Button */}
          <button
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            className={`lg:hidden p-2 ${isScrolled ? 'text-[#111518]' : 'text-white'}`}
            aria-label="Toggle menu"
          >
            {isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
          </button>
        </div>
      </nav>

      {/* Mobile Menu Drawer */}
      <div 
        className={`fixed inset-0 z-40 lg:hidden transition-opacity duration-300 ${
          isMobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
        }`}
      >
        <div 
          className="absolute inset-0 bg-black/50"
          onClick={() => setIsMobileMenuOpen(false)}
        />
        <div 
          className={`absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-[#006838] flex flex-col transform transition-transform duration-300 ${
            isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'
          }`}
        >
          <div className="h-20 flex items-center justify-end px-6">
            <button
              onClick={() => setIsMobileMenuOpen(false)}
              className="text-white p-2"
              aria-label="Close menu"
            >
              <X size={28} />
            </button>
          </div>
          
          <div className="flex-1 flex flex-col px-6 pt-4">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                onClick={() => setIsMobileMenuOpen(false)}
                className="font-[family-name:var(--font-raleway)] font-bold text-[20px] text-white py-3 min-h-[48px] flex items-center hover:text-[#F0C000] transition-colors"
              >
                {link.label}
              </Link>
            ))}
          </div>

          <div className="p-6">
            <Link
              href="/registration"
              onClick={() => setIsMobileMenuOpen(false)}
              className="flex items-center justify-center w-full h-14 bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#3BB34A] hover:text-white transition-colors"
            >
              Register Now
            </Link>
          </div>
        </div>
      </div>
    </>
  )
}