Metatron-Website-India/pages/contact.js

"use client";

import { useState, useEffect } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";
import SubCard from "@/src/components/AboveFooter";
import Contacts from "@/src/components/services-details-banner/contacts.js";
import ConsenHead from "@/src/ConsenHead";
import Layout from "@/src/layout/Layout";

const Contact = () => {
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    email: "",
    subject: "",
    message: "",
  });

  const [formErrors, setFormErrors] = useState({});
  const [captchaToken, setCaptchaToken] = useState(null);
  const [alert, setAlert] = useState({ show: false, type: "", message: "" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleCaptchaChange = (token) => {
    console.log("✅ Captcha token:", token);
    setCaptchaToken(token);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const errors = {};
    if (!formData.name.trim()) errors.name = "Name is required.";
    if (!formData.phone.trim()) errors.phone = "Phone is required.";
    if (!formData.email.trim()) errors.email = "Email is required.";
    if (!formData.subject.trim()) errors.subject = "Subject is required.";
    if (!formData.message.trim()) errors.message = "Message is required.";
    if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";

    setFormErrors(errors);
    if (Object.keys(errors).length > 0) return;

    const emailData = {
      ...formData,
      message: `Subject: ${formData.subject}<br /><br />Message: ${formData.message}`,
      to: "info@metatroncubesolutions.com",
      senderName: "Metatroncube Contact Page",
      recaptchaToken: captchaToken,
    };

    console.log("🚀 Submitting form data:", emailData);

    try {
      const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
        headers: { "Content-Type": "application/json" },
      });

      setAlert({
        show: true,
        type: "success",
        message: res?.data?.message || "Message sent successfully!",
      });

      setFormData({
        name: "",
        phone: "",
        email: "",
        subject: "",
        message: "",
      });
      setCaptchaToken(null);
      setFormErrors({});
    } catch (error) {
      console.error("❌ Error sending email:", error);
      setAlert({
        show: true,
        type: "danger",
        message: "Failed to send message. Please try again later.",
      });
    }
  };

  useEffect(() => {
    if (alert.show) {
      const timer = setTimeout(() => {
        setAlert((prev) => ({ ...prev, show: false }));
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [alert.show]);

  return (
    <>
      <ConsenHead
        title="Contact - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo"
        description="Let's Connect. Drop us a Line. Whether you have a question, a project idea, or just want to chat, we're here for you."
      />
      <Layout>
        <Contacts pageName="CONTACT US" />

        <div className="contact-us">
          <div className="container">
            <div className="row">
              <div className="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0">
                <div className="contact_from_box">
                  <div className="contact_title pb-4">
                    <h3>Get In Touch</h3>
                  </div>

                  {alert.show && (
                    <div className={`alert alert-${alert.type}`}>{alert.message}</div>
                  )}

                  <form onSubmit={handleSubmit}>
                    <div className="row">
                      <div className="col-lg-6">
                        <div className="form_box mb-30">
                          <input
                            type="text"
                            name="name"
                            placeholder="Full Name"
                            value={formData.name}
                            onChange={handleChange}
                          />
                          {formErrors.name && (
                            <small className="text-danger">{formErrors.name}</small>
                          )}
                        </div>
                      </div>

                      <div className="col-lg-6">
                        <div className="form_box mb-30">
                          <input
                            type="email"
                            name="email"
                            placeholder="Email Address"
                            value={formData.email}
                            onChange={handleChange}
                          />
                          {formErrors.email && (
                            <small className="text-danger">{formErrors.email}</small>
                          )}
                        </div>
                      </div>

                      <div className="col-lg-6">
                        <div className="form_box mb-30">
                          <input
                            type="text"
                            name="phone"
                            placeholder="Phone Number"
                            value={formData.phone}
                            onChange={handleChange}
                          />
                          {formErrors.phone && (
                            <small className="text-danger">{formErrors.phone}</small>
                          )}
                        </div>
                      </div>

                      <div className="col-lg-6">
                        <div className="form_box mb-30">
                          <input
                            type="text"
                            name="subject"
                            placeholder="Subject"
                            value={formData.subject}
                            onChange={handleChange}
                          />
                          {formErrors.subject && (
                            <small className="text-danger">{formErrors.subject}</small>
                          )}
                        </div>
                      </div>

                      <div className="col-lg-12">
                        <div className="form_box mb-30">
                          <textarea
                            name="message"
                            placeholder="Write Message"
                            value={formData.message}
                            onChange={handleChange}
                          />
                          {formErrors.message && (
                            <small className="text-danger">{formErrors.message}</small>
                          )}
                        </div>
                      </div>

                      <div className="col-lg-12 mb-3">
                        <ReCAPTCHA
                          sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
                          onChange={handleCaptchaChange}
                        />
                        {formErrors.captcha && (
                          <small className="text-danger">{formErrors.captcha}</small>
                        )}
                      </div>

                      <div className="col-lg-12">
                        <div className="quote_button">
                          <button className="btn" type="submit">
                            Send A Message
                          </button>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>

              <div className="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0 contact-box">
                <div className="cda-content-area">
                  <div className="cda-single-content d-flex">
                    <div className="cda-content-inner">
                      <h4 className="mid-container">Let's Connect</h4>
                      <h1>Drop us a Line.</h1>
                    </div>
                  </div>
                  <div className="cda-single-content hr d-flex">
                    <div className="cda-content-inner">
                      <p>
                         Whether you have a question, a project idea, or just want to chat about your digital needs, our team is here to listen and provide tailored solutions. Reach out to Metatroncube Software Solutions and start your journey towards innovative digital success.
                      </p>
                    </div>
                  </div>
                  <div className="cda-single-content hr d-flex">
                    <div className="cda-content-inner">
                      <h4>Our Email Address</h4>
                      <p>info@metatroncubesolutions.com</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="sub color-bg">
          <div className="container">
            <SubCard />
          </div>
        </div>
      </Layout>
    </>
  );
};

export default Contact;