script.js

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

    // ==================================================
    // LÓGICA GLOBAL (Executa em todas as páginas)
    // ==================================================

    // --- 1. Loader de Transição de Página ---
    const allLinks = document.querySelectorAll('a:not([href^="#"]):not([target="_blank"])');

    // Remove o loader quando a página termina de carregar
    window.addEventListener('load', () => {
        document.body.classList.remove('loading');
    });

    // CORREÇÃO: Lida com a navegação de "Voltar" e "Avançar" do navegador
    window.addEventListener('pageshow', (event) => {
        // Se a página foi carregada do bfcache, remove o loader
        if (event.persisted) {
            document.body.classList.remove('loading');
        }
    });

    // Adiciona o loader ao clicar em um link interno para navegar para outra página
    allLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            if (link.hostname === window.location.hostname && link.pathname === window.location.pathname) {
                return;
            }
            e.preventDefault();
            const destination = link.href;
            document.body.classList.add('loading');
            setTimeout(() => {
                window.location = destination;
            }, 500);
        });
    });

    // --- 2. Lógica para o Menu Móvel ---
    const menuToggle = document.querySelector('.mobile-menu-toggle');
    const mainNav = document.querySelector('.main-nav');
    if (menuToggle && mainNav) {
        menuToggle.addEventListener('click', () => {
            mainNav.classList.toggle('is-active');
            document.body.style.overflow = mainNav.classList.contains('is-active') ? 'hidden' : 'auto';
        });
    }

    // --- 3. Lógica Otimizada para as Partículas de Flores ---
    if (typeof tsParticles !== 'undefined') {
        tsParticles.load("particles-js", {
            fpsLimit: 40,
            particles: {
                number: { value: 15, density: { enable: true, value_area: 800 } },
                color: { value: ["#d8a79d", "#a3b18a", "#b08968"] },
                shape: {
                    type: "char",
                    character: { value: ["•", "✻", "·"], font: "Verdana", style: "", weight: "400", fill: true }
                },
                opacity: { value: { min: 0.3, max: 0.7 }, anim: { enable: true, speed: 0.5, sync: false } },
                size: { value: { min: 8, max: 16 } },
                move: { enable: true, speed: 1, direction: "bottom", random: true, straight: false, out_mode: "out", bounce: false }
            },
            interactivity: {
                events: { onhover: { enable: false }, onclick: { enable: false }, resize: true }
            },
            detectRetina: true
        });
    }


    // ==================================================
    // LÓGICA ESPECÍFICA DE CADA PÁGINA
    // ==================================================

    // --- Lógica para a Homepage (index.html) ---
    const slider = document.querySelector('.testimonial-slider');
    const slides = document.querySelectorAll('.testimonial-slide');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    if (slider && slides.length > 0 && prevBtn && nextBtn) {
        let currentIndex = 0;
        const totalSlides = slides.length;
        const updateSliderPosition = () => { slider.style.transform = `translateX(-${currentIndex * 100}%)`; };
        nextBtn.addEventListener('click', () => { currentIndex = (currentIndex + 1) % totalSlides; updateSliderPosition(); });
        prevBtn.addEventListener('click', () => { currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; updateSliderPosition(); });
        updateSliderPosition();
    }

    // --- Lógica para a Página de Coleção (produtos.html) ---
    const filterButtons = document.querySelectorAll('.filter-btn');
    if (filterButtons.length > 0) {
        filterButtons.forEach(button => {
            button.addEventListener('click', (event) => {
                filterButtons.forEach(btn => btn.classList.remove('active'));
                event.currentTarget.classList.add('active');
            });
        });
    }

    // --- Lógica para a Página de Detalhes (detalhe-produto.html) ---
    // 1. Skeleton Loading
    const skeletonUI = document.querySelector('.skeleton-ui');
    const realContent = document.querySelector('.real-content');
    if (skeletonUI && realContent) {
        setTimeout(() => {
            skeletonUI.style.display = 'none';
            realContent.style.display = 'grid';
        }, 1500);
    }

    // 2. Accordion
    const accordionItems = document.querySelectorAll('.accordion-item');
    if (accordionItems.length > 0) {
        accordionItems.forEach(item => {
            const header = item.querySelector('.accordion-header');
            header.addEventListener('click', () => {
                const content = item.querySelector('.accordion-content');
                header.classList.toggle('active');
                if (content.style.maxHeight) {
                    content.style.maxHeight = null;
                    content.style.padding = "0 1rem";
                } else {
                    content.style.padding = "0 1rem 1.5rem";
                    content.style.maxHeight = content.scrollHeight + "px";
                }
            });
        });
    }

    // --- Lógica para a Página do Carrinho (carrinho.html) ---
    const cartSkeleton = document.querySelector('.cart-section .skeleton-ui');
    const cartRealContent = document.querySelector('.cart-section .real-content');

    if (cartSkeleton && cartRealContent) {
        // Simula 1 segundo de carregamento para o carrinho
        setTimeout(() => {
            cartSkeleton.style.display = 'none';
            cartRealContent.style.display = 'grid'; // Usa 'grid' para ativar o layout
        }, 1000);
    }

    // --- Lógica para a Página de Perfil (perfil.html) ---
    const profileNavLinks = document.querySelectorAll('.profile-nav-link');
    const profileTabContents = document.querySelectorAll('.profile-tab-content');

    if (profileNavLinks.length > 0) {
        profileNavLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();

                // Desativa todos os links e abas
                profileNavLinks.forEach(item => item.classList.remove('active'));
                profileTabContents.forEach(content => content.classList.remove('active'));

                // Ativa o link clicado
                link.classList.add('active');

                // Ativa a aba de conteúdo correspondente
                const targetId = link.dataset.tab;
                const targetContent = document.getElementById(targetId);
                if (targetContent) {
                    targetContent.classList.add('active');
                }
            });
        });
    }

    // --- Lógica para a Página de Detalhe do Pedido ---
    const orderDetailSkeleton = document.querySelector('.order-detail-section .skeleton-ui');
    const orderDetailRealContent = document.querySelector('.order-detail-section .real-content');

    if (orderDetailSkeleton && orderDetailRealContent) {
        // Simula 1.2 segundos de carregamento
        setTimeout(() => {
            orderDetailSkeleton.style.display = 'none';
            orderDetailRealContent.style.display = 'block';
        }, 1200);
    }

    // --- Lógica para a Página de Login/Registro ---
    const loginForm = document.getElementById('login-form');
    const registerForm = document.getElementById('register-form');
    const showLoginBtn = document.getElementById('show-login');
    const showRegisterBtn = document.getElementById('show-register');

    if (showLoginBtn && showRegisterBtn) {
        showLoginBtn.addEventListener('click', () => {
            loginForm.classList.add('active');
            registerForm.classList.remove('active');
            showLoginBtn.classList.add('active');
            showRegisterBtn.classList.remove('active');
        });

        showRegisterBtn.addEventListener('click', () => {
            loginForm.classList.remove('active');
            registerForm.classList.add('active');
            showLoginBtn.classList.remove('active');
            showRegisterBtn.classList.add('active');
        });
    }

    // --- Lógica para o Botão Flutuante do WhatsApp ---
    const whatsappBubble = document.querySelector('.whatsapp-message-bubble');
    const whatsappText = document.getElementById('whatsapp-text');
    
    if (whatsappBubble && whatsappText) {
        const messages = [
            "Olá! Posso ajudar?",
            "Ficou com alguma dúvida?",
            "Fale conosco por aqui!",
            "Podemos ajudar na escolha?"
        ];
    
        let messageIndex = 0;
    
        const showMessage = () => {
            whatsappText.textContent = messages[messageIndex];
            whatsappBubble.classList.add('visible');
        
            setTimeout(() => {
                whatsappBubble.classList.remove('visible');
                messageIndex = (messageIndex + 1) % messages.length; // Avança para a próxima msg
            }, 5000); // Mensagem fica visível por 5 segundos
        };
    
        // Inicia o ciclo de mensagens após um delay inicial
        setTimeout(() => {
            showMessage(); // Mostra a primeira mensagem
            setInterval(showMessage, 8000); // Alterna a mensagem a cada 8 segundos (5 visível + 3 invisível)
        }, 3000); // Espera 3 segundos após carregar a página para começar
    }

});