// chaos-section.jsx — GSAP ScrollTrigger pinned convergence

const ChaosSection = () => {
  const sectionRef = React.useRef(null);
  const stageRef = React.useRef(null);
  const titleRef = React.useRef(null);
  const subRef = React.useRef(null);
  const eyebrowRef = React.useRef(null);
  const tilesRef = React.useRef([]);
  const targetRef = React.useRef(null);
  const progressFillRef = React.useRef(null);
  const progressLabelRef = React.useRef(null);

  const tiles = React.useMemo(() => {
    const items = [
      'contracts.pdf', 'onboarding.md', 'policies/', 'engineering-wiki',
      'sales-playbook', 'notion-pages', 'confluence', 'slack-threads',
      'google-drive', 'legacy-cms', 'internal-blog', 'training-docs',
      'architecture.md', 'api-reference', 'support-tickets', 'post-mortems',
    ];
    return items.map((label, i) => {
      const seed = i * 9301 + 49297;
      const rx = (seed % 233280) / 233280;
      const ry = ((seed * 3) % 233280) / 233280;
      const rr = ((seed * 7) % 233280) / 233280;
      return {
        label,
        x: 50 + rx * 45,
        y: ry * 80 + 8,
        rot: (rr - 0.5) * 18,
      };
    });
  }, []);

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

    const section = sectionRef.current;
    const stage = stageRef.current;
    if (!section || !stage) return;

    const ctx = gsap.context(() => {
      // Entrance — copy fades up before the pin locks in
      gsap.from([eyebrowRef.current, titleRef.current, subRef.current], {
        opacity: 0, y: 24, duration: 0.8, stagger: 0.12,
        ease: 'power2.out',
        scrollTrigger: {
          trigger: section,
          start: 'top 70%',
          toggleActions: 'play none none reverse',
        },
      });

      // Pinned convergence timeline
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          start: 'top top',
          end: '+=180%', // scroll distance inside the pin
          pin: stage,
          scrub: 0.6,
          anticipatePin: 1,
        },
      });

      // tiles: drift -> converge to target point (72%, 50%)
      const cx = 72, cy = 50;
      tilesRef.current.forEach((el, i) => {
        if (!el) return;
        const t = tiles[i];
        const dx = cx - t.x;
        const dy = cy - t.y;
        tl.to(el, {
          xPercent: dx * 14, // approx: tile moves across its own width grid
          yPercent: dy * 10,
          scale: 0.15,
          opacity: 0,
          rotate: 0,
          ease: 'power2.inOut',
          duration: 1,
        }, 0 + (i % 5) * 0.02); // tiny stagger
      });

      // target block: fades + scales in
      tl.fromTo(targetRef.current,
        { opacity: 0, scale: 0.5 },
        { opacity: 1, scale: 1, ease: 'power2.out', duration: 1 },
        0.35);

      // progress bar + label driven by the same timeline
      tl.fromTo(progressFillRef.current,
        { width: '0%' },
        { width: '100%', ease: 'none', duration: 1 },
        0);

      // label counter via onUpdate
      tl.to({ v: 0 }, {
        v: 100, duration: 1, ease: 'none',
        onUpdate: function () {
          const v = Math.round(this.targets()[0].v);
          if (progressLabelRef.current) {
            progressLabelRef.current.textContent = 'Unificando ' + v + '%';
          }
        },
      }, 0);
    }, section);

    return () => ctx.revert();
  }, [tiles]);

  return (
    <section
      ref={sectionRef}
      data-screen-label="02 Chaos"
      style={{
        position: 'relative',
        background: '#f9f9f9',
        color: '#0d0d0d',
      }}
    >
      <div
        ref={stageRef}
        style={{
          position: 'relative',
          height: '100vh',
          overflow: 'hidden',
        }}
      >
        {/* Tiles layer (right half, masked) */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, transparent 40%, #000 56%, #000 100%)',
          maskImage: 'linear-gradient(90deg, transparent 0%, transparent 40%, #000 56%, #000 100%)',
        }}>
          {tiles.map((tile, i) => (
            <div
              key={i}
              ref={el => { tilesRef.current[i] = el; }}
              style={{
                position: 'absolute',
                left: `${tile.x}%`, top: `${tile.y}%`,
                transform: `translate(-50%, -50%) rotate(${tile.rot}deg)`,
                border: '1px solid rgba(13,13,13,0.18)',
                background: '#fff',
                padding: '8px 14px',
                fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                fontSize: 12,
                color: '#282828',
                whiteSpace: 'nowrap',
                boxShadow: '2px 4px 0 rgba(13,13,13,0.08)',
                willChange: 'transform, opacity',
              }}
            >
              {tile.label}
            </div>
          ))}

          {/* Target */}
          <div
            ref={targetRef}
            style={{
              position: 'absolute',
              left: '72%', top: '50%',
              transform: 'translate(-50%, -50%)',
              opacity: 0,
              padding: '28px 36px',
              background: '#0d0d0d',
              color: '#f9f9f9',
              fontWeight: 600,
              fontSize: 18,
              letterSpacing: '0.02em',
              display: 'flex', alignItems: 'center', gap: 14,
              boxShadow: '0 30px 80px rgba(13,13,13,0.25)',
              willChange: 'transform, opacity',
            }}
          >
            <span style={{ width: 9, height: 9, background: '#a1f75e' }} />
            INDEXED · UNIFIED · NEXUS
          </div>
        </div>

        {/* Copy */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
          padding: '0 clamp(24px, 5vw, 60px)',
          maxWidth: 1400, margin: '0 auto',
          pointerEvents: 'none',
        }}>
          <div ref={eyebrowRef} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
            fontWeight: 600, marginBottom: 24, color: '#0d0d0d',
          }}>
            <span style={{ width: 9, height: 9, background: '#0d0d0d', display: 'inline-block' }} />
            01 · El problema
          </div>
          <h2 ref={titleRef} style={{
            fontSize: 'clamp(40px, 6vw, 88px)',
            fontWeight: 600, lineHeight: 1.0,
            letterSpacing: '-0.025em', maxWidth: '14ch', margin: 0,
          }}>
            El conocimiento<br/>
            de tu empresa<br/>
            está <span style={{ color: 'rgba(13,13,13,0.3)' }}>en todas partes.</span>
          </h2>
          <p ref={subRef} style={{
            marginTop: 28, fontSize: 'clamp(16px, 1.3vw, 19px)',
            maxWidth: '48ch', lineHeight: 1.55,
            color: 'rgba(13,13,13,0.72)',
          }}>
            Wikis, PDFs, Notion, Drive, repositorios, tickets. Cada agente de IA
            que abres empieza de cero porque no encuentra nada de lo que <strong>ya sabes</strong>.
          </p>

          <div style={{
            marginTop: 44, display: 'flex', alignItems: 'center', gap: 14,
            fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
            fontWeight: 600, color: 'rgba(13,13,13,0.55)',
            fontFamily: "'JetBrains Mono', ui-monospace, monospace",
          }}>
            <div style={{
              width: 160, height: 2, background: 'rgba(13,13,13,0.15)', position: 'relative',
            }}>
              <div ref={progressFillRef} style={{
                position: 'absolute', left: 0, top: 0, height: '100%',
                background: '#0d0d0d', width: '0%',
              }}/>
            </div>
            <span ref={progressLabelRef}>Unificando 0%</span>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ChaosSection });