// Framer Code component for Motion booking detection
export default function MotionBookingTracker() {
  useEffect(() => {
    // Function to check for booking confirmation text
    const checkForBookingConfirmation = () => {
      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function() {
          // Look for confirmation text that appears when booking is complete
          if (document.body.innerText.includes("Meeting booked successfully") || 
              document.body.innerText.includes("booked") ||
              document.body.innerText.includes("an invite has been sent")) {
            
            // Send event to GA4
            if (window.gtag) {
              window.gtag('event', 'booking_completed', {
                'event_category': 'Motion',
                'event_label': 'Calendar Booking'
              });
              console.log("Motion booking tracked in GA4");
            }
            
            // Stop observing once event is fired
            observer.disconnect();
          }
        });
      });

      // Start observing the document body for changes
      observer.observe(document.body, { 
        childList: true, 
        subtree: true,
        characterData: true 
      });
    };

    // Wait for page to fully load before initializing observer
    if (document.readyState === 'complete') {
      checkForBookingConfirmation();
    } else {
      window.addEventListener('load', checkForBookingConfirmation);
    }

    // Cleanup function
    return () => {
      window.removeEventListener('load', checkForBookingConfirmation);
    };
  }, []);

  // This component doesn't render anything visible
  return null;
}
import { useEffect } from "react";

export function FormCompletionTracker() {
  useEffect(() => {
    if (window.location.pathname === "/first-scoping-call-booking/") {
      window.gtag && window.gtag("event", "form_completion", {
        page_path: window.location.pathname,
        page_title: document.title,
        form_name: "First Scoping Call"
      });
    }
  }, []);

  return null; // this renders nothing visually
}

// Framer Code component for Motion booking detection
export default function MotionBookingTracker() {
  useEffect(() => {
    // Function to check for booking confirmation text
    const checkForBookingConfirmation = () => {
      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function() {
          // Look for confirmation text that appears when booking is complete
          if (document.body.innerText.includes("Meeting booked successfully") || 
              document.body.innerText.includes("booked") ||
              document.body.innerText.includes("an invite has been sent")) {
            
            // Send event to GA4
            if (window.gtag) {
              window.gtag('event', 'booking_completed', {
                'event_category': 'Motion',
                'event_label': 'Calendar Booking'
              });
              console.log("Motion booking tracked in GA4");
            }
            
            // Stop observing once event is fired
            observer.disconnect();
          }
        });
      });

      // Start observing the document body for changes
      observer.observe(document.body, { 
        childList: true, 
        subtree: true,
        characterData: true 
      });
    };

    // Wait for page to fully load before initializing observer
    if (document.readyState === 'complete') {
      checkForBookingConfirmation();
    } else {
      window.addEventListener('load', checkForBookingConfirmation);
    }

    // Cleanup function
    return () => {
      window.removeEventListener('load', checkForBookingConfirmation);
    };
  }, []);

  // This component doesn't render anything visible
  return null;
}