Where ContextMiner Makes the Biggest Impact

import { useState, useEffect, useRef } from 'react';
import { trackView } from './analytics';

/**
 * Tracks element visibility inside viewport.
 * Dispatches view events when observed.
 */
export function useVisibilityObserver(elementId) {
  const [isVisible, setIsVisible] = useState(false);
  const observerRef = useRef(null);

  useEffect(() => {
    // Only init if window is present
    if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
      observerRef.current = new IntersectionObserver(([entry]) => {
        setIsVisible(entry.isIntersecting);
        if (entry.isIntersecting) {
          console.log(`[Observer] Element ${elementId} visible`);
          trackView(elementId);
        }
      }, { threshold: 0.15 });

      const element = document.getElementById(elementId);
      if (element) {
        observerRef.current.observe(element);
      }
    }

    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [elementId]);

  return isVisible;
}