app.js

import { officesData } from './js/officesData.js';
import { loadProjects } from './js/projectsLoader.js';

document.addEventListener("DOMContentLoaded", function () {

    // --- 0. Cargar Proyectos (Si existe el contenedor) ---
    loadProjects('projects-container');

    // --- 1. Interactividad Navbar ---
    const navbar = document.querySelector(".navbar-container");
    const navbarToggler = document.querySelector(".navbar-toggler");
    const navbarCollapseDiv = document.getElementById("navbarNav");
    let lastScrollTop = 0;
    let isMenuOpen = false;
    let scrollTimeout;

    // Detectar estado del menú
    if (navbarCollapseDiv) {
        navbarCollapseDiv.addEventListener('show.bs.collapse', () => { isMenuOpen = true; });
        navbarCollapseDiv.addEventListener('hide.bs.collapse', () => { isMenuOpen = false; });
    }

    // Force show on toggler click
    if (navbarToggler) {
        navbarToggler.addEventListener('click', () => {
            navbar.classList.remove('navbar-hidden');
            // Reset idle timer interaction
            resetIdleTimer();
        });
    }

    function resetIdleTimer() {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(() => {
            // Mostrar navbar después de 2 segundos de inactividad
            navbar.classList.remove('navbar-hidden');
        }, 2000);
    }

    window.addEventListener('scroll', function () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        // Si el menú está abierto, NO ocultar nunca
        if (!isMenuOpen) {
            if (scrollTop > 120) {
                if (scrollTop > lastScrollTop) {
                    navbar.classList.add('navbar-hidden'); // Downscroll
                } else {
                    navbar.classList.remove('navbar-hidden'); // Upscroll
                }
            } else {
                navbar.classList.remove('navbar-hidden');
            }
        }

        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;

        // Reiniciar timer de inactividad
        resetIdleTimer();
    });

    // Iniciar timer al carga
    resetIdleTimer();

    navbar.classList.add('navbar-sticky');

    // --- 1.1 Mobile Navbar Auto-Collapse ---
    const navbarCollapse = document.getElementById('navbarNav');
    const navLinks = document.querySelectorAll('.nav-link:not(.dropdown-toggle), .dropdown-item');
    if (navbarCollapse) {
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                if (window.getComputedStyle(document.querySelector('.navbar-toggler')).display !== 'none') {
                    const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse);
                    if (bsCollapse) {
                        bsCollapse.hide();
                    }
                }
            });
        });
    }

    // --- 2. Slideshow About Us ---
    const slides = document.querySelectorAll('.about-slide');
    let currentSlide = 0;

    if (slides.length > 0) {
        setInterval(() => {
            slides[currentSlide].classList.remove('active');
            currentSlide = (currentSlide + 1) % slides.length;
            slides[currentSlide].classList.add('active');
        }, 3500);
    }

    // --- 4. Lógica de Oficinas ---
    // officesData importado desde modulo externo

    // Iconos SVG como constantes string para inyeccion
    const iconAddress = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-directions"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 21v-4"/><path d="M12 13v-4"/><path d="M12 5v-2"/><path d="M10 21h4"/><path d="M8 5v4h11l2 -2l-2 -2z"/><path d="M14 13v4h-8l-2 -2l2 -2z"/></svg>`;
    const iconPhone = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-phone-ringing"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 4l-2 2"/><path d="M22 10.5l-2.5 -.5"/><path d="M13.5 2l.5 2.5"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2c-8.072 -.49 -14.51 -6.928 -15 -15a2 2 0 0 1 2 -2"/></svg>`;
    const iconWhatsapp = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-whatsapp"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9"/><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1"/></svg>`;

    function updateOfficeContent(office) {
        // Actualizar Textos e Imagenes
        const titleEl = document.getElementById('office-title');
        const mapEl = document.getElementById('office-map');
        const addressEl = document.getElementById('office-address');
        const phoneEl = document.getElementById('office-phone');
        const whatsappEl = document.getElementById('office-whatsapp');
        const imageEl = document.getElementById('office-image');

        if (titleEl) titleEl.textContent = office.name;
        if (mapEl) mapEl.src = office.mapSrc;
        if (addressEl) addressEl.innerHTML = ` ${iconAddress} ${office.address}`;
        if (phoneEl) {
            const phoneHref = office.phone.replace(/[^0-9+]/g, '');
            // Render: [Icon-Btn] Phone text
            phoneEl.innerHTML = `<a href="tel:${phoneHref}" class="call-icon-btn">${iconPhone}<span>LLAMAR</span></a>${office.phone}`;
        }
        if (whatsappEl) {
            const whatsappHref = office.whatsapp.replace(/[^0-9+]/g, '');
            // Render: [Icon-Btn] generic text
            whatsappEl.innerHTML = `<a href="tel:${whatsappHref}" class="call-icon-btn">${iconWhatsapp}<span>LLAMAR</span></a>${office.whatsapp}`;
        }
        if (imageEl) {
            imageEl.src = office.image;
            imageEl.alt = `Oficina de la empresa en ${office.name}`;
        }

        // Actualizar estado activo de botones
        officesData.forEach(data => {
            const btn = document.getElementById(data.buttonId);
            if (btn) {
                if (data.id === office.id) {
                    btn.classList.add('active-office-btn');
                } else {
                    btn.classList.remove('active-office-btn');
                }
            }
        });
    }

    // Inicializar listeners
    officesData.forEach(office => {
        const btn = document.getElementById(office.buttonId);
        if (btn) {
            btn.addEventListener('click', (e) => {
                e.preventDefault(); // Evitar saltos si fuera un link
                updateOfficeContent(office);
            });
        }
    });

    // Solo para asegurar que el boton tenga la clase activa
    const santiagoBtn = document.getElementById('stg-button');
    if (santiagoBtn) santiagoBtn.classList.add('active-office-btn');


    // --- 5. Inicializar Iconos y Gallery Modal ---
    if (window.lucide) {
        lucide.createIcons();
    } else {
        setTimeout(() => { if (window.lucide) lucide.createIcons(); }, 1000);
    }

    const lightboxModalEl = document.getElementById('lightboxModal');
    if (lightboxModalEl) {
        const lightboxModal = new bootstrap.Modal(lightboxModalEl);
        const lightboxImage = document.getElementById('lightboxImage');
        const galleryItems = document.querySelectorAll('.gallery-item');

        galleryItems.forEach(item => {
            item.addEventListener('click', () => {
                const img = item.querySelector('img');
                if (img) {
                    lightboxImage.src = img.src;
                    lightboxModal.show();
                }
            });
        });

        const modalBody = lightboxModalEl.querySelector('.modal-body');
        if (modalBody) {
            modalBody.addEventListener('click', () => lightboxModal.hide());
        }
    }

    // --- 6. Video Modals Logic (Auto-play and Stop) ---
    const videoModalIds = ['videoModal1', 'videoModal2'];
    videoModalIds.forEach(id => {
        const modalEl = document.getElementById(id);
        if (modalEl) {
            // Cuando el modal se abre: Cargar el video (Autoplay activado en URL)
            modalEl.addEventListener('show.bs.modal', function () {
                const iframe = modalEl.querySelector('iframe');
                if (iframe && iframe.dataset.src) {
                    iframe.src = iframe.dataset.src;
                }
            });

            // Cuando el modal se cierra: Limpiar el src para detener el video
            modalEl.addEventListener('hidden.bs.modal', function () {
                const iframe = modalEl.querySelector('iframe');
                if (iframe) {
                    iframe.src = '';
                }
            });
        }
    });

});