// Scroll animations functionality - DIRECT approach
let observer;
let animatedElements = [];

function init() {
  console.log('Starting scroll animations...');
  
  // Step 1: Find ALL elements with animate-in class and remove it
  const allAnimatedElements = document.querySelectorAll('.animate-in');
  allAnimatedElements.forEach(element => {
    element.classList.remove('animate-in');
    console.log('Removed animate-in from:', element);
  });
  
  // Step 2: Find elements with scroll-animate and set them up
  const scrollElements = document.querySelectorAll('.scroll-animate');
  console.log(`Found ${scrollElements.length} scroll elements`);
  
  if (scrollElements.length === 0) {
    console.log('No scroll-animate elements found');
    return;
  }
  
  // Step 3: Hide all scroll elements initially
  scrollElements.forEach(element => {
    const animation = element.getAttribute('data-animation') || 'fade-in-up';
    
    // Force initial hidden state
    element.style.opacity = '0';
    element.style.visibility = 'hidden';
    element.style.transition = 'all 0.8s ease-out';
    
    // Set transform based on animation type
    switch(animation) {
      case 'fade-in-up':
        element.style.transform = 'translateY(50px)';
        break;
      case 'fade-in-left':
        element.style.transform = 'translateX(-50px)';
        break;
      case 'fade-in-right':
        element.style.transform = 'translateX(50px)';
        break;
      case 'fade-in-down':
        element.style.transform = 'translateY(-50px)';
        break;
      default:
        element.style.transform = 'translateY(30px)';
    }
    
    console.log(`Set initial state for element with animation: ${animation}`);
  });
  
  // Step 4: Create observer
  observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const element = entry.target;
        console.log('Element entering view:', element);
        
        // Show the element with animation
        element.style.opacity = '1';
        element.style.visibility = 'visible';
        element.style.transform = 'translateX(0) translateY(0)';
        
        // Stop observing this element
        observer.unobserve(element);
      }
    });
  }, {
    threshold: 0.15,
    rootMargin: '0px 0px -20px 0px'
  });
  
  // Step 5: Observe all elements
  scrollElements.forEach(element => {
    observer.observe(element);
    animatedElements.push(element);
  });
  
  console.log('Scroll observer initialized');
}

function teardown() {
  console.log('Cleaning up scroll animations');
  
  if (observer) {
    observer.disconnect();
    observer = null;
  }
  
  animatedElements.forEach(element => {
    element.classList.remove('animate-in');
    element.style.opacity = '';
    element.style.visibility = '';
    element.style.transform = '';
    element.style.transition = '';
  });
  
  animatedElements = [];
}

// Export functions
export { init, teardown };