/* engagement.jsx — Dynamic tab title + Exit-intent overlay */ const CHECKOUT_URL_EI = "https://checkout.theborntoknow.com/checkout/buy/8edcc250-1c08-4dd6-a88a-a0081454cc63"; /* ── Tab title messages ─────────────────────────────── */ const AWAY_TITLES = [ "👀 Still thinking? · The Baby Blueprint", "⏳ Launch price ends at 1,000 copies", "🧠 Your baby's brain won't wait forever", "💡 108 pages that finally make sense", "👶 Come back - $23.95 launch price", ]; const HOME_TITLE = "The Baby Blueprint - Understand Your Baby's Brain & Behavior (0-36 mo)"; function DynamicTabTitle() { const awayIdx = React.useRef(0); const intervalRef = React.useRef(null); React.useEffect(() => { const onHide = () => { if (document.hidden) { // Start rotating away messages every 5 seconds const rotate = () => { document.title = AWAY_TITLES[awayIdx.current % AWAY_TITLES.length]; awayIdx.current += 1; }; rotate(); intervalRef.current = setInterval(rotate, 5000); } else { // User came back — restore title clearInterval(intervalRef.current); awayIdx.current = 0; document.title = HOME_TITLE; } }; document.addEventListener("visibilitychange", onHide); return () => { document.removeEventListener("visibilitychange", onHide); clearInterval(intervalRef.current); document.title = HOME_TITLE; }; }, []); return null; } /* ── Exit-intent overlay ────────────────────────────── */ function ExitIntentOverlay() { const [visible, setVisible] = React.useState(false); const shown = React.useRef(false); const pageLoadTime = React.useRef(Date.now()); const show = () => { if (shown.current) return; if (sessionStorage.getItem("btk_exit_shown")) return; // Don't show before 45s on page if (Date.now() - pageLoadTime.current < 45000) return; shown.current = true; sessionStorage.setItem("btk_exit_shown", "1"); setVisible(true); document.body.style.overflow = "hidden"; document.documentElement.style.overflow = "hidden"; }; const hide = () => { setVisible(false); document.body.style.overflow = ""; document.documentElement.style.overflow = ""; }; React.useEffect(() => { // ── Desktop: mouse moves toward top of viewport (exit intent) ── const onMouseMove = (e) => { if (e.clientY < 40 && e.movementY < -5) show(); }; // ── Mobile: fast upward scroll (back-gesture intent) ── let lastY = window.scrollY; let lastTime = Date.now(); const onScroll = () => { const now = Date.now(); const dy = window.scrollY - lastY; const dt = now - lastTime; // Fast upward scroll: moved up >200px in <250ms if (dy < -200 && dt < 250) show(); lastY = window.scrollY; lastTime = now; }; // ── Mobile inactivity: 120s without interaction ── let inactivityTimer = null; const resetInactivity = () => { clearTimeout(inactivityTimer); inactivityTimer = setTimeout(show, 120000); }; const inactivityEvents = ["touchstart", "touchmove", "click"]; inactivityEvents.forEach(ev => window.addEventListener(ev, resetInactivity, { passive: true })); resetInactivity(); document.addEventListener("mousemove", onMouseMove); window.addEventListener("scroll", onScroll, { passive: true }); return () => { document.removeEventListener("mousemove", onMouseMove); window.removeEventListener("scroll", onScroll); inactivityEvents.forEach(ev => window.removeEventListener(ev, resetInactivity)); clearTimeout(inactivityTimer); document.body.style.overflow = ""; document.documentElement.style.overflow = ""; }; }, []); if (!visible) return null; return ( <> {/* Backdrop — no click-to-close, only X button closes */}
{/* Slide-in panel */}
{/* Close button */} {/* Content */}
{/* Brain icon — hidden on very small screens */}
{/* Eyebrow */}
BEFORE YOU GO
{/* Headline */}

The launch price ends at copy 1,000.

{/* Body */}

Your baby's brain is building right now — over one million new connections every second. The Blueprint helps you understand what's happening.

{/* Price row */}
$39 $23.95 SAVE $15
{/* CTA */} Start understanding my baby {/* Micro-copy */}
Instant PDF · No subscription · Yours forever
); } Object.assign(window, { DynamicTabTitle, ExitIntentOverlay });