const slides = [
  {
    title: "Learn Your Way",
    desc: "Choose topics you love and follow a learning path that fits your goals.",
    bg: "linear-gradient(180deg, rgba(0, 0, 0, 0.08) 36.06%, rgba(18, 18, 18, 0.75) 77.14%), url('../assets/images/02_Onboarding.png')",
  },
  {
    title: "Stay Motivated",
    desc: "Watch your progress, earn badges, and celebrate every milestone.",
    bg: "linear-gradient(180deg, rgba(0, 0, 0, 0.08) 36.06%, rgba(18, 18, 18, 0.75) 77.14%), url('../assets/images/03_Onboarding.png')",
  },
  {
    title: "Ready to Grow?",
    desc: "Join a community of learners who think, learn, and evolve.",
    bg: "linear-gradient(180deg, rgba(0, 0, 0, 0.08) 36.06%, rgba(18, 18, 18, 0.75) 77.14%), url('../assets/images/04_Onboarding.png')",
  },
];

let currentStep = 0;

function nextStep() {
  if (currentStep < slides.length - 1) {
    currentStep++;
    updateUI();
  } else {
    window.location.href = "./sign-in.html";
  }
}

function updateUI() {
  const content = document.getElementById("onboard-content");
  const container = document.getElementById("main-container");

  content.style.opacity = 0;

  setTimeout(() => {
    const data = slides[currentStep];

    document.getElementById("title").innerText = data.title;
    document.getElementById("desc").innerText = data.desc;
    container.style.background = data.bg;
    container.style.backgroundSize = "cover";
    container.style.backgroundPosition = "center";

    const dots = document.querySelectorAll(".dot");
    dots.forEach((dot, index) => {
      if (index === currentStep) {
        dot.classList.add("active");
      } else {
        dot.classList.remove("active");
      }
    });

    if (currentStep === slides.length - 1) {
      document.getElementById("btn-group").innerHTML = `
              <button onclick="nextStep()" class="btn-full w-full">
                Let's Get Started
                <svg class="w-5 h-5 ml-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
              </button>
            `;
    }

    content.style.opacity = 1;
  }, 300);
}

window.onload = () => {
  const container = document.getElementById("main-container");
  container.style.background = slides[0].bg;
  container.style.backgroundSize = "cover";
  container.style.backgroundPosition = "center";
};
