script.js

// Smooth scroll for in-page links
document.querySelectorAll('a[href^="#"]').forEach((a) => {
  a.addEventListener("click", (e) => {
    const target = document.querySelector(a.getAttribute("href"));
    if (!target) return;
    e.preventDefault();
    target.scrollIntoView({ behavior: "smooth", block: "start" });
  });
});

// Open modal
function openModal(modalId) {
  const modal = document.getElementById(modalId);
  if (!modal) return;
  modal.setAttribute("aria-hidden", "false");
  document.body.style.overflow = "hidden";
}

// Close modal + stop media (YouTube/video)
function closeModal(modal) {
  if (!modal) return;
  modal.setAttribute("aria-hidden", "true");
  document.body.style.overflow = "";

  modal.querySelectorAll("video").forEach((v) => {
    v.pause();
    v.currentTime = 0;
  });

  modal.querySelectorAll("iframe").forEach((frame) => {
    const src = frame.getAttribute("src");
    frame.setAttribute("src", src);
  });
}

// Click handlers for project cards
document.querySelectorAll("[data-modal]").forEach((btn) => {
  btn.addEventListener("click", () => openModal(btn.dataset.modal));
});

// Close handlers
document.querySelectorAll(".modal [data-close]").forEach((btn) => {
  btn.addEventListener("click", () => closeModal(btn.closest(".modal")));
});

// Click outside modal box closes it
document.querySelectorAll(".modal").forEach((modal) => {
  modal.addEventListener("click", (e) => {
    if (e.target === modal) closeModal(modal);
  });
});

// ESC closes any open modal
window.addEventListener("keydown", (e) => {
  if (e.key !== "Escape") return;
  document.querySelectorAll(".modal[aria-hidden='false']").forEach((m) => closeModal(m));
});

// Scroll reveal animation
const revealObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("is-visible");
        revealObserver.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.16 }
);

document.querySelectorAll(".section-reveal").forEach((el) => revealObserver.observe(el));

// Active nav link based on current section
const sections = Array.from(document.querySelectorAll("section[id]"));
const navLinks = Array.from(document.querySelectorAll(".links a"));

const sectionObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;
      const id = entry.target.getAttribute("id");
      navLinks.forEach((link) => {
        link.classList.toggle("active", link.getAttribute("href") === `#${id}`);
      });
    });
  },
  {
    rootMargin: "-35% 0px -50% 0px",
    threshold: 0.1,
  }
);

sections.forEach((section) => sectionObserver.observe(section));

// Hero particles and subtle parallax motion
const heroParticles = document.getElementById("bg-dots");
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

if (heroParticles && !prefersReducedMotion) {
  const dotCount = window.innerWidth < 640 ? 36 : 64;
  const colors = ["rgba(216,161,59,0.9)", "rgba(134,176,160,0.85)", "rgba(196,74,59,0.8)", "rgba(239,233,223,0.7)"];

  for (let i = 0; i < dotCount; i += 1) {
    const dot = document.createElement("span");
    dot.className = "particle";
    const size = Math.random() * 4 + 1.5;
    const duration = Math.random() * 12 + 11;
    const delay = Math.random() * -duration;
    dot.style.left = `${Math.random() * 100}%`;
    dot.style.top = `${Math.random() * 100}%`;
    dot.style.width = `${size}px`;
    dot.style.height = `${size}px`;
    dot.style.background = colors[Math.floor(Math.random() * colors.length)];
    dot.style.animationDuration = `${duration}s`;
    dot.style.animationDelay = `${delay}s`;
    dot.style.setProperty("--drift", `${(Math.random() - 0.5) * 42}px`);
    heroParticles.appendChild(dot);
  }
}


// Contact form AJAX submit (no redirect page)
const contactForm = document.getElementById("contact-form");
const statusEl = document.getElementById("form-status");
const submitBtn = document.getElementById("contact-submit");

if (contactForm) {
  const FORM_ENDPOINT = "/api/contact";

  contactForm.addEventListener("submit", async (e) => {
    e.preventDefault();

    const email = document.getElementById("contact-email")?.value.trim() || "";
    const message = document.getElementById("contact-message")?.value.trim() || "";

    if (!email || !message) {
      if (statusEl) statusEl.textContent = "Please fill in your email and message.";
      return;
    }

    if (submitBtn) submitBtn.disabled = true;
    if (statusEl) statusEl.textContent = "Sending...";

    try {
      const res = await fetch(FORM_ENDPOINT, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({
          email,
          message,
          _subject: "New Portfolio Contact Form Message",
          _template: "table",
          _captcha: "false",
        }),
      });

      const data = await res.json();
      if (res.ok && data?.success === true) {
        if (statusEl) statusEl.textContent = "Message sent. Thanks for reaching out.";
        contactForm.reset();
      } else {
        if (statusEl) statusEl.textContent = data?.message || "Could not send right now. Please email me directly at ignanaseelan04@gmail.com.";
        throw new Error("Submit failed");
      }
    } catch (err) {
      if (statusEl) {
        statusEl.textContent = "Could not send right now. Please email me directly at ignanaseelan04@gmail.com.";
      }
    } finally {
      if (submitBtn) submitBtn.disabled = false;
    }
  });
}