// flow-scroll.jsx — FlowArt stacking scroll effect (GSAP + ScrollTrigger)
// GSAP + ScrollTrigger must be loaded via CDN before this file runs

gsap.registerPlugin(ScrollTrigger);

const FlowSection = ({ children, id, ariaLabel, bg }) => (
  <section
    id={id}
    data-flow-section
    aria-label={ariaLabel}
    style={{ position: 'relative', minHeight: '100vh', width: '100%', overflow: 'hidden' }}
  >
    <div
      className="flow-art-container"
      style={{
        position: 'relative',
        display: 'grid',
        gridTemplateRows: 'auto 1fr auto',
        minHeight: '100vh',
        width: '100%',
        paddingTop: 'calc(64px + clamp(22px, 3vw, 40px))',
        paddingBottom: 'clamp(22px, 3vw, 40px)',
        paddingLeft: 'var(--container-px)',
        paddingRight: 'var(--container-px)',
        background: bg || 'var(--bg)',
        willChange: 'transform',
        transformOrigin: 'bottom left',
      }}
    >
      {children}
    </div>
  </section>
);

const FlowArt = ({ children }) => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    const sections = Array.from(el.querySelectorAll('[data-flow-section]'));
    if (!sections.length) return;

    const triggers = [];

    sections.forEach((section, i) => {
      gsap.set(section, { zIndex: i + 1 });
      const inner = section.querySelector('.flow-art-container');
      if (!inner) return;

      if (i > 0) {
        gsap.set(inner, { rotation: 30, transformOrigin: 'bottom left' });
        const tween = gsap.to(inner, {
          rotation: 0,
          ease: 'none',
          scrollTrigger: {
            trigger: section,
            start: 'top bottom',
            end: 'top 25%',
            scrub: true,
          },
        });
        if (tween.scrollTrigger) triggers.push(tween.scrollTrigger);
      }

      if (i < sections.length - 1) {
        triggers.push(
          ScrollTrigger.create({
            trigger: section,
            start: 'bottom bottom',
            end: 'bottom top',
            pin: true,
            pinSpacing: false,
          })
        );
      }
    });

    ScrollTrigger.refresh();

    return () => {
      triggers.forEach(t => t.kill());
      ScrollTrigger.refresh();
    };
  }, []);

  return (
    <div ref={ref} style={{ width: '100%', overflowX: 'hidden' }}>
      {children}
    </div>
  );
};

Object.assign(window, { FlowArt, FlowSection });