// Modern JavaScript for Brabus website
document.addEventListener('DOMContentLoaded', function() {
    // Elements
    const header = document.querySelector('header');
    const cars = document.querySelectorAll('.carousel-item');
    const indicators = document.querySelectorAll('.indicator');
    const totalCars = cars.length;
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    
    // Initial state
    let currentIndex = 0;
    let isAnimating = false;
    
    // Header scroll effect
    function handleHeaderScroll() {
        if (window.scrollY > 50) {
            header.style.backgroundColor = 'rgba(29, 29, 31, 0.95)';
            header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
        } else {
            header.style.backgroundColor = 'rgba(29, 29, 31, 0.8)';
            header.style.boxShadow = 'none';
        }
    }
    
    window.addEventListener('scroll', handleHeaderScroll);
    
    // Carousel navigation
    function showCar(index) {
        if (isAnimating) return;
        isAnimating = true;
        
        // Update carousel position
        cars.forEach((car, i) => {
            car.style.transform = `translateX(${(i - index) * 100}%)`;
        });
        
        // Update indicators
        indicators.forEach((indicator, i) => {
            indicator.classList.toggle('active', i === index);
        });
        
        // Reset animation lock after transition finishes
        setTimeout(() => {
            isAnimating = false;
        }, 800);  // Match CSS transition time
        
        currentIndex = index;
    }
    
    // Event listeners for buttons
    prevBtn.addEventListener('click', () => {
        const newIndex = (currentIndex - 1 + totalCars) % totalCars;
        showCar(newIndex);
    });
    
    nextBtn.addEventListener('click', () => {
        const newIndex = (currentIndex + 1) % totalCars;
        showCar(newIndex);
    });
    
    // Event listeners for indicators
    indicators.forEach(indicator => {
        indicator.addEventListener('click', () => {
            const index = parseInt(indicator.dataset.index);
            showCar(index);
        });
    });
    
    // Auto-rotate carousel
    let carouselInterval = setInterval(() => {
        showCar((currentIndex + 1) % totalCars);
    }, 5000);
    
    // Pause auto-rotation when user interacts with carousel
    const carouselContainer = document.querySelector('.carousel-container');
    
    carouselContainer.addEventListener('mouseenter', () => {
        clearInterval(carouselInterval);
    });
    
    carouselContainer.addEventListener('mouseleave', () => {
        carouselInterval = setInterval(() => {
            showCar((currentIndex + 1) % totalCars);
        }, 5000);
    });
    
    // Button hover effects
    const buttons = document.querySelectorAll('.btn-main, .btn-buy');
    
    buttons.forEach(button => {
        button.addEventListener('mouseenter', () => {
            button.style.transform = 'translateY(-2px)';
            button.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
        });
        
        button.addEventListener('mouseleave', () => {
            button.style.transform = '';
            button.style.boxShadow = '';
        });
    });
    
    // Smooth scroll for navigation links
    const navLinks = document.querySelectorAll('.nav-link');
    
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            // Add smooth scroll logic here when sections are added
        });
    });
    
    // Touch support for carousel
    let touchStartX = 0;
    let touchEndX = 0;
    
    const carousel = document.querySelector('.carousel');
    
    carousel.addEventListener('touchstart', (e) => {
        touchStartX = e.changedTouches[0].screenX;
    }, { passive: true });
    
    carousel.addEventListener('touchend', (e) => {
        touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
    }, { passive: true });
    
    function handleSwipe() {
        const threshold = 50;  // Minimum swiping distance
        
        if (touchStartX - touchEndX > threshold) {
            // Swipe left -> next
            showCar((currentIndex + 1) % totalCars);
        } else if (touchEndX - touchStartX > threshold) {
            // Swipe right -> prev
            showCar((currentIndex - 1 + totalCars) % totalCars);
        }
    }
    
    // Initialize carousel
    showCar(currentIndex);
    handleHeaderScroll();  // Set initial header state
    
    // Reveal animations on scroll
    const animatedElements = document.querySelectorAll('.advertisement-item');
    
    function checkScroll() {
        animatedElements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;
            
            if (elementTop < windowHeight - 100) {
                element.style.opacity = 1;
                element.style.transform = 'translateY(0)';
            }
        });
    }
    
    // Set initial state for animation
    animatedElements.forEach(element => {
        element.style.opacity = 0;
        element.style.transform = 'translateY(30px)';
        element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
    });
    
    // Check elements' position on load and scroll
    window.addEventListener('load', checkScroll);
    window.addEventListener('scroll', checkScroll);
});