keystone/components/otherPages/Contact.jsx

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

export default function Contactother() {
  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();
    
    // Basic validation
    if (!formData.fullName || !formData.email) {
      alert('Please fill in all required fields');
      return;
    }

    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="page-title style-default -mb_11">
      <div className="section-contact style-default position-relative py-0">
        <div className="tf-container">
          <div className="row">
            <div className="col-lg-6">
              <div className="left">
                <div className="heading">
                  <h1 className="mb_21 text_primary">
                    Let's Start Building Solutions Together
                  </h1>
                  {/* <ul className="breadcrumb">
                    <li>
                      <Link href={`/`} className="link">
                        Home
                      </Link>
                    </li>
                    <li>Contact</li>
                  </ul> */}
                </div>
                <div className="bot">
                  <div className="content mb-0 ">
                    <h6 className="text_primary">+91 90954 50005</h6>
                    <p className="text-body-2 text_primary">
                      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
                className="form-contact"
                onSubmit={handleSubmit}
              >
                <fieldset>
                  <label className="mb_15" htmlFor="fullName">
                    Full Name*
                  </label>
                  <input
                    type="text"
                    placeholder="Full Name"
                    id="fullName"
                    value={formData.fullName}
                    onChange={handleInputChange}
                    required
                  />
                </fieldset>
                <div className="grid-2 gap_24">
                  <fieldset>
                    <label className="mb_15" htmlFor="email">
                      Email Address*
                    </label>
                    <input
                      type="email"
                      placeholder="Your email address*"
                      id="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      required
                    />
                  </fieldset>
                  <fieldset>
                    <label className="mb_15" htmlFor="phone">
                      Phone Number
                      <span className="text_mono-gray-5"> (Optional)</span>
                    </label>
                    <input
                      type="text"
                      placeholder="Your phone number"
                      id="phone"
                      value={formData.phone}
                      onChange={handleInputChange}
                    />
                  </fieldset>
                </div>
                <fieldset className="">
                  <label className="mb_15" htmlFor="message">
                    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 mt_22"
                  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 className="shape position-absolute">
          <Image
            alt="item"
            src="/images/item/shape-5.png"
            width={1105}
            height={720}
          />
        </div> */}
      </div>
    </div>
  );
}