// Scroll Animation Observer
let scrollObserver;

// Initialize scroll animations
function initScrollAnimations() {
  const animatedElements = document.querySelectorAll('.animate-on-scroll');
  
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };

  scrollObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate');
        // Add staggered delays for multiple elements
        const siblings = Array.from(entry.target.parentNode.children);
        const index = siblings.indexOf(entry.target);
        if (index > 0) {
          entry.target.style.animationDelay = `${index * 0.1}s`;
        }
      }
    });
  }, observerOptions);

  animatedElements.forEach((element) => {
    scrollObserver.observe(element);
  });
}

// Add smooth scrolling for navigation links
function initSmoothScrolling() {
  const links = document.querySelectorAll('a[href^="#"]');
  
  links.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      const targetElement = document.querySelector(targetId);
      
      if (targetElement) {
        targetElement.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    });
  });
}

// Add enhanced hover effects for service cards
function initEnhancedHovers() {
  const serviceCards = document.querySelectorAll('.group');
  
  serviceCards.forEach(card => {
    card.addEventListener('mouseenter', function() {
      // Add subtle background animation
      const bgImage = this.querySelector('.absolute.inset-0');
      if (bgImage) {
        bgImage.style.transform = 'scale(1.05)';
        bgImage.style.transition = 'transform 0.5s ease';
      }
    });
    
    card.addEventListener('mouseleave', function() {
      const bgImage = this.querySelector('.absolute.inset-0');
      if (bgImage) {
        bgImage.style.transform = 'scale(1)';
      }
    });
  });
}

// Add loading animation for images
function initImageLoading() {
  const images = document.querySelectorAll('img');
  
  images.forEach(img => {
    if (!img.complete) {
      img.style.opacity = '0';
      img.style.transition = 'opacity 0.5s ease';
      
      img.addEventListener('load', function() {
        this.style.opacity = '1';
      });
    }
  });
}

// Add dynamic gradient animation to text
function initDynamicGradients() {
  const gradientTexts = document.querySelectorAll('.gradient-text');
  
  gradientTexts.forEach(text => {
    text.addEventListener('mouseenter', function() {
      this.style.animationDuration = '1s';
    });
    
    text.addEventListener('mouseleave', function() {
      this.style.animationDuration = '3s';
    });
  });
}

// Initialize everything when DOM is loaded
function init() {
  // Small delay to ensure DOM is fully rendered
  setTimeout(() => {
    initScrollAnimations();
    initSmoothScrolling();
    initEnhancedHovers();
    initImageLoading();
    initDynamicGradients();
  }, 100);
}

// Cleanup function
function teardown() {
  if (scrollObserver) {
    scrollObserver.disconnect();
    scrollObserver = null;
  }
  
  // Remove event listeners would go here if we stored references
  // For now, the page refresh will handle cleanup
}

// Export functions for the system
window.pageInit = init;
window.pageTeardown = teardown;

// Also export the functions directly
export { init, teardown };