const buttons = document.querySelectorAll(".filter-btn");
buttons.forEach(btn => {
    btn.addEventListener("click", function () {
        buttons.forEach(b => b.classList.remove("active"));
        this.classList.add("active");
    });
});


const lbMusicBtn = document.getElementById("lbMusicBtn");
const lbAudio = document.getElementById("lbAudio");

if (lbMusicBtn && lbAudio) {
    lbAudio.loop = true; 
    const savedState = localStorage.getItem("musicState");
    let isLbPlaying = savedState === null ? true : (savedState === "on");
    
    const updateMusicState = () => {
        if (isLbPlaying) {
            lbAudio.play().then(() => {
                lbMusicBtn.innerHTML = "🔊";
            }).catch(error => {
                console.log("Autoplay dicegah, menunggu interaksi user...");
                lbMusicBtn.innerHTML = "🔇"; 
                
                const enableAudioOnInteraction = () => {
                    lbAudio.play().then(() => {
                        lbMusicBtn.innerHTML = "🔊";
                    });
                    document.removeEventListener('click', enableAudioOnInteraction);
                    document.removeEventListener('touchstart', enableAudioOnInteraction);
                };
                
                document.addEventListener('click', enableAudioOnInteraction);
                document.addEventListener('touchstart', enableAudioOnInteraction);
            });
        } else {
            lbAudio.pause();
            lbMusicBtn.innerHTML = "🔇";
        }
    };

    updateMusicState();

    lbMusicBtn.addEventListener("click", (e) => {
        e.stopPropagation(); 

        if (isLbPlaying) {
            isLbPlaying = false;
            localStorage.setItem("musicState", "off");
        } else {
            isLbPlaying = true;
            localStorage.setItem("musicState", "on");
        }
        updateMusicState();
    });
}