import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Lenis from 'lenis';

gsap.registerPlugin(ScrollTrigger);

export function initAnimations() {
  const lenis = initLenis();
  initHeroAnimations();
  initSectionAnimations();
  initMagneticButtons();
  initParallaxVideos();
}

function initLenis() {
  const lenis = new Lenis({
    duration: 1.2,
    easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    orientation: 'vertical',
    gestureOrientation: 'vertical',
    smoothWheel: true,
    touchMultiplier: 2,
  });

  lenis.on('scroll', ScrollTrigger.update);

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  gsap.ticker.lagSmoothing(0);

  return lenis;
}

function initHeroAnimations() {
  const heroText = document.querySelectorAll('.hero-text');
  if (heroText.length) {
    gsap.from(heroText, {
      y: 30,
      opacity: 0,
      duration: 1.2,
      stagger: 0.15,
      ease: 'power3.out',
      delay: 0.2
    });
  }
}

function initSectionAnimations() {
  const sections = document.querySelectorAll('section:not(#hero):not(#problem-section)');
  sections.forEach(section => {
    const content = section.querySelectorAll('h2, h3, p, .btn-pill, .grid, .relative:not(.overflow-hidden)');

    if (content.length) {
      gsap.from(content, {
        y: 40,
        opacity: 0,
        duration: 0.8,
        stagger: 0.05,
        ease: 'power2.out',
        scrollTrigger: {
          trigger: section,
          start: "top 80%",
          toggleActions: "play none none reverse"
        }
      });
    }
  });
}

function initMagneticButtons() {
  const magnets = document.querySelectorAll('.magnet-target');

  magnets.forEach((magnet) => {
    magnet.addEventListener('mousemove', (e: Event) => {
      const mouseEvent = e as MouseEvent;
      const el = magnet as HTMLElement;
      const bound = el.getBoundingClientRect();
      const x = mouseEvent.clientX - bound.left - bound.width / 2;
      const y = mouseEvent.clientY - bound.top - bound.height / 2;

      gsap.to(el, {
        duration: 0.4,
        x: x * 0.3,
        y: y * 0.3,
        ease: 'power2.out'
      });
    });

    magnet.addEventListener('mouseleave', (e: Event) => {
      const el = e.currentTarget as HTMLElement;
      gsap.to(el, {
        duration: 0.7,
        x: 0,
        y: 0,
        ease: 'elastic.out(1, 0.3)'
      });
    });
  });
}

function initParallaxVideos() {
  // Hero video parallax - smooth, subtle movement
  const heroVideo = document.querySelector('.hero-parallax-video');
  if (heroVideo) {
    gsap.fromTo(heroVideo,
      { y: -100 },
      {
        y: 100,
        ease: 'none',
        scrollTrigger: {
          trigger: '#hero',
          start: 'top top',
          end: 'bottom top',
          scrub: true,
        }
      }
    );
  }

  // ValueProp section video parallax
  const valuePropVideo = document.querySelector('.parallax-video-bg');
  if (valuePropVideo) {
    gsap.fromTo(valuePropVideo,
      { y: -80 },
      {
        y: 80,
        ease: 'none',
        scrollTrigger: {
          trigger: valuePropVideo.parentElement,
          start: 'top bottom',
          end: 'bottom top',
          scrub: true,
        }
      }
    );
  }
}
