document.addEventListener('DOMContentLoaded', function () {
    // AI 서비스 페이지에서는 애니메이션을 비활성화
    if (window.location.pathname.includes('ax-ai-service.html')) {
        return;
    }

    const images = document.querySelectorAll('.main-visual-images img');
    const services = document.querySelectorAll('.main-visual-services .service');
    const techItems = document.querySelectorAll('.main-tech-item');
    const projectItems = document.querySelectorAll('.main-performance-item');
    const projectPaging = document.getElementById('main-performance-paging');
    const videos = document.querySelectorAll('.main-bg');
    const visualTitles = document.querySelectorAll('.main-visual-title');
    const sectionNavItems = document.querySelectorAll('.section-nav-item');
    const sections = document.querySelectorAll('section[id]');
    const performanceItems = document.querySelectorAll('.main-performance-item');
    const contactButtons = document.querySelectorAll('.main-contact-map-btn, .main-download-btn');
    const sectionTitles = document.querySelectorAll('.section-title');
    const tabs = document.querySelectorAll('.headarea-tab');
    const toTopButton = document.querySelector('.headarea-to-top');
    const video = document.querySelector('.headarea-hero-bg, .sub-hero-bg');
    const counters = document.querySelectorAll('.counter');

    // 조직도 애니메이션 (org-chart가 있는 페이지에서만 실행)
    const orgChart = document.querySelector('.org-chart');
    if (orgChart) {
        animateOrgChart();
    }

    function animateOrgChart() {
        const orgNodes = document.querySelectorAll('.org-chart .org-node');
        const orgLines = document.querySelectorAll('.org-chart li, .org-chart ul');

        if (orgNodes.length > 0) {
            // 노드들을 순차적으로 애니메이션
            orgNodes.forEach((node, index) => {
                setTimeout(() => {
                    node.classList.add('animate');
                }, index * 300); // 300ms 간격으로 애니메이션
            });

            // 모든 노드 애니메이션 후 라인들 애니메이션
            setTimeout(() => {
                orgLines.forEach(line => {
                    line.classList.add('animate-lines');
                });
            }, orgNodes.length * 300 + 500); // 모든 노드 애니메이션 완료 후 500ms 뒤
        }
    }

    // 조직도가 있는 페이지에서 애니메이션 실행
    if (document.querySelector('.org-chart')) {
        // 페이지 로드 후 약간의 지연을 두고 애니메이션 시작
        setTimeout(animateOrgChart, 500);
    }
    let current = 0;
    let techCurrent = 0;
    let currentVideoIndex = 0;
    let progressBars = document.querySelectorAll('.progress-fill');

    function updateProgressBar(video, progressBar) {
        if (video.duration) {
            const progress = (video.currentTime / video.duration) * 100;
            progressBar.style.width = progress + '%';
        }
    }

    function resetProgressBars() {
        progressBars.forEach(bar => {
            bar.style.width = '0%';
        });
    }

    function updateVisualText() {
        if (!visualTitles || visualTitles.length === 0) {
            return;
        }
        visualTitles.forEach((title, index) => {
            if (index === currentVideoIndex) {
                title.style.display = 'block';
                const spans = title.querySelectorAll('span');
                const engSlogan = title.querySelector('.eng-slogan');
                spans.forEach(span => {
                    span.style.animation = 'none';
                    span.offsetHeight;
                    span.style.animation = '';
                });
                if (engSlogan) {
                    engSlogan.style.animation = 'none';
                    engSlogan.offsetHeight;
                    engSlogan.style.animation = '';
                }
            } else {
                title.style.display = 'none';
            }
        });
        const currentTitle = visualTitles[currentVideoIndex];
        if (currentTitle) {
            progressBars = currentTitle.querySelectorAll('.progress-fill');
        }
    }

    function playNextVideo() {
        if (!videos || videos.length === 0) {
            return;
        }
        videos[currentVideoIndex].style.display = 'none';
        videos[currentVideoIndex].pause();
        currentVideoIndex = (currentVideoIndex + 1) % videos.length;
        videos[currentVideoIndex].style.display = 'block';
        videos[currentVideoIndex].play();
        resetProgressBars();
        updateVisualText();
    }

    if (videos && videos.length > 0) {
        videos.forEach((video, index) => {
            video.addEventListener('ended', playNextVideo);
            video.addEventListener('timeupdate', function () {
                if (index === currentVideoIndex) {
                    updateProgressBar(video, progressBars[index]);
                }
            });
            if (index === 0) {
                video.style.display = 'block';
            } else {
                video.style.display = 'none';
            }
        });
        updateVisualText();
    }

    function updateVisuals() {
        if (images && images.length > 0) {
            images.forEach((img, i) => {
                img.classList.remove('pos1', 'pos2', 'pos3');
                if (i === current) {
                    img.classList.add('pos1');
                } else if (i === (current + 1) % images.length) {
                    img.classList.add('pos2');
                } else if (i === (current + 2) % images.length) {
                    img.classList.add('pos3');
                }
            });
        }
        if (services && services.length > 0) {
            services.forEach((svc, i) => {
                svc.classList.toggle('active', i === current);
            });
        }
    }

    function updateTechActive() {
        if (techItems && techItems.length > 0) {
            techItems.forEach((item, i) => {
                item.classList.toggle('main-tech-active', i === techCurrent);
            });
        }
    }

    updateVisuals();
    updateTechActive();

    if (images && images.length > 0) {
        setInterval(() => {
            current = (current + 1) % images.length;
            updateVisuals();
        }, 10000);
    }

    if (techItems && techItems.length > 0) {
        setInterval(() => {
            techCurrent = (techCurrent + 1) % techItems.length;
            updateTechActive();
        }, 5000);
    }

    if (sectionNavItems && sectionNavItems.length > 0) {
        sectionNavItems.forEach(item => {
            item.addEventListener('click', function () {
                const targetSection = this.getAttribute('data-section');
                const targetElement = document.getElementById(targetSection);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    }

    function updateActiveNavItem() {
        if (!sectionNavItems || !sections) {
            return;
        }
        const scrollPosition = window.scrollY + 100;
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;
            const sectionId = section.getAttribute('id');
            if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                sectionNavItems.forEach(item => item.classList.remove('active'));
                const activeNavItem = document.querySelector(`[data-section="${sectionId}"]`);
                if (activeNavItem) {
                    activeNavItem.classList.add('active');
                }
            }
        });
    }

    function throttle(func, limit) {
        let inThrottle;
        return function () {
            const args = arguments;
            const context = this;
            if (!inThrottle) {
                func.apply(context, args);
                inThrottle = true;
                setTimeout(() => inThrottle = false, limit);
            }
        }
    }

    // 카운터 애니메이션 함수
    function animateCounter(counter) {
        const target = parseFloat(counter.getAttribute('data-target'));
        const duration = 2000; // 2초
        const step = target / (duration / 16); // 60fps
        let current = 0;

        const timer = setInterval(() => {
            current += step;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            counter.textContent = current.toFixed(1);
        }, 16);
    }

    // 반복 카운터 애니메이션 함수
    function startRepeatingCounter(counter) {
        const target = parseFloat(counter.getAttribute('data-target'));

        function runAnimation() {
            let current = 0;
            const duration = 2000; // 2초
            const step = target / (duration / 16); // 60fps

            const timer = setInterval(() => {
                current += step;
                if (current >= target) {
                    current = target;
                    clearInterval(timer);
                }
                counter.textContent = current.toFixed(1);
            }, 16);
        }

        // 첫 번째 애니메이션 시작
        runAnimation();

        // 20초마다 반복
        setInterval(runAnimation, 20000);
    }

    // Intersection Observer로 카운터 애니메이션 트리거
    if (counters && counters.length > 0) {
        const counterObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    startRepeatingCounter(entry.target);
                    counterObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });

        counters.forEach(counter => {
            counterObserver.observe(counter);
        });
    }

    // 슬로건 애니메이션 트리거
    const sloganElements = document.querySelectorAll('.problem-infographic-section, .problem-solution-section, .problem-infographic-title');
    if (sloganElements && sloganElements.length > 0) {
        const sloganObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const sloganParts = entry.target.querySelectorAll('.slogan-part');
                    sloganParts.forEach(part => {
                        part.classList.add('animate');
                    });
                    sloganObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.3 });

        sloganElements.forEach(element => {
            sloganObserver.observe(element);
        });
    }

    if (sectionNavItems && sectionNavItems.length > 0 && sections && sections.length > 0) {
        window.addEventListener('scroll', throttle(updateActiveNavItem, 100));
        updateActiveNavItem();
    }

    if (performanceItems && performanceItems.length > 0) {
        const performanceSection = document.getElementById('main-performance-area');
        if (performanceSection) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        performanceItems.forEach((item, index) => {
                            setTimeout(() => {
                                item.classList.add('animate');
                            }, index * 200);
                        });
                    } else {
                        performanceItems.forEach(item => {
                            item.classList.remove('animate');
                        });
                    }
                });
            });
            observer.observe(performanceSection);
        }
    }

    if (contactButtons && contactButtons.length > 0) {
        const contactSection = document.getElementById('main-contact-section');
        if (contactSection) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        contactButtons.forEach((button, index) => {
                            setTimeout(() => {
                                button.classList.add('animate');
                            }, index * 400);
                        });
                    } else {
                        contactButtons.forEach(button => {
                            button.classList.remove('animate');
                        });
                    }
                });
            }, {
                threshold: 0.2,
                rootMargin: '-100px 0px -100px 0px'
            });
            observer.observe(contactSection);
        }
    }

    if (sectionTitles && sectionTitles.length > 0) {
        const titleObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    setTimeout(() => {
                        entry.target.classList.add('animate');
                    }, 200);
                } else {
                    entry.target.classList.remove('animate');
                }
            });
        }, {
            threshold: 0.3,
            rootMargin: '-50px 0px -50px 0px'
        });

        sectionTitles.forEach(title => {
            titleObserver.observe(title);
        });
    }

    if (video) {
        const playVideo = () => {
            video.play().catch(function (error) {
                document.addEventListener('click', function () {
                    video.play().catch(function () { });
                }, { once: true });
            });
        };
        playVideo();
        video.style.display = 'block';
        video.style.visibility = 'visible';
        video.style.opacity = '1';
        video.style.zIndex = '0';
    }

    // Tab menu dropdown functionality
    tabs.forEach(tab => {
        // Click functionality for non-dropdown tabs
        tab.addEventListener('click', function (e) {
            if (e.target.closest('a')) return;
            const link = this.querySelector('a');
            if (link && link.href) {
                window.location.href = link.href;
            }
        });

        // Dropdown functionality for tabs with dropdown class
        if (tab.classList.contains('dropdown')) {
            const dropdown = tab.querySelector('.headarea-tab-dropdown');
            if (dropdown) {
                // Add hover class for CSS-based dropdown
                tab.addEventListener('mouseenter', function () {
                    tab.classList.add('hover');
                });

                tab.addEventListener('mouseleave', function () {
                    tab.classList.remove('hover');
                });

                // Prevent dropdown from closing when hovering over dropdown items
                dropdown.addEventListener('mouseenter', function () {
                    tab.classList.add('hover');
                });

                dropdown.addEventListener('mouseleave', function () {
                    tab.classList.remove('hover');
                });
            }
        }
    });

    if (toTopButton) {
        toTopButton.addEventListener('click', function () {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
        window.addEventListener('scroll', function () {
            if (window.pageYOffset > 300) {
                toTopButton.style.display = 'flex';
            } else {
                toTopButton.style.display = 'none';
            }
        });
    }

    // 조직도 애니메이션
    const orgChartContainer = document.querySelector('.org-chart-container');
    if (orgChartContainer) {
        const orgObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 조직도 컨테이너에 animate 클래스 추가 (라인 애니메이션용)
                    entry.target.classList.add('animate');

                    // 노드들 애니메이션
                    const orgNodes = entry.target.querySelectorAll('.org-animate');
                    orgNodes.forEach(node => {
                        node.classList.add('show');
                    });
                    orgObserver.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.3,
            rootMargin: '-50px 0px -50px 0px'
        });

        orgObserver.observe(orgChartContainer);
    }

    // 지적재산권 슬로건 애니메이션
    const ipSloganTitle = document.querySelector('.ip-slogan-title');
    if (ipSloganTitle) {
        const ipSloganObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const sloganParts = entry.target.querySelectorAll('.slogan-part');
                    sloganParts.forEach(part => {
                        part.classList.add('animate');
                    });
                    ipSloganObserver.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.5,
            rootMargin: '-50px 0px -50px 0px'
        });

        ipSloganObserver.observe(ipSloganTitle);
    }

    // 연혁 슬로건 애니메이션
    const historySloganTitle = document.querySelector('.history-slogan-title');
    if (historySloganTitle) {
        const historySloganObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const sloganParts = entry.target.querySelectorAll('.slogan-part');
                    sloganParts.forEach(part => {
                        part.classList.add('animate');
                    });
                    historySloganObserver.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.5,
            rootMargin: '-50px 0px -50px 0px'
        });

        historySloganObserver.observe(historySloganTitle);
    }

    // 연혁 애니메이션 - 자동 실행
    const historyContainer = document.querySelector('.history-container');
    if (historyContainer) {
        // 페이지 로드 후 1초 뒤에 자동으로 애니메이션 시작
        setTimeout(() => {
            // 리스트 아이템 애니메이션 - 순차적으로 나타나도록
            const historyItems = historyContainer.querySelectorAll('.history-item');
            historyItems.forEach((item, index) => {
                setTimeout(() => {
                    item.classList.add('animate');
                }, index * 150); // 150ms 간격으로 순차 애니메이션
            });
        }, 1000); // 1초 후 자동 시작
    }
});