const envelope = document.getElementById("envelope");
const heartBtn = document.getElementById("heartBtn");
const message = document.getElementById("message");
const music = document.getElementById("music");
const forgiveBtn = document.getElementById("forgiveBtn");
const popup = document.getElementById("popup");
const hearts = document.querySelector(".hearts");

let opened = false;

heartBtn.addEventListener("click", () => {
    if (opened) return;

    opened = true;
    envelope.classList.add("open");

    // Play music (works after user clicks)
    music.play().catch(() => {});

    // Start typing after envelope opens
    setTimeout(typeWriter, 700);

    // Floating hearts
    setInterval(createHeart, 400);
});

function typeWriter() {
    let i = 0;
    message.textContent = "";

    const typing = setInterval(() => {
        message.textContent += letterText.charAt(i);
        i++;

        if (i >= letterText.length) {
            clearInterval(typing);
        }
    }, 28);
}

function createHeart() {
    const heart = document.createElement("span");

    heart.innerHTML = "💖";

    heart.style.left = Math.random() * 100 + "vw";
    heart.style.animationDuration = (5 + Math.random() * 4) + "s";
    heart.style.fontSize = (16 + Math.random() * 18) + "px";

    hearts.appendChild(heart);

    setTimeout(() => {
        heart.remove();
    }, 9000);
}

forgiveBtn.addEventListener("click", () => {
    popup.style.display = "flex";
});

function closePopup() {
    popup.style.display = "none";
}

// Optional: close popup by clicking outside it
popup.addEventListener("click", (e) => {
    if (e.target === popup) {
        closePopup();
    }
});