import React, { useState, useEffect } from 'react';

const Header: React.FC = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { label: 'Home', href: '/home' },
    { label: 'Agents', href: '/#agents' },
    { label: 'Solutions', href: '/#solutions' },
    { label: 'Contact', href: '/#contact' }
  ];

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled
          ? 'bg-deep-forest/90 backdrop-blur-xl border-b-2 border-luxury-gold/40 shadow-luxury'
          : 'bg-deep-forest/20 backdrop-blur-md'
      }`}
    >
      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-20">
          {/* Logo */}
          <div className="flex-shrink-0 animate-fadeInLeft">
            <a
              href="/home"
              className="flex items-center space-x-3 group"
              aria-label="Pennyzo Web Home"
            >
              <div className="relative">
                <div className="w-10 h-10 bg-gradient-to-br from-luxury-gold to-bronze rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg">
                  <span className="text-deep-forest font-playfair text-xl font-bold">P</span>
                </div>
                <div className="absolute -top-1 -right-1 w-3 h-3 bg-luxury-gold rounded-full animate-pulse opacity-75"></div>
              </div>
              <span className="font-playfair text-2xl font-bold text-cream group-hover:text-luxury-gold transition-colors duration-300">
                Pennyzo Web
              </span>
            </a>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            {navLinks.map((link) => (
              <a
                key={link.label}
                href={link.href}
                className="relative font-montserrat font-medium text-cream hover:text-luxury-gold transition-all duration-300 group py-2 px-3 rounded-lg hover:bg-luxury-gold/10 backdrop-blur-sm border border-transparent hover:border-luxury-gold/30"
              >
                {link.label}
                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-luxury-gold transition-all duration-300 group-hover:w-full"></span>
              </a>
            ))}
            
            {/* CTA Button */}
            <a
              href="/login"
              className="min-w-[140px] bg-gradient-to-r from-luxury-gold to-brass text-deep-forest font-montserrat font-bold px-6 py-3 rounded-full hover:from-brass hover:to-bronze hover:scale-105 transition-all duration-300 shadow-luxury hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-luxury-gold/50 border border-luxury-gold/30"
            >
              Get Started
            </a>
          </div>

          {/* Mobile menu button */}
          <div className="md:hidden">
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="relative w-10 h-10 bg-deep-forest/50 backdrop-blur-sm border border-luxury-gold/20 rounded-lg flex items-center justify-center hover:bg-luxury-gold/10 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-luxury-gold/50"
              aria-label="Toggle navigation menu"
              aria-expanded={isMenuOpen}
            >
              <div className="w-6 h-6 relative">
                <span
                  className={`absolute block w-full h-0.5 bg-luxury-gold rounded transition-transform duration-300 ${
                    isMenuOpen ? 'top-3 rotate-45' : 'top-1'
                  }`}
                />
                <span
                  className={`absolute block w-full h-0.5 bg-luxury-gold rounded top-3 transition-opacity duration-300 ${
                    isMenuOpen ? 'opacity-0' : 'opacity-100'
                  }`}
                />
                <span
                  className={`absolute block w-full h-0.5 bg-luxury-gold rounded transition-transform duration-300 ${
                    isMenuOpen ? 'top-3 -rotate-45' : 'top-5'
                  }`}
                />
              </div>
            </button>
          </div>
        </div>

        {/* Mobile Navigation Menu */}
        <div
          className={`md:hidden transition-all duration-300 ${
            isMenuOpen
              ? 'max-h-64 opacity-100 border-t border-luxury-gold/20 mt-4 pt-4'
              : 'max-h-0 opacity-0 overflow-hidden'
          }`}
        >
          <div className="bg-gradient-to-br from-deep-forest/95 to-rich-brown/85 backdrop-blur-xl rounded-2xl p-6 space-y-4 shadow-2xl border border-luxury-gold/20">
            {navLinks.map((link, index) => (
              <a
                key={link.label}
                href={link.href}
                onClick={() => setIsMenuOpen(false)}
                className={`block font-montserrat font-medium text-cream hover:text-luxury-gold transition-all duration-300 py-3 px-4 rounded-lg hover:bg-luxury-gold/10 border border-transparent hover:border-luxury-gold/30 animate-fadeInUp`}
                style={{ animationDelay: `${index * 100}ms` }}
              >
                {link.label}
              </a>
            ))}
            
            <a 
              href="/login"
              className="block w-full mt-4 bg-gradient-to-r from-luxury-gold to-brass text-deep-forest font-montserrat font-bold px-6 py-3 rounded-full hover:from-brass hover:to-bronze transition-all duration-300 shadow-luxury hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-luxury-gold/50 border border-luxury-gold/30 text-center"
              onClick={() => setIsMenuOpen(false)}
            >
              Get Started
            </a>
          </div>
        </div>
      </nav>
    </header>
  );
};

export default Header;