4.2.1 final fixes

src/lib/components/MobileBookBar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, tick } from 'svelte';
   import { afterNavigate } from '$app/navigation';
   import { page } from '$app/stores';
   import Icon from '$lib/components/Icon.svelte';
@@ -23,32 +23,78 @@
   $: pathname = $page.url.pathname;
   $: hidden = pathname === '/contact-us' || pathname === '/booking';
 
-  const SHOW_AFTER_PX = 480; // close to one mobile viewport
-  const HIDE_BELOW_PX = 120; // generous so the bar doesn't flicker near the top
-
   let visible = false;
+  let triggerPassed = false;
+  let bookingInView = false;
+  let triggerObserver: IntersectionObserver | null = null;
+  let bookingObserver: IntersectionObserver | null = null;
 
-  function evaluateVisibility() {
-    const y = window.scrollY;
-    if (y > SHOW_AFTER_PX) {
-      visible = true;
-    } else if (y < HIDE_BELOW_PX) {
-      visible = false;
+  function refreshVisibility() {
+    visible = !hidden && triggerPassed && !bookingInView;
+  }
+
+  function cleanupObservers() {
+    triggerObserver?.disconnect();
+    bookingObserver?.disconnect();
+    triggerObserver = null;
+    bookingObserver = null;
+  }
+
+  async function setupObservers() {
+    if (typeof window === 'undefined') {
+      return;
     }
+
+    await tick();
+
+    cleanupObservers();
+
+    const triggerEl =
+      document.getElementById('hero') ?? document.querySelector('main section, section');
+    const bookingEl = document.getElementById('newlead');
+
+    triggerPassed = !triggerEl;
+    bookingInView = false;
+
+    if (triggerEl) {
+      triggerObserver = new IntersectionObserver(
+        ([entry]) => {
+          triggerPassed = !entry.isIntersecting && entry.boundingClientRect.top < 0;
+          refreshVisibility();
+        },
+        { threshold: 0.2 }
+      );
+
+      triggerObserver.observe(triggerEl);
+    }
+
+    if (bookingEl) {
+      bookingObserver = new IntersectionObserver(
+        ([entry]) => {
+          bookingInView = entry.isIntersecting;
+          refreshVisibility();
+        },
+        { threshold: 0.2 }
+      );
+
+      bookingObserver.observe(bookingEl);
+    }
+
+    refreshVisibility();
   }
 
   afterNavigate(() => {
     visible = false;
+    triggerPassed = false;
+    bookingInView = false;
+    void setupObservers();
   });
 
   onMount(() => {
-    evaluateVisibility();
-    window.addEventListener('scroll', evaluateVisibility, { passive: true });
-    window.addEventListener('resize', evaluateVisibility, { passive: true });
+    void setupObservers();
 
     return () => {
-      window.removeEventListener('scroll', evaluateVisibility);
-      window.removeEventListener('resize', evaluateVisibility);
+      cleanupObservers();
     };
   });
 </script>