// Wait for DOM to load
document.addEventListener('DOMContentLoaded', function() {
    
    // Navbar scroll effect
    const navbar = document.querySelector('.navbar');
    let lastScroll = 0;
    
    window.addEventListener('scroll', () => {
        const currentScroll = window.pageYOffset;
        
        if (currentScroll > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
        
        lastScroll = currentScroll;
    });
    
    // Mobile menu toggle
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (mobileMenuToggle) {
        mobileMenuToggle.addEventListener('click', () => {
            mobileMenuToggle.classList.toggle('active');
            navMenu.classList.toggle('active');
        });
    }
    
    // Smooth scrolling for navigation links
    const navLinks = document.querySelectorAll('a[href^="#"]');
    
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);
            
            if (targetSection) {
                const navHeight = navbar.offsetHeight;
                const targetPosition = targetSection.offsetTop - navHeight;
                
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
                
                // Close mobile menu if open
                mobileMenuToggle.classList.remove('active');
                navMenu.classList.remove('active');
            }
        });
    });
    
    // Number counter animation
    const animateNumbers = () => {
        const numbers = document.querySelectorAll('.stat-number');
        
        numbers.forEach(number => {
            const target = parseInt(number.getAttribute('data-target'));
            const increment = target / 100;
            let current = 0;
            
            const updateNumber = () => {
                if (current < target) {
                    current += increment;
                    number.textContent = Math.floor(current).toLocaleString();
                    requestAnimationFrame(updateNumber);
                } else {
                    number.textContent = target.toLocaleString();
                }
            };
            
            updateNumber();
        });
    };
    
    // Intersection Observer for animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -100px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.animationPlayState = 'running';
                
                // Trigger number animation for stats section
                if (entry.target.classList.contains('stats')) {
                    animateNumbers();
                }
                
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    // Observe all animated elements
    const animatedElements = document.querySelectorAll('.fade-in-up, .fade-in-down, .slide-in-left, .slide-in-right, .stats, .pop-in');
    animatedElements.forEach(el => {
    if (el.classList.contains('pop-in')) {
        el.addEventListener('animationend', function() {
            const icon = this.querySelector('.step-icon');
            if (icon) {
                icon.classList.add('is-animating');
            }
        }, { once: true });
    }
        el.style.animationPlayState = 'paused';
        observer.observe(el);
    });
    
   
    
    // Add hover effect to cards
    const cards = document.querySelectorAll('.feature-card, .card');
    
    cards.forEach(card => {
        card.addEventListener('mouseenter', function(e) {
            const rect = this.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            this.style.transform = `
                perspective(1000px)
                rotateX(${(y - rect.height / 2) / 10}deg)
                rotateY(${(x - rect.width / 2) / 10}deg)
                translateZ(10px)
            `;
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = '';
        });
    });
    
    // Button ripple effect
    const buttons = document.querySelectorAll('.btn-primary, .btn-outline');
    
    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;
            
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            ripple.classList.add('ripple');
            
            this.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });
    
    // Floating elements animation
    const floatingElements = document.querySelectorAll('.floating');
    
    floatingElements.forEach((el, index) => {
        el.style.animationDelay = `${index * 0.2}s`;
    });
    
    // Lazy loading for images
    const images = document.querySelectorAll('img[data-src]');
    
    const imageObserver = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
                imageObserver.unobserve(img);
            }
        });
    });
    
    images.forEach(img => imageObserver.observe(img));
    
    // Form validation (if you add forms later)
    const forms = document.querySelectorAll('form');
    
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Add your form submission logic here
            console.log('Form submitted');
        });
    });
});

// Add ripple effect styles dynamically
const style = document.createElement('style');
style.textContent = `
    .ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        transform: scale(0);
        animation: ripple-animation 0.6s ease-out;
        pointer-events: none;
    }
    
    @keyframes ripple-animation {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
    
    .nav-menu.active {
        display: flex !important;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
    }

    
`;
document.head.appendChild(style);

// Logo slider auto-slide
const sliderSection = document.querySelector('.logo-slider-section');
const logos = sliderSection.querySelectorAll('.logo-img');
const dots = sliderSection.querySelectorAll('.slider-dots .dot');
let currentLogo = 0;
const logoCount = logos.length;
let sliderInterval;

function showLogo(index) {
    logos.forEach((logo, i) => {
        logo.classList.toggle('active', i === index);
    });
    dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
    });
    currentLogo = index;
}

function nextLogo() {
    let next = (currentLogo + 1) % logoCount;
    showLogo(next);
}

sliderInterval = setInterval(nextLogo, 2300); // Change logo every 2.3 seconds

// Optional: Click dots to select logo
dots.forEach((dot, idx) => {
    dot.addEventListener('click', () => {
        showLogo(idx);
        clearInterval(sliderInterval); // Stop auto-slide on manual select
        sliderInterval = setInterval(nextLogo, 2300); // Resume after click
    });
});

// Initial show
showLogo(0);


// Intersection Observer for distributor section animations
const fadeEls = document.querySelectorAll('.fade-in-up');
const onScroll = () => {
  fadeEls.forEach(el => {
    const rect = el.getBoundingClientRect();
    if(rect.top < window.innerHeight - 60) {
      el.classList.add('visible');
    }
  });
};
window.addEventListener('scroll', onScroll);
window.addEventListener('load', onScroll);

document.querySelectorAll('.faq-accordion .faq-question').forEach(btn => {
  btn.addEventListener('click', function() {
    const parent = this.parentElement;
    if(parent.classList.contains('active')) {
      parent.classList.remove('active');
    } else {
      // Close others
      parent.parentElement.querySelectorAll('.faq-item').forEach(i => i.classList.remove('active'));
      parent.classList.add('active');
    }
  });
});
document.addEventListener('DOMContentLoaded', function() {
  const track = document.querySelector('.carousel-track');
  if (!track) return;
  const cards = Array.from(track.children);
  // Duplicate all testimonial cards for seamless loop
  cards.forEach(card => {
    const clone = card.cloneNode(true);
    track.appendChild(clone);
  });

  // Calculate total width of one set of cards
  const cardWidth = cards[0].offsetWidth;
  const gap = parseInt(getComputedStyle(track).gap) || 32;
  const totalWidth = (cardWidth + gap) * cards.length;

  let pos = 0;
  function animate() {
    pos -= 1; // px per frame, decrease for slower scroll
    if (Math.abs(pos) >= totalWidth) {
      pos = 0;
    }
    track.style.transform = `translateX(${pos}px)`;
    requestAnimationFrame(animate);
  }
  animate();

  // Optional: recalculate on resize for super accuracy
  window.addEventListener('resize', () => {
 
  });
});

