/**
 * Modern About Page JavaScript
 * Animations and 3D effects for the about page
 */

document.addEventListener('DOMContentLoaded', function() {
  // Initialize AOS animations
  AOS.init({
    duration: 800,
    easing: 'ease-out',
    once: true
  });

  // Initialize Vanilla Tilt for 3D hover effect on feature boxes
  VanillaTilt.init(document.querySelectorAll('.feature-box'), {
    max: 10,
    speed: 400,
    glare: true,
    'max-glare': 0.2,
    scale: 1.05
  });

  // Initialize Vanilla Tilt for about image
  VanillaTilt.init(document.querySelectorAll('.about-image'), {
    max: 5,
    speed: 400,
    glare: false,
    scale: 1.01
  });
  
  // Initialize Particles.js for banner background
  if (document.getElementById('particles-js')) {
    particlesJS('particles-js', {
      particles: {
        number: {
          value: 80,
          density: {
            enable: true,
            value_area: 800
          }
        },
        color: {
          value: '#ffffff'
        },
        shape: {
          type: 'circle',
          stroke: {
            width: 0,
            color: '#000000'
          }
        },
        opacity: {
          value: 0.5,
          random: true
        },
        size: {
          value: 3,
          random: true
        },
        line_linked: {
          enable: true,
          distance: 150,
          color: '#ffffff',
          opacity: 0.4,
          width: 1
        },
        move: {
          enable: true,
          speed: 2,
          direction: 'none',
          random: false,
          straight: false,
          out_mode: 'out',
          bounce: false
        }
      },
      interactivity: {
        detect_on: 'canvas',
        events: {
          onhover: {
            enable: true,
            mode: 'grab'
          },
          onclick: {
            enable: true,
            mode: 'push'
          },
          resize: true
        }
      },
      retina_detect: true
    });
  }
  
  // Initialize Counter animation for statistics
  const counters = document.querySelectorAll('.counter');
  if (counters.length) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const target = entry.target;
          const countTo = parseInt(target.innerText);
          let current = 0;
          const increment = countTo / 80; // Divide by the number of steps
          const timer = setInterval(() => {
            current += increment;
            if (current >= countTo) {
              target.innerText = countTo;
              clearInterval(timer);
            } else {
              target.innerText = Math.round(current);
            }
          }, 20);
          observer.unobserve(target);
        }
      });
    }, { threshold: 0.5 });
    
    counters.forEach(counter => {
      observer.observe(counter);
    });
  }
  
  // Animate progress bars on scroll
  const animateProgressBars = () => {
    const progressBars = document.querySelectorAll('.animated-progress');
    
    progressBars.forEach(bar => {
      const width = bar.getAttribute('data-width');
      bar.style.width = '0%';
      
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setTimeout(() => {
              bar.style.width = width;
              
              // Add completed class when progress bar reaches 100%
              if (width === '100%') {
                setTimeout(() => {
                  bar.classList.add('completed');
                }, 500);
              }
            }, 200);
            
            observer.unobserve(bar);
          }
        });
      }, { threshold: 0.2 });
      
      observer.observe(bar);
    });
  };
  
  animateProgressBars();
  
  // Magnific Popup for gallery
  if ($.fn.magnificPopup) {
    $('.gallery-popup').magnificPopup({
      type: 'image',
      gallery: {
        enabled: true
      },
      zoom: {
        enabled: true,
        duration: 300,
        easing: 'ease-in-out'
      }
    });
  }
  
  // 3D tilt effect for elements with class "tilt-element"
  const tiltElements = document.querySelectorAll('.tilt-element');
  
  tiltElements.forEach(element => {
    element.addEventListener('mousemove', function(e) {
      const rect = this.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      const centerX = rect.width / 2;
      const centerY = rect.height / 2;
      
      const rotateX = (y - centerY) / 10;
      const rotateY = (centerX - x) / 10;
      
      this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    });
    
    element.addEventListener('mouseleave', function() {
      this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
    });
  });
  
  // Testimonial rotation
  const testimonialCards = document.querySelectorAll('.testimonial-card');
  
  testimonialCards.forEach(card => {
    card.addEventListener('mousemove', function(e) {
      const rect = this.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      const centerX = rect.width / 2;
      const centerY = rect.height / 2;
      
      const rotateX = (y - centerY) / 20;
      const rotateY = (centerX - x) / 20;
      
      this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    });
    
    card.addEventListener('mouseleave', function() {
      this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
    });
  });
  
  // Scroll reveal animation
  const scrollElements = document.querySelectorAll('.fade-in, .fade-in-up, .fade-in-down, .fade-in-left, .fade-in-right, .scale-in');
  
  const elementInView = (el, scrollOffset = 100) => {
    const elementTop = el.getBoundingClientRect().top;
    return (elementTop <= (window.innerHeight || document.documentElement.clientHeight) - scrollOffset);
  };
  
  const displayScrollElement = (element) => {
    element.classList.add('active');
  };
  
  const hideScrollElement = (element) => {
    element.classList.remove('active');
  };
  
  const handleScrollAnimation = () => {
    scrollElements.forEach((el) => {
      if (elementInView(el, 100)) {
        displayScrollElement(el);
      } else {
        hideScrollElement(el);
      }
    });
  };
  
  window.addEventListener('scroll', () => {
    handleScrollAnimation();
  });
  
  // Initialize animation on page load
  handleScrollAnimation();
  
  // Initialize team member hover effect
  const teamMembers = document.querySelectorAll('.team-member');
  
  teamMembers.forEach(member => {
    member.addEventListener('mouseenter', function() {
      this.querySelector('.member-overlay').style.opacity = '1';
      this.querySelector('.member-social').style.transform = 'translateY(0)';
      this.querySelector('.member-social').style.opacity = '1';
    });
    
    member.addEventListener('mouseleave', function() {
      this.querySelector('.member-overlay').style.opacity = '0';
      this.querySelector('.member-social').style.transform = 'translateY(20px)';
      this.querySelector('.member-social').style.opacity = '0';
    });
  });
});

// Parallax effect for banner section
document.addEventListener('mousemove', function(e) {
  const banner = document.querySelector('.page-banner');
  if (banner) {
    const content = banner.querySelector('.page-banner-content');
    const x = e.clientX / window.innerWidth;
    const y = e.clientY / window.innerHeight;
    
    if (content) {
      content.style.transform = `translateX(${x * 20}px) translateY(${y * 20}px) translateZ(20px)`;
    }
  }
});