// Constra - Modern Construction Interactions

document.addEventListener('DOMContentLoaded', () => {
    console.log('Constra System Initialized');

    // Hero Slider Logic
    const slides = document.querySelectorAll('.slider-item');
    const dots = document.querySelectorAll('.slider-dot');
    let currentSlide = 0;

    const showSlide = (index) => {
        slides.forEach(slide => {
            slide.style.opacity = '0';
            slide.style.zIndex = '0';
        });
        dots.forEach(dot => dot.classList.remove('active'));

        slides[index].style.opacity = '1';
        slides[index].style.zIndex = '1';
        dots[index].classList.add('active');
    };

    const nextSlide = () => {
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
    };

    let sliderInterval = setInterval(nextSlide, 5000);

    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            clearInterval(sliderInterval);
            currentSlide = index;
            showSlide(currentSlide);
            sliderInterval = setInterval(nextSlide, 5000);
        });
    });

    // Header Scroll Effect
    const header = document.querySelector('.header');
    
    // Reset any legacy inline styles to ensure CSS classes take full control
    header.style.padding = '';
    header.style.background = '';

    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });

    // Animate elements on scroll
    const observerOptions = {
        threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-up');
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    document.querySelectorAll('.service-card, .project-card, .section-title').forEach(el => {
        observer.observe(el);
    });
});
