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) {
    
    // 1. Cek 'memori' browser (localStorage). 
    // Kalau belum pernah diset (null), anggap "on" (default).
    const savedState = localStorage.getItem("musicState");
    let isLbPlaying = savedState === null ? true : (savedState === "on");

    // 2. Fungsi untuk Update Tampilan & Audio sesuai status
    const updateMusicState = () => {
        if (isLbPlaying) {
            // Coba play
            lbAudio.play().then(() => {
                lbMusicBtn.innerHTML = "🔊";
            }).catch(error => {
                console.log("Autoplay dicegah browser, perlu interaksi.");
                // Kalau diblokir browser, paksa status jadi off di tampilan
                lbMusicBtn.innerHTML = "🔇";
                isLbPlaying = false; 
                localStorage.setItem("musicState", "off");
            });
        } else {
            // Pause
            lbAudio.pause();
            lbMusicBtn.innerHTML = "🔇";
        }
    };

    // 3. Jalankan pengecekan awal saat halaman/filter dimuat
    updateMusicState();

    // 4. Event Listener Tombol
    lbMusicBtn.addEventListener("click", () => {
        if (isLbPlaying) {
            // User mau mematikan
            isLbPlaying = false;
            localStorage.setItem("musicState", "off"); // Simpan ke memori "off"
        } else {
            // User mau menyalakan
            isLbPlaying = true;
            localStorage.setItem("musicState", "on"); // Simpan ke memori "on"
        }
        updateMusicState(); // Terapkan perubahan
    });
}