// animations.jsx — GSAP motion layer (no build step, CDN globals)
const { useEffect: useEffectAnim } = React;

function AnimationLayer() {
  useEffectAnim(() => {
    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;
    gsap.registerPlugin(ScrollTrigger);

    // ── 1. Header: slide down on load ──────────────────────────────────
    gsap.from('.hd', {
      y: -56, opacity: 0, duration: 0.8, ease: 'power3.out', delay: 0.05
    });

    // ── 2. Hero: staggered entrance ────────────────────────────────────
    const heroTl = gsap.timeline({ delay: 0.25 });
    heroTl
      .from('.hero .eyebrow', { y: 16, opacity: 0, duration: 0.55, ease: 'power3.out' })
      .from('.hero h1',        { y: 32, opacity: 0, duration: 0.75, ease: 'power3.out' }, '-=0.35')
      .from('.hero .lead',     { y: 22, opacity: 0, duration: 0.65, ease: 'power3.out' }, '-=0.45')
      .from('.hero .cta-row',  { y: 18, opacity: 0, duration: 0.55, ease: 'power3.out' }, '-=0.4')
      .from('.gapviz', {
        y: 28, opacity: 0, scale: 0.97, duration: 0.75, ease: 'power3.out',
        transformOrigin: 'center bottom'
      }, '-=0.3');

    // ── 3. Section headings: fade-up on scroll ─────────────────────────
    gsap.utils.toArray('.section-head').forEach(el => {
      gsap.from(el, {
        y: 28, opacity: 0, duration: 0.65, ease: 'power3.out',
        scrollTrigger: { trigger: el, start: 'top 87%', once: true }
      });
    });

    // ── 4. Brand tiles: staggered scale + fade ─────────────────────────
    gsap.from('.brand-tile', {
      y: 40, opacity: 0, scale: 0.96, duration: 0.7, stagger: 0.14,
      ease: 'power3.out', transformOrigin: 'center bottom',
      scrollTrigger: { trigger: '.brands', start: 'top 83%', once: true }
    });

    // ── 5. Service cards: staggered fade-up ────────────────────────────
    gsap.from('.svc', {
      y: 36, opacity: 0, duration: 0.6, stagger: 0.1, ease: 'power3.out',
      scrollTrigger: { trigger: '.svc-grid', start: 'top 85%', once: true }
    });

    // ── 6. Stack rows: slide in from left ─────────────────────────────
    gsap.from('.stack-row', {
      x: -30, opacity: 0, duration: 0.55, stagger: 0.08, ease: 'power3.out',
      scrollTrigger: { trigger: '.stack-list', start: 'top 83%', once: true }
    });

    // ── 7. Stats block: fade + scale ──────────────────────────────────
    gsap.from('.stats', {
      y: 30, opacity: 0, scale: 0.985, duration: 0.75, ease: 'power3.out',
      scrollTrigger: { trigger: '.stats', start: 'top 85%', once: true }
    });

    // Word-by-word scrub on stats heading
    const statsH2 = document.querySelector('.stats h2');
    if (statsH2) {
      const words = statsH2.textContent.trim().split(/\s+/);
      statsH2.innerHTML = words
        .map(w => `<span class="ws" style="opacity:0.12;display:inline">${w}</span>`)
        .join(' ');
      gsap.to('.ws', {
        opacity: 1,
        stagger: 0.09,
        ease: 'none',
        scrollTrigger: {
          trigger: '.stats',
          start: 'top 78%',
          end: 'center 50%',
          scrub: 0.7
        }
      });
    }

    // Count-up animation on stat numbers
    document.querySelectorAll('.stat-num').forEach(el => {
      const raw = el.getAttribute('data-val');
      if (!raw) return;
      const isFloat = raw.includes(',');
      const finalNum = parseFloat(raw.replace(',', '.'));
      const obj = { val: 0 };
      ScrollTrigger.create({
        trigger: el,
        start: 'top 88%',
        once: true,
        onEnter: () => {
          gsap.to(obj, {
            val: finalNum,
            duration: 1.8,
            ease: 'power2.out',
            onUpdate: () => {
              el.textContent = isFloat
                ? obj.val.toFixed(1).replace('.', ',')
                : Math.round(obj.val).toString();
            }
          });
        }
      });
    });

    // ── 8. About: split left/right fade-up ─────────────────────────────
    gsap.from('.about-copy', {
      y: 28, opacity: 0, duration: 0.65, ease: 'power3.out',
      scrollTrigger: { trigger: '.about', start: 'top 85%', once: true }
    });
    gsap.from('.about-card', {
      y: 28, opacity: 0, duration: 0.65, ease: 'power3.out',
      scrollTrigger: { trigger: '.about', start: 'top 85%', once: true, delay: 0.12 }
    });

    // ── 9. Contact block ───────────────────────────────────────────────
    gsap.from('.contact', {
      y: 28, opacity: 0, scale: 0.985, duration: 0.7, ease: 'power3.out',
      scrollTrigger: { trigger: '.contact', start: 'top 85%', once: true }
    });

    // ── 10. Footer ─────────────────────────────────────────────────────
    gsap.from('.ft-inner', {
      y: 24, opacity: 0, duration: 0.65, ease: 'power3.out',
      scrollTrigger: { trigger: '.ft', start: 'top 90%', once: true }
    });

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

  return null;
}

Object.assign(window, { AnimationLayer });