Seo/Template-03/src/components/LeadMagnet.tsx

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { X, Download, ShieldCheck, ArrowRight, Mail } from 'lucide-react';

export default function LeadMagnet() {
  const [isOpen, setIsOpen] = useState(false);
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    // Check if user already dismissed or converted
    const hasSeen = localStorage.getItem('seo_lead_magnet_dismissed');
    if (hasSeen) return;

    const handleMouseLeave = (e: MouseEvent) => {
      if (e.clientY <= 0 && !dismissed) {
        setIsOpen(true);
      }
    };

    const handleScroll = () => {
      const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
      if (scrollPercent > 50 && !dismissed) {
        setIsOpen(true);
      }
    };

    document.addEventListener('mouseleave', handleMouseLeave);
    window.addEventListener('scroll', handleScroll);

    return () => {
      document.removeEventListener('mouseleave', handleMouseLeave);
      window.removeEventListener('scroll', handleScroll);
    };
  }, [dismissed]);

  const handleClose = () => {
    setIsOpen(false);
    setDismissed(true);
    localStorage.setItem('seo_lead_magnet_dismissed', 'true');
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <div className="fixed inset-0 z-[200] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm">
          <motion.div
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 20 }}
            className="bg-[#08080a] border border-white/10 shadow-2xl max-w-2xl w-full overflow-hidden flex flex-col relative"
          >
            <button 
              onClick={handleClose}
              className="absolute top-4 right-4 h-8 w-8 bg-white/5 hover:bg-brand hover:text-black text-slate-500 flex items-center justify-center z-20 transition-all"
              aria-label="Fechar"
            >
              <X size={16} />
            </button>

            <div className="p-8 md:p-12">
              <div className="flex items-center gap-3 mb-6">
                <div className="h-10 w-10 bg-brand/10 flex items-center justify-center text-brand skew-x-[-6deg]">
                  <ShieldCheck size={20} className="skew-x-[6deg]" />
                </div>
                <span className="text-[9px] font-mono font-black text-brand uppercase tracking-[0.4em]">Resource_Found</span>
              </div>

              <h2 className="text-3xl sm:text-4xl font-display font-black text-white italic tracking-tight leading-none mb-6">
                Dominate the<br /><span className="text-brand">Neural_Index 2026.</span>
              </h2>
              
              <p className="text-slate-500 font-mono text-[11px] leading-relaxed uppercase tracking-widest mb-10 max-w-lg">
                Download our exclusive blueprint for technical systems and semantic authority protocols.
              </p>

              <form className="space-y-4" onSubmit={(e) => { e.preventDefault(); handleClose(); }}>
                <div className="relative">
                  <Mail className="absolute left-0 top-1/2 -translate-y-1/2 text-brand" size={16} />
                  <input 
                    type="email" 
                    placeholder="ENTER_ENDPOINT_ID..."
                    required
                    className="w-full h-12 pl-8 border-b border-white/10 bg-transparent text-white placeholder:text-slate-800 focus:outline-none focus:border-brand transition-all font-mono text-xs uppercase tracking-widest"
                  />
                </div>
                <button 
                  type="submit"
                  className="btn-primary w-full"
                >
                  Sync_Now <Download size={16} />
                </button>
              </form>

              <div className="mt-8 pt-8 border-t border-white/5 flex flex-wrap gap-x-8 gap-y-4">
                <div className="flex items-center gap-2 text-[8px] font-black text-slate-700 uppercase tracking-widest">
                  <ArrowRight size={10} className="text-brand" /> Interactive Protocol
                </div>
                <div className="flex items-center gap-2 text-[8px] font-black text-slate-700 uppercase tracking-widest">
                  <ArrowRight size={10} className="text-brand" /> Audit Framework
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
}