SEO tweaks, design tweaks

src/lib/components/PricingPage.svelte

@@ -9,9 +9,7 @@
   export let content: SiteSharedContent;
   export let pageContent: PricingPageContent;
 
-  const promptDelayMs = 10000;
-  const promptIdleMs = 6000;
-  const minPromptDwellMs = 3500;
+  const scrollDepthThreshold = 0.65;
   const desktopPromptMediaQuery = '(min-width: 769px)';
 
   let showMeetGreetPrompt = false;
@@ -44,44 +42,28 @@
   }
 
   onMount(() => {
-    const startedAt = Date.now();
-    let lastInteractionAt = startedAt;
     const desktopPromptQuery = window.matchMedia(desktopPromptMediaQuery);
     canShowDesktopPrompt = desktopPromptQuery.matches;
 
-    const recordInteraction = () => {
-      lastInteractionAt = Date.now();
-    };
-
     const handleDesktopPromptViewportChange = (event: MediaQueryListEvent) => {
       canShowDesktopPrompt = event.matches;
     };
 
-    const interactionEvents: Array<keyof WindowEventMap> = [
-      'pointerdown',
-      'mousemove',
-      'keydown',
-      'scroll',
-      'touchstart'
-    ];
+    const handleScroll = () => {
+      if (promptShown || dismissMeetGreetPrompt || bookingInView || !canShowDesktopPrompt) {
+        return;
+      }
 
-    interactionEvents.forEach((eventName) => {
-      window.addEventListener(eventName, recordInteraction);
-    });
+      const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
+      if (scrollableHeight <= 0) return;
 
-    const delayedPrompt = window.setTimeout(() => {
-      revealMeetGreetPrompt();
-    }, promptDelayMs);
-
-    const idlePromptCheck = window.setInterval(() => {
-      const now = Date.now();
-      const hasWaitedLongEnough = now - startedAt >= minPromptDwellMs;
-      const looksIdle = now - lastInteractionAt >= promptIdleMs;
-
-      if (document.visibilityState === 'visible' && hasWaitedLongEnough && looksIdle) {
+      const scrollPercent = window.scrollY / scrollableHeight;
+      if (scrollPercent >= scrollDepthThreshold) {
         revealMeetGreetPrompt();
       }
-    }, 1000);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
 
     const bookingSection = document.getElementById('newlead');
     const bookingObserver = bookingSection
@@ -100,11 +82,7 @@
     desktopPromptQuery.addEventListener('change', handleDesktopPromptViewportChange);
 
     return () => {
-      window.clearTimeout(delayedPrompt);
-      window.clearInterval(idlePromptCheck);
-      interactionEvents.forEach((eventName) => {
-        window.removeEventListener(eventName, recordInteraction);
-      });
+      window.removeEventListener('scroll', handleScroll);
       desktopPromptQuery.removeEventListener('change', handleDesktopPromptViewportChange);
       bookingObserver?.disconnect();
     };
@@ -161,7 +139,7 @@
                 {/each}
               </ul>
 
-              <a class="btn btn-yellow pricing-plan-cta" href="#newlead">Book Now</a>
+              <a class="btn btn-yellow pricing-plan-cta" href="#newlead">Book a Meet &amp; Greet</a>
             </article>
           {/each}
         </div>
@@ -188,7 +166,7 @@
         </p>
       </div>
 
-      <a class="meet-greet-cta" href="#newlead" on:click={handleMeetGreetCta}>Let's chat</a>
+      <a class="meet-greet-cta" href="#newlead" on:click={handleMeetGreetCta}>Book a Meet &amp; Greet</a>
     </aside>
   {/if}
 </main>