import { useState, useEffect } from 'react';
import { ArrowRight, Wand2 } from 'lucide-react';
import { cn } from '../lib/utils';

export default function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);

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

  return (
    <header
      className={cn(
        "fixed top-0 w-full z-40 transition-all duration-300",
        isScrolled ? "bg-white/90 backdrop-blur-xl border-b border-pink-100 py-3 shadow-sm" : "bg-transparent py-5"
      )}
    >
      <div className="container mx-auto px-6 max-w-6xl flex items-center justify-between">
        <div className="flex items-center gap-3 group cursor-pointer">
          <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-pink-400 to-violet-500 flex items-center justify-center transition-transform group-hover:scale-110 shadow-lg shadow-pink-500/30">
            <Wand2 className="w-5 h-5 text-white" />
          </div>
          <span className="font-display font-bold text-2xl tracking-tight text-indigo-950">Festa Mágica<span className="text-pink-500">IA</span></span>
        </div>

        <div className="flex items-center gap-4">
          <a
            href="#oferta"
            onClick={() => {
              if (typeof window !== 'undefined' && 'fbq' in window) {
                (window as any).fbq('track', 'InitiateCheckout');
              }
            }}
            className="h-11 px-6 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-semibold text-sm flex items-center gap-2 hover:shadow-[0_0_20px_rgba(236,72,153,0.4)] hover:scale-105 transition-all"
          >
            Quero 30 Imagens <ArrowRight className="w-4 h-4" />
          </a>
        </div>
      </div>
    </header>
  );
}
