// ContainerScroll — adapted from Aceternity (21st.dev) to vanilla React + Babel.
// rotateX 20→0, scale 1.05→1 (mobile 0.7→0.9), header translateY 0→-100, driven by scroll.

function ContainerScroll({ titleComponent, children, root }) {
  const containerRef = React.useRef(null);
  const headerRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const [isMobile, setIsMobile] = React.useState(false);

  React.useEffect(() => {
    const check = () => setIsMobile(window.innerWidth <= 768);
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);

  React.useEffect(() => {
    const scroller = root && root.current ? root.current : window;
    let raf = 0;
    const update = () => {
      raf = 0;
      const el = containerRef.current;
      if (!el) return;
      // getBoundingClientRect is always viewport-relative.
      // When scroller is a div that fills the viewport, viewport coords = scroller coords.
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // Progress: 0 when section top hits bottom of viewport,
      //           1 when section bottom hits top of viewport.
      const total = rect.height + vh;
      const traveled = vh - rect.top;
      let p = traveled / total;
      p = Math.max(0, Math.min(1, p));

      const rotate = 0;
      const sFrom = isMobile ? 0.7 : 1.05;
      const sTo = isMobile ? 0.9 : 1.0;
      const scale = sFrom + (sTo - sFrom) * p;
      const ty = -100 * p;

      if (headerRef.current) {
        headerRef.current.style.transform = `translate3d(0, ${ty}px, 0)`;
      }
      if (cardRef.current) {
        cardRef.current.style.transform = `scale(${scale})`;
      }
    };
    const onScroll = () => {
      if (!raf) raf = requestAnimationFrame(update);
    };
    update();
    // listen on every plausible source — scroll events don't bubble, but also attach on window for safety
    const target = scroller === window ? window : scroller;
    target.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      target.removeEventListener('scroll', onScroll);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [isMobile, root]);

  return (
    <div
      ref={containerRef}
      style={{
        minHeight: isMobile ? '60rem' : '80rem',
        display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
        position: 'relative', padding: isMobile ? '8px' : '40px 80px 80px', margin: "-220px"
      }}>
      
      <div style={{ width: '100%', position: 'relative', perspective: '1000px', padding: isMobile ? '20px 0' : '60px 0' }}>
        <div
          ref={headerRef}
          style={{ maxWidth: 1024, margin: '0 auto', textAlign: 'center', willChange: 'transform' }}>
          
          {titleComponent}
        </div>
        <div
          ref={cardRef}
          style={{
            maxWidth: 1200, margin: '160px auto 0',
            height: isMobile ? '30rem' : '40rem',
            width: '100%',
            border: 'none',
            padding: 0,
            background: 'transparent',
            borderRadius: 0,
            boxShadow: 'none',
            willChange: 'transform',
            transformOrigin: 'center top'
          }}>
          
          <div style={{
            height: '100%', width: '100%',
            overflow: 'visible', borderRadius: 0,
            background: 'transparent',
            padding: 0
          }}>
            {children}
          </div>
        </div>
      </div>
    </div>);

}

window.ContainerScroll = ContainerScroll;