// exit-popup.jsx — exit-intent modal with device-specific triggers const ExitPopup = ({ onTriggerForce }) => { const [open, setOpen] = React.useState(false); const firedRef = React.useRef(false); // Detect device once const isMobile = React.useMemo(() => { if (typeof window === 'undefined') return false; return window.matchMedia('(max-width: 820px)').matches || ('ontouchstart' in window && window.innerWidth <= 1024); }, []); const trigger = React.useCallback(() => { if (firedRef.current) return; if (sessionStorage.getItem('exit_popup_shown') === '1') return; firedRef.current = true; sessionStorage.setItem('exit_popup_shown', '1'); setOpen(true); }, []); // Allow Tweaks panel / external code to force-open for testing React.useEffect(() => { if (!onTriggerForce) return; onTriggerForce(() => { firedRef.current = false; sessionStorage.removeItem('exit_popup_shown'); trigger(); }); }, [onTriggerForce, trigger]); // Desktop trigger: mouse leaves top of viewport, after 8s grace period React.useEffect(() => { if (isMobile) return; let armed = false; const armTimer = setTimeout(() => { armed = true; }, 8000); const onLeave = (e) => { if (!armed) return; // Only fire when leaving from the TOP of the viewport if (e.clientY <= 0 && e.relatedTarget == null) { trigger(); } }; document.addEventListener('mouseout', onLeave); return () => { clearTimeout(armTimer); document.removeEventListener('mouseout', onLeave); }; }, [isMobile, trigger]); // Mobile trigger: scrolled past 60% AND idle (no scroll) for 30s React.useEffect(() => { if (!isMobile) return; let idleTimer = null; let pastThreshold = false; const checkScroll = () => { const scrollY = window.scrollY || window.pageYOffset; const docH = document.documentElement.scrollHeight - window.innerHeight; if (docH <= 0) return; const pct = scrollY / docH; pastThreshold = pct >= 0.6; // Reset idle timer on every scroll event if (idleTimer) clearTimeout(idleTimer); if (pastThreshold) { idleTimer = setTimeout(() => { // Still on page, still past threshold → fire trigger(); }, 30000); } }; // Also stop firing if tab becomes hidden (don't fire on a backgrounded tab) const onVis = () => { if (document.hidden && idleTimer) { clearTimeout(idleTimer); idleTimer = null; } else if (!document.hidden && pastThreshold) { // Re-arm when they come back if (idleTimer) clearTimeout(idleTimer); idleTimer = setTimeout(trigger, 30000); } }; window.addEventListener('scroll', checkScroll, { passive: true }); document.addEventListener('visibilitychange', onVis); checkScroll(); return () => { window.removeEventListener('scroll', checkScroll); document.removeEventListener('visibilitychange', onVis); if (idleTimer) clearTimeout(idleTimer); }; }, [isMobile, trigger]); // Lock body scroll when open React.useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, [open]); // Esc to close React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); if (!open) return null; const handleCta = () => { setOpen(false); // Smooth-scroll handler will pick this up setTimeout(() => { const target = document.getElementById('oferta'); if (target) { const y = target.getBoundingClientRect().top + window.scrollY - 72; window.scrollTo({ top: Math.max(0, y), behavior: 'smooth' }); } }, 100); }; return (
{ if (e.target === e.currentTarget) setOpen(false); }} >
ESPERA UN SEGUNDO

Estás a punto de perder
acceso a todo esto:

Las plazas son limitadas. Una vez cerrado el lote, no reabrimos inscripciones.

Método O.P.E.T.™
El sistema de 4 fases para crear tu producto digital en 48 horas.
Agentes de IA listos para usar
Hacen el trabajo técnico por ti — sin escribir una línea de código.
16h en vivo + grabaciones
Acompañamiento paso a paso. Aprendes haciendo, no mirando.
Lote 1 · 99% ocupado
); }; window.ExitPopup = ExitPopup;