sixty5-street/app/contact/page.js

'use client'
import { useState, useEffect } from "react";
import Layout from "@/components/layout/Layout";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";

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

  const [alert, setAlert] = useState({
    show: false,
    type: "",
    message: "",
  });

  const [captchaToken, setCaptchaToken] = useState(null);

  const handleCaptchaChange = (token) => {
    setCaptchaToken(token);
  };

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

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

    if (!formData.name || !formData.email || !formData.phone || !formData.message) {
      setAlert({ show: true, type: "danger", message: "Please fill in all fields." });
      return;
    }

    if (!captchaToken) {
      setAlert({ show: true, type: "danger", message: "Please verify the CAPTCHA." });
      return;
    }

    const emailData = {
      ...formData,
      recaptchaToken: captchaToken,
      to: "info@metatroncubesolutions.com",
      senderName: "Website Contact Form",
      message: `
        <b>Name:</b> ${formData.name}<br/>
        <b>Email:</b> ${formData.email}<br/>
        <b>Phone:</b> ${formData.phone}<br/><br/>
        <b>Message:</b><br/>${formData.message}
      `,
    };

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

      setAlert({ show: true, type: "success", message: "Your message has been sent successfully!" });
      setFormData({ name: "", email: "", phone: "", message: "" });
      setCaptchaToken(null);
    } catch {
      setAlert({ show: true, type: "danger", message: "Failed to send your message. Try again later." });
    }
  };

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

  return (
    <Layout
      headerStyle={2}
      footerStyle={2}
      breadcrumbTitle="Contact Us"
      bgImage="/assets/images/inner-banner/contact-us-banner.webp"
    >
      {/* Contact Section */}
      <section className="contact-section" id="contact">
        <div className="auto-container">
          <div className="row clearfix">

            {/* Left Column - Info */}
            <div className="title-column col-lg-5 col-md-12 col-sm-12">
              <div className="inner-column">
                <div className="sec-title">
                  <div className="title">Reach us</div>
                  <h2>Contact</h2>
                  <div className="separate"></div>
                  <div className="text">
                    Whether you're grabbing lunch, chilling with friends, or fueling a late-night craving, we've got something hot, hearty, and delicious waiting for you.
                  </div>
                </div>

                <ul className="info-list">
                  <li>
                    <span className="icon flaticon-telephone"></span>
                    <strong>Phone</strong>
                    <a href="tel:+289-498-6565">+ 289-498-6565</a>
                  </li>
                  <li>
                    <span className="icon flaticon-pin"></span>
                    <strong>Address</strong>
                    <a href="#">Unit 75, 100 Maritime Ontario Blvd, Brampton, ON L6S 0E7</a>
                  </li>
                </ul>
              </div>
            </div>

            {/* Right Column - Form */}
            <div className="form-column col-lg-7 col-md-12 col-sm-12">
              <div className="inner-column">
                <div className="contact-form">
                  {alert.show && (
                    <div className={`alert ${alert.type === "success" ? "text-green-600" : "text-red-600"}`}>
                      {alert.message}
                    </div>
                  )}

                  <form onSubmit={handleSubmit}>
                    <div className="row clearfix">

                      <div className="col-lg-6 col-md-12 col-sm-12 form-group">
                        <input
                          type="text"
                          name="name"
                          placeholder="Your Name"
                          value={formData.name}
                          onChange={handleChange}
                          required
                        />
                      </div>

                      <div className="col-lg-6 col-md-12 col-sm-12 form-group">
                        <input
                          type="text"
                          name="phone"
                          placeholder="Your Phone Number"
                          value={formData.phone}
                          onChange={handleChange}
                          required
                        />
                      </div>

                      <div className="col-lg-12 col-md-12 col-sm-12 form-group">
                        <input
                          type="email"
                          name="email"
                          placeholder="Your Email"
                          value={formData.email}
                          onChange={handleChange}
                          required
                        />
                      </div>

                      <div className="col-lg-12 col-md-12 col-sm-12 form-group">
                        <textarea
                          name="message"
                          placeholder="Your Message"
                          value={formData.message}
                          onChange={handleChange}
                          required
                        ></textarea>
                      </div>

                      <div className="col-lg-12 col-md-12 col-sm-12 form-group">
                        <ReCAPTCHA
                          sitekey="6LeaPggsAAAAAM4DHBSX0y3IC6lu9SrJIhoQKZKo"
                          onChange={handleCaptchaChange}
                        />
                      </div>

                      <div className="col-lg-12 col-md-12 col-sm-12 form-group">
                        <button type="submit" className="theme-btn btn-style-four">
                          <span className="icon flaticon-arrow-pointing-to-right"></span> Send
                        </button>
                      </div>

                    </div>
                  </form>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* Google Map */}
      <section className="contact-map-section">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2888.8200521592764!2d-79.6977294!3d43.749255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b3dbb0e18ed73%3A0xbdb3783d6e6393c9!2s100%20Maritime%20Ontario%20Blvd%20%2375%2C%20Brampton%2C%20ON%20L6S%200E7%2C%20Canada!5e0!3m2!1sen!2sus!4v170995882xxx"
          allowFullScreen
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        ></iframe>
      </section>
    </Layout>
  );
}