const unlockPhrases = ['irene', 'tien', 'zee', 'ren'];
const inputField = document.getElementById('password');
const lockscreen = document.getElementById('lockscreen');
const mainpage = document.getElementById('main-page');
const audio = document.querySelector('audio');
if(inputField){
    if (sessionStorage.getItem('unlocked') === 'true') {
        lockscreen.style.display = 'none';
        mainpage.style.zIndex = '1';
    }
    inputField.addEventListener('input', () => {
        const typedInput = inputField.value.toLowerCase();

        if (unlockPhrases.some(phrase => typedInput.includes(phrase))) {
            sessionStorage.setItem('unlocked', 'true');
            lockscreen.style.transition = 'opacity 0.5s ease-out';
            lockscreen.style.opacity = '0';
            setTimeout(() => {
                lockscreen.remove();
                mainpage.style.zIndex = '1';
            }, 500);
            audio.volume = 0;
            audio.play();
            
            const fadeIn = setInterval(() => {
                if (audio.volume < 0.2) {
                    audio.volume += 0.005;
                } else {
                    clearInterval(fadeIn);
                }
            }, 100);
            }
        
        if (typedInput.length > 20) inputField.value = '';
    });

}
const thankLetterContainer = document.getElementById('thank-letter-container');
const iloveirene = document.getElementById("lockscreen-container");
const pawImage = document.getElementById("paw-lockscreen-image");
if (pawImage) {
    pawImage.addEventListener("click", () => {
        console.log("Paw clicked");
        pawImage.style.transition = 'all 0.7s ease-out';
        pawImage.style.height = '300px';
        
        setTimeout(() => {
            iloveirene.style.transition = 'opacity 0.7s ease-out';
            iloveirene.style.opacity = '0';
            pawImage.style.opacity = '0';
            
            setTimeout(() => {
                iloveirene.remove();
                pawImage.remove();
                thankLetterContainer.style.display = 'flex';
            }, 700);
        }, 700);
        
    });
}