// Fibra Expert - Main Interactivity

document.addEventListener('DOMContentLoaded', () => {
    
    // 1. Smooth Scroll for Navigation Links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // 2. Intersection Observer for Fade-in Animations
    const observerOptions = {
        threshold: 0.1
    };

    const revealOnScroll = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = "1";
                entry.target.style.transform = "translateY(0)";
                revealOnScroll.unobserve(entry.target);
            }
        });
    }, observerOptions);

    // Apply styles to elements before observing
    const animatedElements = document.querySelectorAll('.service-card, .gallery-item, #contacto form');
    animatedElements.forEach(el => {
        el.style.opacity = "0";
        el.style.transform = "translateY(30px)";
        el.style.transition = "all 0.8s ease-out";
        revealOnScroll.observe(el);
    });

    // 3. Functional Form Submission Handling (AJAX to PHP)
    const form = document.getElementById('contact-form');
    if(form) {
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const btn = form.querySelector('button');
            const originalText = btn.innerText;
            
            btn.innerText = "Enviando...";
            btn.disabled = true;

            const formData = new FormData(form);

            try {
                const response = await fetch('contacto.php', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (response.ok && result.status === 'success') {
                    btn.innerText = "¡Mensaje Enviado!";
                    btn.style.backgroundColor = "#25D366";
                    form.reset();
                } else {
                    btn.innerText = "Error al enviar";
                    btn.style.backgroundColor = "#ff4d4d";
                    alert(result.message || "Ocurrió un error.");
                }
            } catch (error) {
                console.error("Error:", error);
                btn.innerText = "Error de conexión";
                btn.style.backgroundColor = "#ff4d4d";
                alert("Hubo un problema de conexión con el servidor.");
            } finally {
                setTimeout(() => {
                    btn.innerText = originalText;
                    btn.style.backgroundColor = "";
                    btn.disabled = false;
                }, 4000);
            }
        });
    }

    // 4. Navbar Background Change on Scroll
    window.addEventListener('scroll', () => {
        const nav = document.querySelector('nav');
        if (window.scrollY > 50) {
            nav.style.background = "rgba(13, 13, 13, 0.95)";
            nav.style.boxShadow = "0 10px 30px rgba(0,0,0,0.5)";
        } else {
            nav.style.background = "rgba(13, 13, 13, 0.8)";
            nav.style.boxShadow = "none";
        }
    });

});
