EXIT MODAL FIX - WHAT WAS WRONG
================================

THE PROBLEM:
-----------
The original code used document.addEventListener('mouseleave') which doesn't fire 
reliably when the mouse leaves the viewport to go to the browser's address bar or 
close button.

THE FIX:
--------
1. Changed to document.addEventListener('mouseout') which DOES detect when mouse
   leaves the document boundary
   
2. Added backup detection using document.documentElement.addEventListener('mouseleave')
   for better cross-browser support
   
3. Both methods now check:
   - Mouse is moving upward (e.clientY < 10 or <= 0)
   - Mouse is leaving document boundary
   - Exit modal hasn't already been shown


HOW TO TEST THE EXIT MODAL:
============================

Desktop Testing:
---------------
1. Load your preview page
2. Scroll down a bit (optional, but helps ensure page is loaded)
3. Move your mouse cursor UP toward the browser's address bar
4. Move it quickly - as if you're going to close the tab or type a new URL
5. Exit modal should appear when cursor crosses the top edge of the page

If it doesn't fire on first try:
- Try moving cursor more quickly to the top
- Make sure you're moving to the very top edge (y position near 0)
- Refresh page and try again (localStorage might be interfering)


Mobile/Tablet Testing:
---------------------
1. Load preview page
2. Scroll down past 500px (about 2-3 screen heights)
3. Scroll back UP to the top of the page
4. Do this scroll-down-then-up motion twice
5. Exit modal should appear on the second attempt


Clear Cache Testing:
-------------------
If you want to test repeatedly, you need to clear the exitModalShown flag.
Either:
- Refresh the page (exitModalShown resets to false)
- Open browser console and type: exitModalShown = false


TROUBLESHOOTING:
===============

Exit modal never shows:
- Check browser console for JavaScript errors
- Verify the modal HTML is in the page (inspect element, search for "exitModal")
- Verify the script is loaded: view page source, look for preview_modals.js
- Try commenting out the localStorage check in welcome modal

Exit modal shows too easily:
- Increase the clientY threshold: change < 10 to < 5
- Add a delay: setTimeout before showExitModal()

Exit modal shows on mobile when not wanted:
- Increase scrollDepth requirement: change > 500 to > 1000
- Increase exitAttempts: change >= 2 to >= 3


INSTALLATION:
=============
1. Replace your current /scripts/preview_modals.js with preview_modals_fixed.js
2. Rename preview_modals_fixed.js to preview_modals.js
3. Clear browser cache
4. Test both desktop and mobile


WHAT CHANGED IN THE CODE:
==========================

OLD (didn't work):
document.addEventListener('mouseleave', function(e) {
    if (e.clientY < 10 && !exitModalShown) {
        showExitModal();
    }
});

NEW (works):
document.addEventListener('mouseout', function(e) {
    e = e || window.event;
    var from = e.relatedTarget || e.toElement;
    
    if ((!from || from.nodeName === "HTML") && e.clientY < 10 && !exitModalShown) {
        showExitModal();
    }
});

PLUS backup detection:
document.documentElement.addEventListener('mouseleave', function(e) {
    if (e.clientY <= 0 && !exitModalShown) {
        showExitModal();
    }
});


The combination of both methods ensures it works across different browsers
and scenarios.