Test-Generate-123/Template-01/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.9, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 20 }}
            className="bg-white rounded-[40px] shadow-2xl max-w-4xl w-full overflow-hidden flex flex-col md:flex-row relative"
          >
            <button 
              onClick={handleClose}
              className="absolute top-6 right-6 h-10 w-10 rounded-full bg-slate-100/80 hover:bg-slate-900 hover:text-white text-slate-400 flex items-center justify-center z-20 transition-all shadow-sm"
              aria-label="Fechar"
            >
              <X size={20} />
            </button>

            {/* Left side: Visual */}
            <div className="md:w-5/12 bg-blue-600 p-12 text-white flex flex-col justify-between relative overflow-hidden">
              <div className="relative z-10">
                <div className="h-12 w-12 bg-white/20 rounded-2xl flex items-center justify-center mb-8">
                  <ShieldCheck size={28} />
                </div>
                <h2 className="text-4xl font-serif font-bold italic tracking-tight leading-tight mb-4">
                  Domine a Algoritmo 2026.
                </h2>
                <p className="text-blue-100 font-medium">
                  Baixe nosso checklist exclusivo de Auditoria Técnica e E-E-A-T para garantir sua autoridade.
                </p>
              </div>

              <div className="relative z-10 mt-12 pt-8 border-t border-white/10">
                <div className="flex items-center gap-3">
                  <div className="flex -space-x-3">
                    {[1, 2, 3].map(i => (
                      <img key={i} src={`https://i.pravatar.cc/100?u=${i}`} className="h-8 w-8 rounded-full border-2 border-blue-600" />
                    ))}
                  </div>
                  <span className="text-[10px] font-bold uppercase tracking-widest">+12.4k SEOs baixaram</span>
                </div>
              </div>

              {/* Decorative Circle */}
              <div className="absolute -bottom-20 -left-20 h-64 w-64 bg-white/10 rounded-full blur-3xl" />
            </div>

            {/* Right side: Form */}
            <div className="md:w-7/12 p-12 md:p-16 flex flex-col justify-center">
              <span className="text-[10px] font-black text-blue-600 uppercase tracking-[0.3em] mb-4 block">Recurso Gratuito</span>
              <h3 className="text-2xl font-bold text-slate-900 mb-8">Onde enviamos seu <span className="italic">Blueprint de Autoridade?</span></h3>
              
              <form className="space-y-4" onSubmit={(e) => { e.preventDefault(); handleClose(); }}>
                <div className="relative">
                  <Mail className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300" size={18} />
                  <input 
                    type="email" 
                    placeholder="Seu melhor e-mail comercial"
                    required
                    className="w-full h-16 pl-16 pr-6 bg-slate-50 border border-slate-100 rounded-2xl text-slate-900 placeholder:text-slate-300 focus:outline-none focus:border-blue-600 focus:bg-white transition-all font-medium"
                  />
                </div>
                <button 
                  type="submit"
                  className="w-full h-16 bg-slate-900 text-white rounded-2xl font-bold uppercase text-xs tracking-[0.2em] flex items-center justify-center gap-3 hover:bg-blue-600 transition-all shadow-xl shadow-slate-100"
                >
                  Receber Agora <Download size={18} />
                </button>
              </form>

              <div className="mt-8 flex items-center justify-center gap-6">
                <div className="flex items-center gap-2 text-[10px] font-bold text-slate-300 uppercase tracking-widest">
                  <ArrowRight size={12} /> PDF interativo
                </div>
                <div className="flex items-center gap-2 text-[10px] font-bold text-slate-300 uppercase tracking-widest">
                  <ArrowRight size={12} /> Templates de auditoria
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
}