'use client';

import { useEffect } from 'react';

/** Activa las entradas al viewport sin acoplar la lógica a cada sección. */
export default function StoreMotionObserver() {
	useEffect(() => {
		const root = document.querySelector<HTMLElement>('[data-scroll-animations]');
		if (!root || root.dataset.scrollAnimations === 'false') return;

		const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
		if (reducedMotion || !('IntersectionObserver' in window)) {
			root.querySelectorAll<HTMLElement>('[data-store-reveal]').forEach((element) => {
				element.dataset.storeVisible = 'true';
			});
			return;
		}

		const observer = new IntersectionObserver(
			(entries) => {
				entries.forEach((entry) => {
					if (!entry.isIntersecting) return;
					(entry.target as HTMLElement).dataset.storeVisible = 'true';
					observer.unobserve(entry.target);
				});
			},
			{ threshold: 0.12, rootMargin: '0px 0px -48px' }
		);

		const observePending = () => {
			root.querySelectorAll<HTMLElement>('[data-store-reveal]:not([data-store-observed])').forEach((element) => {
				element.dataset.storeObserved = 'true';
				observer.observe(element);
			});
		};

		observePending();
		const mutations = new MutationObserver(observePending);
		mutations.observe(root, { childList: true, subtree: true });

		return () => {
			mutations.disconnect();
			observer.disconnect();
		};
	}, []);

	return null;
}