document.addEventListener("DOMContentLoaded", () => {
  document.body.classList.add("loaded");
  initializeCarousel();
  initializeForms();
});

function initializeCarousel() {
  const slides = document.querySelectorAll(".hero-slide");
  const dots = document.querySelectorAll(".carousel-dot");
  if (!slides.length) return;

  let current = 0;
  const setActive = (index) => {
    slides.forEach((slide, idx) => {
      slide.classList.toggle("active", idx === index);
    });
    dots.forEach((dot, idx) => {
      dot.classList.toggle("active", idx === index);
    });
    current = index;
  };

  dots.forEach((dot) => {
    dot.addEventListener("click", () => setActive(Number(dot.dataset.index)));
  });

  setActive(0);
  setInterval(() => {
    const next = (current + 1) % slides.length;
    setActive(next);
  }, 6000);
}

function initializeForms() {
  const signupForm = document.getElementById("signupForm");
  const loginForm = document.getElementById("loginForm");
  const contactForm = document.getElementById("contactForm");

  if (signupForm) {
    signupForm.addEventListener("submit", (event) => {
      event.preventDefault();
      const name = document.getElementById("signupName").value.trim();
      const email = document.getElementById("signupEmail").value.trim().toLowerCase();
      const password = document.getElementById("signupPassword").value;
      const message = document.getElementById("signupMessage");

      if (!name || !email || !password) {
        message.textContent = "Please fill in all fields.";
        return;
      }

      const users = getUsers();
      if (users.some((user) => user.email === email)) {
        message.textContent = "An account with that email already exists.";
        return;
      }

      users.push({ name, email, password });
      localStorage.setItem("hotpecUsers", JSON.stringify(users));
      message.textContent = "Your account has been created. You can now login.";
      message.style.color = "#1b4b91";
      signupForm.reset();
    });
  }

  if (loginForm) {
    loginForm.addEventListener("submit", (event) => {
      event.preventDefault();
      const email = document.getElementById("loginEmail").value.trim().toLowerCase();
      const password = document.getElementById("loginPassword").value;
      const message = document.getElementById("loginMessage");

      const users = getUsers();
      const found = users.find((user) => user.email === email && user.password === password);
      if (!found) {
        message.textContent = "Login failed. Check your email and password.";
        message.style.color = "#d32f2f";
        return;
      }

      message.textContent = `Welcome back thank you your time, ${found.name}! Redirecting...`;
      message.style.color = "#1b4b91";
      setTimeout(() => {
        window.location.href = "../index.html";
      }, 1200);
    });
  }

  if (contactForm) {
    contactForm.addEventListener("submit", (event) => {
      event.preventDefault();
      const message = document.getElementById("contactMessage");
      contactForm.reset();
      message.textContent = "Thanks for reaching out! We'll be in touch soon.";
      message.style.color = "#1b4b91";
    });
  }
}

function getUsers() {
  try {
    const raw = localStorage.getItem("hotpecUsers") || "[]";
    return JSON.parse(raw);
  } catch (error) {
    return [];
  }
}
