1  import React, { useState } from "react";
 2  import "./Contact.css";
 3  
 4  const Contact = () => {
 5    const [formData, setFormData] = useState({
 6      name: "",
 7      email: "",
 8      message: "",
 9      honeypot: "", // Honeypot field
10    });
11  
12    const handleChange = (e) => {
13      setFormData({
14        ...formData,
15        [e.target.name]: e.target.value,
16      });
17    };
18  
19    const handleSubmit = (e) => {
20      e.preventDefault();
21  
22      // If honeypot field is filled, it's likely a bot
23      if (formData.honeypot) {
24        console.log("Spam bot detected!");
25        return; // Prevent form submission
26      }
27  
28      console.log("Form submitted:", formData);
29      setFormData({ name: "", email: "", message: "", honeypot: "" });
30    };
31  
32    return (
33      <div className="contact-container">
34        <h2>Contact Us</h2>
35        <p className="contact-message">
36          We at Coders Aid Fund value your input and look forward to hearing from
37          you.
38        </p>
39        <form className="contact-form" onSubmit={handleSubmit}>
40          <div className="form-group">
41            <label htmlFor="name">Name:</label>
42            <input
43              type="text"
44              id="name"
45              name="name"
46              value={formData.name}
47              onChange={handleChange}
48              required
49            />
50          </div>
51          <div className="form-group">
52            <label htmlFor="email">Email:</label>
53            <input
54              type="email"
55              id="email"
56              name="email"
57              value={formData.email}
58              onChange={handleChange}
59              required
60            />
61          </div>
62          <div className="form-group">
63            <label htmlFor="message">Message:</label>
64            <textarea
65              id="message"
66              name="message"
67              value={formData.message}
68              onChange={handleChange}
69              required
70            ></textarea>
71          </div>
72          {/* Honeypot field (hidden from users) */}
73          <div className="form-group honeypot-field">
74            <label htmlFor="honeypot">Leave this field empty:</label>
75            <input
76              type="text"
77              id="honeypot"
78              name="honeypot"
79              value={formData.honeypot}
80              onChange={handleChange}
81            />
82          </div>
83          <button type="submit" className="submit-button">
84            Send Message
85          </button>
86        </form>
87      </div>
88    );
89  };
90  
91  export default Contact;