import { useNavigate, Link } from "react-router-dom";
import { Home, Briefcase, Target, Phone, Calculator, Menu, BookOpen } from "lucide-react";
import { useState, useEffect } from "react";

const Header = () => {
  const navigate = useNavigate();
  const [isScrolled, setIsScrolled] = useState(false);

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

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

  return (
    <header className="fixed top-0 left-1/2 -translate-x-1/2 w-[85%] z-40 mt-[15px] transition-all duration-300 rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 via-white/5 to-transparent backdrop-blur-xl shadow-2xl">
      <div className="container mx-auto px-6 py-1.5 flex items-center justify-between">
        <Link 
          to="/" 
          className="flex items-center gap-3 hover:opacity-80 transition-all duration-300 opacity-100"
        >
          <img src="/logo-jc-novo.png?v=3" alt="Logo Junior Campos" className="w-[30px] h-[30px] object-contain" />
          <div className="flex flex-col">
            <span className="font-poppins font-bold text-white text-lg tracking-tight whitespace-nowrap leading-tight">Junior Campos</span>
            <span className="font-poppins text-white/70 text-xs tracking-wide whitespace-nowrap">Fitness Coach</span>
          </div>
        </Link>

        <div className="flex items-center gap-3">
          {/* Menu Principal - sempre visível */}
          <div className="relative group">
            <button className="inline-flex items-center justify-center gap-2 h-10 px-2 text-lg text-white hover:opacity-80 transition-all font-bold">
              MENU
              <Menu className="w-6 h-6" />
            </button>

            {/* Menu Principal em Cascata - Novo Conceito Elegante */}
            <div className="absolute top-full right-0 mt-5 w-52 bg-gradient-to-br from-white/15 via-white/5 to-transparent backdrop-blur-xl border border-white/10 rounded-3xl shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 z-[9999]">
              <div className="p-4">
                {/* Menu Items com ícones elegantes */}
                <div className="space-y-0.5">
                  <Link to="/" className="group/item flex items-center gap-2.5 p-2 rounded-lg hover:bg-white/20 transition-all duration-200">
                    <div className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center group-hover/item:bg-white/30 transition-colors">
                      <Home className="w-4 h-4 text-white" strokeWidth={2.5} />
                    </div>
                    <span className="font-poppins font-semibold text-white text-sm">Home</span>
                  </Link>

                  <Link to="/apresentacao" className="group/item flex items-center gap-2.5 p-2 rounded-lg hover:bg-white/20 transition-all duration-200">
                    <div className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center group-hover/item:bg-white/30 transition-colors">
                      <Target className="w-4 h-4 text-white" strokeWidth={2.5} />
                    </div>
                    <span className="font-poppins font-semibold text-white text-sm">Apresentação</span>
                  </Link>

                  <Link to="/infoprodutos" className="group/item flex items-center gap-2.5 p-2 rounded-lg hover:bg-white/20 transition-all duration-200">
                    <div className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center group-hover/item:bg-white/30 transition-colors">
                      <BookOpen className="w-4 h-4 text-white" strokeWidth={2.5} />
                    </div>
                    <span className="font-poppins font-semibold text-white text-sm">Ebooks</span>
                  </Link>

                  <Link to="/calculators" className="group/item flex items-center gap-2.5 p-2 rounded-lg hover:bg-white/20 transition-all duration-200">
                    <div className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center group-hover/item:bg-white/30 transition-colors">
                      <Calculator className="w-4 h-4 text-white" strokeWidth={2.5} />
                    </div>
                    <span className="font-poppins font-semibold text-white text-sm">Calculadoras</span>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;