// Initialize AOS (Animate On Scroll)
AOS.init({
    duration: 1000,
    easing: 'ease-out-cubic',
    once: true,
    offset: 100
});

// Initialize Hero Swiper
const heroSwiper = new Swiper('.hero-slider', {
    loop: true,
    speed: 1000,
    effect: 'fade',
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

// Stats Counter Animation
const statsObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const statNumbers = entry.target.querySelectorAll('.stat-number');
            statNumbers.forEach(stat => {
                const target = parseInt(stat.getAttribute('data-count'));
                animateCounter(stat, 0, target, 2000);
            });
            statsObserver.unobserve(entry.target);
        }
    });
}, { threshold: 0.5 });

const statsSection = document.querySelector('.quick-stats');
if (statsSection) {
    statsObserver.observe(statsSection);
}

function animateCounter(element, start, end, duration) {
    let startTime = null;

    const step = (timestamp) => {
        if (!startTime) startTime = timestamp;
        const progress = Math.min((timestamp - startTime) / duration, 1);
        const value = Math.floor(progress * (end - start) + start);
        element.textContent = value.toLocaleString();

        if (progress < 1) {
            requestAnimationFrame(step);
        }
    };

    requestAnimationFrame(step);
}

// News Tabs
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanels = document.querySelectorAll('.tab-panel');

tabButtons.forEach(button => {
    button.addEventListener('click', () => {
        // Remove active class from all buttons and panels
        tabButtons.forEach(btn => btn.classList.remove('active'));
        tabPanels.forEach(panel => panel.classList.remove('active'));

        // Add active class to clicked button
        button.classList.add('active');

        // Show corresponding panel
        const tabId = button.getAttribute('data-tab');
        const panel = document.getElementById(tabId);
        if (panel) {
            panel.classList.add('active');
        }
    });
});

// Magazine Swiper
const magazineSwiper = new Swiper('.magazine-slider', {
    loop: true,
    speed: 800,
    slidesPerView: 1,
    spaceBetween: 30,
    autoplay: {
        delay: 4000,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.magazine-slider .swiper-pagination',
        clickable: true,
    },
    breakpoints: {
        640: {
            slidesPerView: 2,
        },
        1024: {
            slidesPerView: 3,
        },
    },
});

// Recruitment Tabs
const recruitmentTabButtons = document.querySelectorAll('.recruitment-tab-btn');
const recruitmentPanels = document.querySelectorAll('.recruitment-panel');

recruitmentTabButtons.forEach(button => {
    button.addEventListener('click', () => {
        recruitmentTabButtons.forEach(btn => btn.classList.remove('active'));
        recruitmentPanels.forEach(panel => panel.classList.remove('active'));

        button.classList.add('active');

        const tabId = button.getAttribute('data-tab');
        const panel = document.getElementById(tabId);
        if (panel) {
            panel.classList.add('active');
        }
    });
});

// Header Scroll Effect
let lastScroll = 0;
const header = document.getElementById('header');

window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;

    if (currentScroll > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }

    lastScroll = currentScroll;
});

// Smooth Scroll for Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        const href = this.getAttribute('href');
        if (href !== '#' && href !== '#!') {
            e.preventDefault();
            const target = document.querySelector(href);
            if (target) {
                const headerHeight = header.offsetHeight;
                const targetPosition = target.offsetTop - headerHeight;

                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        }
    });
});

// Mobile Menu Toggle (to be implemented later)
const btnMenu = document.querySelector('.btn-menu');
if (btnMenu) {
    btnMenu.addEventListener('click', () => {
        console.log('Mobile menu toggle');
        // Add mobile menu logic here
    });
}

// Search Button (to be implemented later)
const btnSearch = document.querySelector('.btn-search');
if (btnSearch) {
    btnSearch.addEventListener('click', () => {
        console.log('Search button clicked');
        // Add search logic here
    });
}

console.log('Caritas Renewal - Modern UI initialized successfully!');