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

    document.querySelectorAll('.collapsible').forEach(button => {
        const content = button.nextElementSibling;
        const chevron = button.querySelector('svg');
        const shouldOpen = button.dataset.open === "true";

        if (shouldOpen) {
            content.classList.remove("hidden");
            content.style.height = "auto";
            content.style.opacity = "1";
            if (chevron) chevron.style.transform = "rotate(180deg)";
        } else {
            content.classList.add("hidden");
            content.style.height = "0";
            content.style.opacity = "0";
            if (chevron) chevron.style.transform = "rotate(0deg)";
        }
    });

    document.querySelectorAll('.collapsible').forEach(button => {
        button.addEventListener('click', () => {

            const content = button.nextElementSibling;
            const chevron = button.querySelector('svg');

            document.querySelectorAll('.collapsible').forEach(other => {
                if (other !== button) {
                    const otherContent = other.nextElementSibling;
                    const otherChevron = other.querySelector('svg');

                    if (!otherContent.classList.contains('hidden')) {
                        gsap.to(otherContent, {
                            height: 0,
                            opacity: 0,
                            duration: 0.25,
                            ease: 'power2.in',
                            onComplete: () => {
                                otherContent.classList.add('hidden');
                                if (otherChevron) gsap.to(otherChevron, { rotation: 0, duration: 0.25 });
                            }
                        });
                    }
                }
            });

            if (content.classList.contains('hidden')) {
                content.classList.remove('hidden');
                gsap.fromTo(content,
                    { height: 0, opacity: 0 },
                    { height: 'auto', opacity: 1, duration: 0.25, ease: 'power2.out' }
                );
                if (chevron) gsap.to(chevron, { rotation: 180, duration: 0.25 });

            } else {
                gsap.to(content, {
                    height: 0,
                    opacity: 0,
                    duration: 0.25,
                    ease: 'power2.in',
                    onComplete: () => {
                        content.classList.add('hidden');
                        if (chevron) gsap.to(chevron, { rotation: 0, duration: 0.25 });
                    }
                });
            }
        });
    });

});