const welcomeBanner = document.getElementById("welcomeBanner");
const countdownEl = document.getElementById("countdown");
const stayBtn = document.getElementById("stayBtn");
const revealBtn = document.getElementById("revealBtn");
const root = document.documentElement;

let countdownSeconds = 10;
let countdownInterval, redirectTimeout;

// Animate in the banner
setTimeout(() => {
  welcomeBanner?.classList.remove("right-full");
  welcomeBanner?.classList.add("left-1/2");
}, 300);

// Start countdown
function startCountdown() {
  countdownEl.textContent = countdownSeconds;

  countdownInterval = setInterval(() => {
    countdownSeconds--;
    countdownEl.textContent = countdownSeconds;

    if (countdownSeconds <= 0) {
      clearInterval(countdownInterval);
    }
  }, 1000);

  redirectTimeout = setTimeout(() => {
    if (!intro.classList.contains("hidden")) {
      revealBtn.click(); // Simulate reveal click
    }
  }, countdownSeconds * 1000);
}
startCountdown();

stayBtn?.addEventListener("click", () => {
  clearInterval(countdownInterval);
  clearTimeout(redirectTimeout);

  countdownSeconds += 10;

  stayBtn.textContent = "⏳";
  stayBtn.disabled = true;

  // Re-enable the button after 10 seconds
  setTimeout(() => {
    stayBtn.textContent = "Stay";
    stayBtn.disabled = false;
  }, 10000);

  startCountdown();
});

revealBtn?.addEventListener("click", () => {
  localStorage.setItem("visited", "true");
  localStorage.setItem("activeSection", "home");
  intro.classList.add("hidden");
  revealSection.classList.remove("hidden");
  showSection(null, "home");

  document
    .querySelector("#revealSection > header > div > button")
    .classList.add("active");
});

const skillTemplate = document.getElementById("skill-item-template").content;
const marqueeWrapper = document.querySelector(".animate-marquee");

for (let i = 0; i < 2; i++) {
  const clone = document.importNode(skillTemplate, true);
  marqueeWrapper.appendChild(clone);
}