'use client';
import { useEffect, useRef } from 'react';

/**
 * Lightweight reveal-on-scroll. Без зависимостей, нативный IntersectionObserver.
 * Дочерние элементы с классом `.reveal` плавно появятся.
 */
export default function Reveal({ children, className = '' }) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      entries => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('is-visible');
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
    );
    ref.current.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div ref={ref} className={className}>
      <style jsx global>{`
        .reveal {
          opacity: 0;
          transform: translateY(20px);
          transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        }
        .reveal.is-visible {
          opacity: 1;
          transform: translateY(0);
        }
        .reveal-1 { transition-delay: 0.05s; }
        .reveal-2 { transition-delay: 0.15s; }
        .reveal-3 { transition-delay: 0.25s; }
        @media (prefers-reduced-motion: reduce) {
          .reveal { opacity: 1; transform: none; transition: none; }
        }
      `}</style>
      {children}
    </div>
  );
}