"use client";

import { useEffect } from "react";

export function ViewTransition() {
  useEffect(() => {
    if (typeof window === "undefined" || typeof document === "undefined") return;

    // View Transitions API support
    if ("startViewTransition" in document) {
      // Enable smooth transitions between sections
      const handleScroll = () => {
        const sections = document.querySelectorAll("section");
        sections.forEach((section) => {
          const rect = section.getBoundingClientRect();
          const isVisible = rect.top < window.innerHeight && rect.bottom > 0;

          if (isVisible && !section.classList.contains("view-transition-active")) {
            section.classList.add("view-transition-active");
          }
        });
      };

      window.addEventListener("scroll", handleScroll, { passive: true });
      handleScroll();

      return () => {
        window.removeEventListener("scroll", handleScroll);
      };
    }
  }, []);

  return null;
}

