const splash = document.getElementById("splash");
const balloonScene = document.getElementById("balloonScene");
const galleryScene = document.getElementById("galleryScene");
const wishScene = document.getElementById("wishScene");
const finalScene = document.getElementById("finalScene");
const startBtn = document.getElementById("startBtn");
const music = document.getElementById("bgMusic");
const finalText = document.getElementById("finalText");

let count = 0;

startBtn.onclick = () => {
  music.play();
  splash.classList.remove("active");
  balloonScene.classList.add("active");
  createBalloon();
};

function createBalloon() {
  if (count >= 15) {
    balloonScene.classList.remove("active");
    galleryScene.classList.add("active");

    setTimeout(() => {
      galleryScene.classList.remove("active");
      wishScene.classList.add("active");

      setTimeout(() => {
        wishScene.classList.remove("active");
        finalScene.classList.add("active");
        typeText();
      }, 3000); // lebih cepat pindah
    }, 4000);

    return;
  }

  const wrapper = document.createElement("div");
  wrapper.className = "balloonWrapper";

  // ⬇️ Naik lebih cepat
  wrapper.style.animation = "riseFast 2s linear forwards";

  const balloon = document.createElement("div");
  balloon.className = "balloon";
  balloon.innerText = count + 1;

  const knot = document.createElement("div");
  knot.className = "knot";

  const string = document.createElement("div");
  string.className = "string";

  balloon.appendChild(knot);
  balloon.appendChild(string);
  wrapper.appendChild(balloon);

  balloon.onclick = () => {
    balloon.classList.add("pop");
    createFragments(balloon);

    setTimeout(() => {
      wrapper.remove();
      count++;

      // ⬇️ Tempo balon berikutnya cepat
      setTimeout(createBalloon, 200);
    }, 200);
  };

  balloonScene.appendChild(wrapper);
}

function createFragments(balloon) {
  for (let i = 0; i < 10; i++) {
    const frag = document.createElement("div");
    frag.style.position = "absolute";
    frag.style.width = "8px";
    frag.style.height = "8px";
    frag.style.background = "#cc0066";
    frag.style.borderRadius = "50%";
    frag.style.left = balloon.getBoundingClientRect().left + 50 + "px";
    frag.style.top = balloon.getBoundingClientRect().top + 50 + "px";
    frag.style.transition = "all 0.4s ease";
    document.body.appendChild(frag);

    setTimeout(() => {
      frag.style.transform = `translate(${Math.random() * 200 - 100}px,${Math.random() * 200 - 100}px)`;
      frag.style.opacity = "0";
    }, 10);

    setTimeout(() => frag.remove(), 400);
  }
}

function typeText() {
  const message = `selamat bertambah usia Azola Pinata. Semoga hal-hal baik selalu mengiringi mu. Akhirnya kita seumuran, walaupun cuma beberapa bulan. Selamatt yaa udah 18 tahun bertahan hidup ehhehe. Doa nya kalo buat saat ini semoga kamu keterima di studi lanjut yang kamu inginkan, semoga bisa jadi kadet UNHAN yaaa. semoga kamu bisa menjadi pak dokter yang hebatt. Kalopun nanti hidup kamu ada yang ga sesuai sama yang kamu inginkan, aku berharap kamu tetep bersyukur dan tetep ngejalaninnya, kalo mau sambat ke aku aja gapapaa.

aku mau ngucapin Terima kasih karna kamu masih mau komunikasi sama aku. you are the kindest person I have ever met. Dan maaf yaa kalo ternyata aku disini tu nge bebani kamu ataupun hal lainnya, kalo kamu ngerasa ga nyaman just tell me please. aku bener" gapapa kamu terbuka tentang hal itu. If you're made for me, kita bakal ditemukan pada saat versi terbaik masing-masing kan? Kamu fokus sama diri kamu aja, dan aku fokus sama diri aku.`;

  let i = 0;
  function typing() {
    if (i < message.length) {
      finalText.innerHTML += message.charAt(i);
      i++;
      setTimeout(typing, 20); // lebih cepat ngetik
    }
  }
  typing();
}
