script.js

// Aguarda o DOM carregar completamente
document.addEventListener('DOMContentLoaded', function() {
    
    // ===== MODAIS =====
    const modals = ['m1', 'm2', 'm3'];
    let currentModal = null;
    
    // Abrir modal ao clicar nos hotspots
    document.querySelectorAll('.hotspot').forEach(h => {
        h.addEventListener('click', function(e) {
            const modalId = this.dataset.modal;
            if (!modalId) return;
            
            // Fecha todos
            modals.forEach(id => {
                document.getElementById(id).style.display = 'none';
            });
            
            // Abre o selecionado
            document.getElementById(modalId).style.display = 'flex';
            currentModal = modalId;
        });
    });
    
    // Função para fechar todos
    function closeAllModals() {
        modals.forEach(id => {
            const modal = document.getElementById(id);
            if (modal) modal.style.display = 'none';
        });
        currentModal = null;
    }
    
    // Fechar com botão X
    document.querySelectorAll('.close').forEach(btn => {
        btn.addEventListener('click', closeAllModals);
    });
    
    // Fechar clicando no fundo (overlay)
    document.querySelectorAll('.modal-overlay').forEach(overlay => {
        overlay.addEventListener('click', function(e) {
            if (e.target === this) closeAllModals();
        });
    });
    
    // Navegação entre modais
    function navigateModals(direction) {
        if (!currentModal) return;
        
        const idx = modals.indexOf(currentModal);
        if (idx === -1) return;
        
        let newIdx;
        if (direction === 'next') {
            newIdx = (idx + 1) % modals.length;
        } else {
            newIdx = (idx - 1 + modals.length) % modals.length;
        }
        
        // Fecha atual e abre novo
        modals.forEach(id => {
            document.getElementById(id).style.display = 'none';
        });
        document.getElementById(modals[newIdx]).style.display = 'flex';
        currentModal = modals[newIdx];
    }
    
    // Botões next e prev
    document.querySelectorAll('.next').forEach(btn => {
        btn.addEventListener('click', function() {
            navigateModals('next');
        });
    });
    
    document.querySelectorAll('.prev').forEach(btn => {
        btn.addEventListener('click', function() {
            navigateModals('prev');
        });
    });
    
    // Fechar com tecla ESC
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeAllModals();
    });
    
    // ===== MENU DE NAVEGAÇÃO LATERAL =====
    const sections = document.querySelectorAll('section[id]');
    const navContainer = document.getElementById('sectionNav');
    
    // Cria as bolinhas
    sections.forEach((section, index) => {
        const dot = document.createElement('div');
        dot.className = 'nav-dot';
        dot.setAttribute('data-index', index);
        
        // Adiciona título como tooltip (se existir)
        if (section.dataset.title) {
            dot.title = section.dataset.title;
        }
        
        // Scroll ao clicar
        dot.addEventListener('click', function() {
            section.scrollIntoView({ behavior: 'smooth' });
        });
        
        navContainer.appendChild(dot);
    });
    
    // Atualiza bolinha ativa durante o scroll
    function updateActiveDot() {
        const dots = document.querySelectorAll('.nav-dot');
        if (!dots.length) return;
        
        let activeIndex = 0;
        let minDistance = Infinity;
        
        sections.forEach((section, i) => {
            const rect = section.getBoundingClientRect();
            const distance = Math.abs(rect.top);
            if (distance < minDistance) {
                minDistance = distance;
                activeIndex = i;
            }
        });
        
        dots.forEach(d => d.classList.remove('active'));
        if (dots[activeIndex]) dots[activeIndex].classList.add('active');
    }
    
    window.addEventListener('scroll', updateActiveDot);
    updateActiveDot(); // Executa uma vez no início
    
}); // Fim do DOMContentLoaded