// DecodeText — scroll-scrubbed character decode, words never break mid-word

function DecodeText({ text, tag='span', className='', style={}, startPct=-15, endPct=70 }){
  const ref = React.useRef(null);
  const Tag = tag;

  React.useEffect(() => {
    const el = ref.current;
    if (!el || !window.gsap || !window.ScrollTrigger) return;
    const gsap = window.gsap;
    gsap.registerPlugin(window.ScrollTrigger);

    const letters = el.querySelectorAll('[data-ch]');
    letters.forEach((node) => {
      gsap.set(node, {
        opacity: 0,
        filter: 'blur(20px)',
        rotate: (Math.random() * 180 - 90),
        scale: 1.8 + Math.random() * 1.2,
        x: (Math.random() * 60 - 30),
        y: (Math.random() * 60 - 30),
        transformOrigin: '50% 50%',
      });
    });

    // shuffled stagger so letters resolve out of sequence
    const indices = Array.from({length: letters.length}, (_, i) => i);
    for (let i = indices.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [indices[i], indices[j]] = [indices[j], indices[i]];
    }

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: el,
        start: `top ${100 - startPct}%`,
        end: `top ${Math.max(0, 100 - endPct)}%`,
        scrub: true,
        invalidateOnRefresh: true, // ricalcola se il layout cambia
      },
    });

    indices.forEach((idx, order) => {
      tl.to(letters[idx], {
        opacity: 1, filter: 'blur(0px)', rotate: 0, scale: 1, x: 0, y: 0,
        duration: 0.6, ease: 'power2.out',
      }, order * (1 / letters.length) * 0.8);
    });

    return () => {
      if (tl.scrollTrigger) tl.scrollTrigger.kill();
      tl.kill();
    };
  }, [text]);

  // Group into words — each word is white-space:nowrap to prevent mid-word line breaks
  const words = text.split(' ');
  return (
    <Tag ref={ref} className={className} style={{...style, display:'block'}}>
      {words.map((word, wi) => (
        <React.Fragment key={wi}>
          <span style={{display:'inline-block', whiteSpace:'nowrap'}}>
            {word.split('').map((ch, ci) => (
              <span key={ci} data-ch style={{display:'inline-block', willChange:'transform,opacity,filter'}}>
                {ch}
              </span>
            ))}
          </span>
          {wi < words.length - 1 && <span style={{display:'inline-block'}}>&nbsp;</span>}
        </React.Fragment>
      ))}
    </Tag>
  );
}

window.DecodeText = DecodeText;