kh3_website/js/contact.js

// Contact page specific scripts

// Form submission
document.addEventListener("DOMContentLoaded", () => {
  const contactForm = document.getElementById("contactForm");
  if (contactForm) {
    contactForm.addEventListener("submit", async (e) => {
      e.preventDefault();

      const submitButton = contactForm.querySelector('button[type="submit"]');
      const originalText = submitButton.innerHTML;

      // Show loading state
      submitButton.innerHTML = "<span>Sending...</span>";
      submitButton.disabled = true;

      try {
        const formData = new FormData(contactForm);
        const name = formData.get("name");
        const email = formData.get("email");
        const phone = formData.get("phone");
        const company = formData.get("company");
        const service = formData.get("service");
        const budget = formData.get("budget");
        const message = formData.get("message");

        // Send to Resend API
        const response = await fetch("https://api.resend.com/emails", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer re_YOUR_API_KEY_HERE", // Replace with your Resend API key
          },
          body: JSON.stringify({
            from: "KH3 Website <noreply@yourdomain.com>", // Replace with your verified domain
            to: ["george.fleef@gmail.com"],
            subject: `New contact form submission from ${name}`,
            html: `
              <h2>New Contact Form Submission</h2>
              <p><strong>Name:</strong> ${name}</p>
              <p><strong>Email:</strong> ${email}</p>
              <p><strong>Phone:</strong> ${phone || "Not provided"}</p>
              <p><strong>Company:</strong> ${company || "Not provided"}</p>
              <p><strong>Service Interest:</strong> ${
                service || "Not specified"
              }</p>
              <p><strong>Budget:</strong> ${budget || "Not specified"}</p>
              <p><strong>Message:</strong></p>
              <p>${message.replace(/\n/g, "<br>")}</p>
            `,
          }),
        });

        if (response.ok) {
          alert(
            "Thank you for your message! We'll get back to you within 24 hours."
          );
          contactForm.reset();
        } else {
          throw new Error("Failed to send email");
        }
      } catch (error) {
        console.error("Error:", error);
        alert(
          "Sorry, there was an error sending your message. Please try again or contact us directly at george.fleef@gmail.com"
        );
      } finally {
        // Reset button
        submitButton.innerHTML = originalText;
        submitButton.disabled = false;
      }
    });
  }

  // Staggered entrance for hero and sections
  window.addEventListener("load", () => {
    const heroTitle = document.querySelector(
      "section.relative h1.masked-reveal"
    );
    const heroSub = document.querySelector("section.relative div.text-xl");
    if (heroTitle) {
      heroTitle.style.animation = "maskReveal 900ms ease-out 150ms forwards";
    }
    if (heroSub) {
      heroSub.style.opacity = "0";
      heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
    }

    const contactSectionFade = document.querySelector("section.py-20.bg-white");
    if (contactSectionFade) {
      contactSectionFade.style.opacity = "0";
      contactSectionFade.style.animation =
        "fadeUp 800ms ease-out 600ms forwards";
    }

    const mapSection = document.querySelector("section.py-20.bg-kh3-black");
    if (mapSection) {
      mapSection.style.opacity = "0";
      mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
    }
  });

  // Gentle auto-scroll like WHAT page: nudge ~1.1vh after 3s with easing
  setTimeout(() => {
    const startScroll = window.pageYOffset;
    const targetScroll = window.innerHeight * 1.0;
    const distance = targetScroll - startScroll;
    const duration = 2000;
    let start = null;

    function animateScroll(ts) {
      if (start === null) start = ts;
      const elapsed = ts - start;
      const progress = Math.min(elapsed / duration, 1);
      const easeOutQuart = 1 - Math.pow(1 - progress, 4);
      window.scrollTo(0, startScroll + distance * easeOutQuart);
      if (progress < 1) requestAnimationFrame(animateScroll);
    }

    requestAnimationFrame(animateScroll);
  }, 3000);
});