// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener("click", function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute("href"));
    if (target) {
      target.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  });
});

// Scroll animations
const observerOptions = {
  threshold: 0.1,
  rootMargin: "0px 0px -50px 0px",
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
    }
  });
}, observerOptions);

document.querySelectorAll(".fade-in").forEach((el) => observer.observe(el));

// Mobile menu toggle
const mobileMenuBtn = document.getElementById("mobileMenuBtn");
const navLinks = document.getElementById("navLinks");

if (mobileMenuBtn && navLinks) {
  mobileMenuBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    mobileMenuBtn.classList.toggle("active");
    navLinks.classList.toggle("active");

    // Prevent body scroll when menu is open
    if (navLinks.classList.contains("active")) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  });

  // Close menu when clicking outside
  document.addEventListener("click", (e) => {
    if (!navLinks.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
      navLinks.classList.remove("active");
      mobileMenuBtn.classList.remove("active");
      document.body.style.overflow = "";
    }
  });

  // Close menu when clicking a link
  navLinks.querySelectorAll("a").forEach((link) => {
    link.addEventListener("click", () => {
      navLinks.classList.remove("active");
      mobileMenuBtn.classList.remove("active");
      document.body.style.overflow = "";
    });
  });
}
// Nav background on scroll
window.addEventListener("scroll", () => {
  const nav = document.querySelector("nav");
  if (window.scrollY > 100) {
    nav.classList.add("scrolled");
  } else {
    nav.classList.remove("scrolled");
  }
});
// Contact Form Popup
const contactPopup = document.getElementById("contactPopup");
const closePopupBtn = document.getElementById("closePopup");
const contactForm = document.getElementById("contactForm");
const formSuccess = document.getElementById("formSuccess");

// Open popup when clicking "Start Your Project" or "Get Started" buttons
document.querySelectorAll(
  '#heroCtaBtn, [data-i18n="cta.btn1"], [data-i18n="projects.cta.btn"]'
).forEach((btn) => {
  btn.addEventListener("click", (e) => {
    e.preventDefault();
    if (contactPopup) {
      contactPopup.classList.add("active");
      document.body.style.overflow = "hidden";
    }
  });
});

// Close popup
function closePopup() {
  contactPopup.classList.remove("active");
  document.body.style.overflow = "";
}

if (closePopupBtn) {
  closePopupBtn.addEventListener("click", closePopup);
}

// Close popup when clicking outside
if (contactPopup) {
  contactPopup.addEventListener("click", (e) => {
    if (e.target === contactPopup) {
      closePopup();
    }
  });
}

// Close popup with Escape key
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && contactPopup.classList.contains("active")) {
    closePopup();
  }
});

// Handle form submission
if (contactForm) {
  contactForm.addEventListener("submit", async (e) => {
    e.preventDefault();

    const submitBtn = contactForm.querySelector(".btn-submit");
    const originalText = submitBtn.textContent;

    submitBtn.textContent = "Sending...";
    submitBtn.disabled = true;

    const formData = new FormData(contactForm);
    const data = Object.fromEntries(formData);

    try {
      const response = await fetch("mail.php", {
        method: "POST",
        body: formData,
      });

      const data = await response.json();

      if (data.success) {
        // Show success
        contactForm.style.display = "none";
        formSuccess.style.display = "block";

        // Reset and close after 3 seconds
        setTimeout(() => {
          closePopup();
          setTimeout(() => {
            contactForm.style.display = "flex";
            formSuccess.style.display = "none";
            contactForm.reset();
            submitBtn.textContent = originalText;
            submitBtn.disabled = false;
          }, 300);
        }, 3000);
      } else {
        throw new Error(data.message || "Failed to send");
      }
    } catch (error) {
      console.error("Error:", error);
      submitBtn.textContent = originalText;
      submitBtn.disabled = false;
      alert("Error sending message. Please try again.");
    }
  });
}