import { useState, useEffect } from 'react'
import { Menu, X } from 'lucide-react'

const Header = () => {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

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

  const navLinks = [
    { href: '#about', label: 'About' },
    { href: '#projects', label: 'Projects' },
    { href: '#services', label: 'Services' },
    { href: '#contact', label: 'Contact' },
  ]

  return (
    <header 
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled ? 'bg-margins-black/90 backdrop-blur-md py-4' : 'bg-transparent py-6'
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between">
          <a href="#" className="text-2xl font-light tracking-wider uppercase">
            Margins
          </a>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            {navLinks.map((link) => (
              <a
                key={link.href}
                href={link.href}
                className="text-sm uppercase tracking-widest text-margins-gray hover:text-white transition-colors duration-300"
              >
                {link.label}
              </a>
            ))}
            <a 
              href="https://huggingface.co/spaces/akhaliq/anycoder" 
              target="_blank" 
              rel="noopener noreferrer"
              className="text-xs uppercase tracking-widest text-margins-gray hover:text-white transition-colors duration-300 border-l border-margins-gray pl-8"
            >
              Built with anycoder
            </a>
          </nav>

          {/* Mobile Menu Button */}
          <button 
            className="md:hidden text-white p-2"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            aria-label="Toggle menu"
          >
            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>

      {/* Mobile Navigation */}
      {isMobileMenuOpen && (
        <div className="md:hidden absolute top-full left-0 right-0 bg-margins-black border-t border-margins-dark">
          <nav className="flex flex-col py-4">
            {navLinks.map((link) => (
              <a
                key={link.href}
                href={link.href}
                className="px-6 py-3 text-sm uppercase tracking-widest text-margins-gray hover:text-white hover:bg-margins-dark transition-colors"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                {link.label}
              </a>
            ))}
            <a 
              href="https://huggingface.co/spaces/akhaliq/anycoder" 
              target="_blank" 
              rel="noopener noreferrer"
              className="px-6 py-3 text-xs uppercase tracking-widest text-margins-gray hover:text-white hover:bg-margins-dark transition-colors"
            >
              Built with anycoder
            </a>
          </nav>
        </div>
      )}
    </header>
  )
}

export default Header