
document.addEventListener('DOMContentLoaded', function() {
    
    // Slider Logic (Animation Only)
    function startSlider(containerId, indicatorId, intervalTime) {
        let currentIndex = 0;
        const container = document.getElementById(containerId);
        if (!container) return;
        
        // Select direct children of wrapper
        const wrapper = document.getElementById(containerId + '-wrapper');
        const items = wrapper.children; 
        const indicators = document.getElementById(indicatorId).getElementsByClassName('indicator');
        const totalItems = items.length;

        // Initial Setup for JS disabled fallback (ensure first is visible)
        for(let i=0; i<totalItems; i++) {
            if(i === 0) {
                items[i].classList.add('active');
                items[i].style.opacity = '1';
                items[i].style.transform = containerId.includes('review') ? 'translateX(0)' : 'translateY(0)';
            } else {
                items[i].classList.remove('active');
                items[i].style.opacity = '0';
                items[i].style.transform = containerId.includes('review') ? 'translateX(50px)' : 'translateY(20px)';
            }
        }

        setInterval(() => {
            // Remove active class from current
            items[currentIndex].classList.remove('active');
            items[currentIndex].style.opacity = '0';
            if(containerId.includes('review')) {
                items[currentIndex].style.transform = 'translateX(-50px)'; // Slide out left
            } else {
                items[currentIndex].style.transform = 'translateY(-20px)'; // Slide out up
            }
            if(indicators[currentIndex]) indicators[currentIndex].classList.remove('active');

            // Move to next
            currentIndex = (currentIndex + 1) % totalItems;

            // Add active class to next
            items[currentIndex].classList.add('active');
            items[currentIndex].style.opacity = '1';
            if(containerId.includes('review')) {
                items[currentIndex].style.transform = 'translateX(0)'; // Reset position
                // Reset previous for next animation cycle
                setTimeout(() => {
                     for(let i=0; i<totalItems; i++) {
                        if(i !== currentIndex) items[i].style.transform = 'translateX(50px)';
                     }
                }, 500);
            } else {
                items[currentIndex].style.transform = 'translateY(0)';
                setTimeout(() => {
                    for(let i=0; i<totalItems; i++) {
                       if(i !== currentIndex) items[i].style.transform = 'translateY(20px)';
                    }
               }, 500);
            }
            if(indicators[currentIndex]) indicators[currentIndex].classList.add('active');

        }, intervalTime);
    }

    // Initialize Sliders
    // Start Sliders with slight offset to not sync perfectly
    setTimeout(() => startSlider('review-slider', 'review-indicators', 5000), 0);
    setTimeout(() => startSlider('faq-slider', 'faq-indicators', 6000), 1000);

    // SEO Article Read More Toggle
    const readMoreBtn = document.getElementById('seo-read-more-btn');
    const hiddenContent = document.getElementById('seo-hidden-content');
    const dots = document.getElementById('seo-dots');

    if (readMoreBtn && hiddenContent) {
        readMoreBtn.addEventListener('click', function() {
            if (hiddenContent.style.display === 'none') {
                hiddenContent.style.display = 'block';
                readMoreBtn.textContent = 'Tutup Artikel';
                if(dots) dots.style.display = 'none';
            } else {
                hiddenContent.style.display = 'none';
                readMoreBtn.textContent = 'Baca Selengkapnya';
                if(dots) dots.style.display = 'inline';
            }
        });
    }

});
