/**
 * main.js — A Ordem dos 5 Elementos
 * Lógica interativa da página principal (carousel + menu mobile)
 */

document.addEventListener('DOMContentLoaded', () => {

    /* ============================================================
       Hero Carousel
       ============================================================ */
    const slides     = document.querySelectorAll('.carousel-slide');
    const indicators = document.querySelectorAll('.carousel-indicator');
    let currentSlide = 2; // começa no slide 3 (índice 2) como no original
    const totalSlides = slides.length;
    let slideInterval;

    function showSlide(index) {
        slides.forEach(slide => slide.classList.remove('active'));
        indicators.forEach(indicator => {
            indicator.classList.remove('active', 'bg-primary');
            indicator.classList.add('bg-on-surface-variant');
        });

        slides[index].classList.add('active');
        indicators[index].classList.add('active', 'bg-primary');
        indicators[index].classList.remove('bg-on-surface-variant');
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        showSlide(currentSlide);
    }

    function startSlideShow() {
        slideInterval = setInterval(nextSlide, 6000); // troca a cada 6 segundos
    }

    function resetSlideShow() {
        clearInterval(slideInterval);
        startSlideShow();
    }

    // Clique nos indicadores
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            currentSlide = index;
            showSlide(currentSlide);
            resetSlideShow();
        });
    });

    // Inicia o carrossel
    showSlide(currentSlide);
    startSlideShow();


    /* ============================================================
       Menu Mobile (hambúrguer)
       ============================================================ */
    const menuBtn    = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');

    if (menuBtn && mobileMenu) {
        menuBtn.addEventListener('click', () => {
            const isOpen = mobileMenu.classList.toggle('hidden');
            menuBtn.setAttribute('aria-expanded', String(!isOpen));
        });

        // Fecha o menu ao clicar em um link
        mobileMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                menuBtn.setAttribute('aria-expanded', 'false');
            });
        });
    }

});