const Header: React.FC = () => {
  return (
    <header className="sticky top-0 z-50 bg-deep-forest bg-opacity-95 backdrop-blur-sm border-b border-luxury-gold border-opacity-20">
      <div className="container mx-auto px-6 py-1">
        <div className="flex items-center justify-between">
          {/* Logo */}
          <div className="flex-shrink-0">
            <img 
              src="/assets/Dark-LineLogo-cropped.svg" 
              alt="Pennyzo Logo" 
              className="h-16 w-auto"
            />
          </div>

          {/* Navigation Links - Centered */}
          <nav className="hidden md:flex items-center space-x-10 absolute left-1/2 transform -translate-x-1/2">
            <a 
              href="#features" 
              className="text-cream hover:text-luxury-gold transition-all duration-300 font-elegant-sans font-medium tracking-wide relative group"
            >
              Features
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-luxury-gold transition-all duration-300 group-hover:w-full"></span>
            </a>
            <a 
              href="#why-pennyzo" 
              className="text-cream hover:text-luxury-gold transition-all duration-300 font-elegant-sans font-medium tracking-wide relative group"
            >
              Why Pennyzo?
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-luxury-gold transition-all duration-300 group-hover:w-full"></span>
            </a>
            <a 
              href="#roadmap" 
              className="text-cream hover:text-luxury-gold transition-all duration-300 font-elegant-sans font-medium tracking-wide relative group"
            >
              Roadmap
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-luxury-gold transition-all duration-300 group-hover:w-full"></span>
            </a>
          </nav>

          {/* Mobile Menu Button */}
          <div className="md:hidden">
            <button className="text-cream hover:text-luxury-gold focus:outline-none focus:text-luxury-gold transition-colors duration-300">
              <svg className="h-6 w-6 fill-current" viewBox="0 0 24 24">
                <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;