keystone/components/common/Contact.jsx

"use client";
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";

export default function Contact() {
  const [formData, setFormData] = useState({
    fullName: '',
    email: '',
    phone: '',
    message: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState(null);

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitStatus(null);

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          type: 'contact',
          ...formData,
        }),
      });

      if (response.ok) {
        setSubmitStatus('success');
        setFormData({
          fullName: '',
          email: '',
          phone: '',
          message: ''
        });
      } else {
        setSubmitStatus('error');
      }
    } catch (error) {
      console.error('Error:', error);
      setSubmitStatus('error');
    } finally {
      setIsSubmitting(false);
      setTimeout(() => setSubmitStatus(null), 5000);
    }
  };

  return (
    <div className="section-contact style-default position-relative" style={{ paddingLeft: "30px", paddingRight: "30px" }}>
      <div className="tf-container-2" style={{ padding:"30px", background: "linear-gradient(89.8deg, #ff3a2d -0.43%, #ffa13f 100.84%)", borderRadius: "26px" }}>
        <div className="row">
          <div className="col-lg-6">
            <div className="left">
              <div className="heading">
                <div className="h1 split-text split-lines-rotation-x text-white">
                  Let's Start Building Solutions Together
                </div>
              </div>
              <div className="bot">
                <div className="content">
                  <h6 className="mb_5 text-white">+91 90954 50005</h6>
                  <p className="text-body-2 text-white">
                    Call us for urgent Inquiry
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div className="col-lg-6">
            {submitStatus && (
              <div className={`alert mb-3 ${submitStatus === 'success' ? 'alert-success' : 'alert-danger'}`} style={{
                padding: '10px 15px',
                borderRadius: '5px',
                marginBottom: '20px',
                backgroundColor: submitStatus === 'success' ? '#d4edda' : '#f8d7da',
                color: submitStatus === 'success' ? '#155724' : '#721c24',
                border: `1px solid ${submitStatus === 'success' ? '#c3e6cb' : '#f5c6cb'}`
              }}>
                {submitStatus === 'success' 
                  ? 'Message sent successfully! We will get back to you soon.'
                  : 'Failed to send message. Please try again.'}
              </div>
            )}
            <form onSubmit={handleSubmit} className="form-contact" style={{ gap: "10px !important" }}>
              <fieldset style={{ marginBottom: "5px !important" }}>
                <label htmlFor="fullName" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
                  Full Name*
                </label>
                <input 
                  type="text" 
                  placeholder="Full Name" 
                  id="fullName" 
                  value={formData.fullName}
                  onChange={handleInputChange}
                  required 
                />
              </fieldset>
              <div className="grid-2 gap_24" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "5px !important", marginBottom: "5px !important" }}>
                <fieldset style={{ marginBottom: "0px !important" }}>
                  <label htmlFor="email" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
                    Email Address*
                  </label>
                  <input
                    type="email"
                    placeholder="Your email address*"
                    id="email"
                    value={formData.email}
                    onChange={handleInputChange}
                    required
                  />
                </fieldset>
                <fieldset style={{ marginBottom: "0px !important" }}>
                  <label htmlFor="phone" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
                    Phone Number
                    <span style={{ opacity: "0.6", color: "black" }}> (Optional)</span>
                  </label>
                  <input
                    type="text"
                    placeholder="Your phone number"
                    id="phone"
                    value={formData.phone}
                    onChange={handleInputChange}
                  />
                </fieldset>
              </div>
              <fieldset style={{ marginBottom: "5px !important" }}>
                <label htmlFor="message" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
                  Message
                </label>
                <textarea
                  className="message"
                  placeholder="Write your message here..."
                  id="message"
                  value={formData.message}
                  onChange={handleInputChange}
                />
              </fieldset>
              <button 
                type="submit" 
                className="tf-btn btn-primary2"
                disabled={isSubmitting}
                style={{
                  opacity: isSubmitting ? 0.7 : 1,
                  cursor: isSubmitting ? 'not-allowed' : 'pointer'
                }}
              >
                <span>{isSubmitting ? 'Sending...' : 'Send Message'}</span>
                <span className="bg-effect" />
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}