/* ScrollFloat — split text into chars, animate away on scroll. */
const { useEffect: useEffectSF, useRef: useRefSF } = React;

function ScrollFloat({ children, className, style }) {
  const rootRef = useRefSF(null);

  useEffectSF(() => {
    const root = rootRef.current;
    if (!root || !window.gsap || !window.ScrollTrigger) return;
    const chars = root.querySelectorAll('.char');
    const tween = window.gsap.fromTo(chars,
      { opacity: 1, yPercent: 0, scaleY: 1, scaleX: 1, transformOrigin: '50% 0%' },
      {
        opacity: 0, yPercent: 250, scaleY: 1.2, scaleX: 0.9,
        ease: 'power2.inOut', stagger: 0.05, duration: 1,
        scrollTrigger: {
          trigger: document.body,
          start: 'top top',
          end: '+=600',
          scrub: 1.5,
        },
      }
    );
    return () => {
      tween.scrollTrigger && tween.scrollTrigger.kill();
      tween.kill();
    };
  }, [children]);

  // Split text → lines → words → chars
  const text = String(children || '');
  const lines = text.split('\n');

  return (
    <div
      ref={rootRef}
      className={`scroll-float-text ${className || ''}`}
      style={style}
    >
      {lines.map((line, li) => {
        // Parse **accent** segments
        const segments = line.split(/(\*\*[^*]+\*\*)/g).filter(Boolean);
        return (
          <span key={li} style={{ display: 'block' }}>
            {segments.map((seg, si) => {
              const isAccent = seg.startsWith('**') && seg.endsWith('**');
              const text = isAccent ? seg.slice(2, -2) : seg;
              const words = text.split(' ');
              return (
                <React.Fragment key={si}>
                  {words.map((word, wi) => (
                    <React.Fragment key={wi}>
                      <span style={{ display: 'inline-block', whiteSpace: 'nowrap', color: isAccent ? 'var(--accent, #3bb8f4)' : 'inherit' }}>
                        {Array.from(word).map((ch, ci) => (
                          <span key={ci} className="char">{ch}</span>
                        ))}
                      </span>
                      {wi < words.length - 1 && <span>&nbsp;</span>}
                    </React.Fragment>
                  ))}
                </React.Fragment>
              );
            })}
          </span>
        );
      })}
    </div>
  );
}

window.ScrollFloat = ScrollFloat;