"use client";
import React, { useState } from "react";

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form submitted with data:", formData);
    // Handle form submission, like sending data to a server
    alert("Thank you for reaching out! We will get back to you soon.");
    setFormData({ name: "", email: "", message: "" }); // Clear form
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center py-10">
      <div className="max-w-4xl mx-auto p-5 bg-white shadow-md rounded-lg">
        <h1 className="text-3xl font-bold text-center text-gray-800 mb-6">
          Contact Us
        </h1>
        <p className="text-lg text-gray-600 text-center mb-6">
          Have questions or concerns about earthquake preparedness? Contact us
          using the form below or through the provided contact details.
        </p>
        
        {/* Flexbox Layout for Form and Contact Details */}
        <div className="flex flex-col md:flex-row">
          
          {/* Contact Form */}
          <div className="flex-1 mb-6 md:mb-0 md:mr-4">
            <form
              onSubmit={handleSubmit}
              className="bg-gray-50 p-6 rounded-lg shadow-lg"
            >
              <div className="mb-4">
                <label
                  htmlFor="name"
                  className="block text-gray-700 font-medium mb-2"
                >
                  Name
                </label>
                <input
                  type="text"
                  name="name"
                  id="name"
                  value={formData.name}
                  onChange={handleChange}
                  placeholder="Your Name"
                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  required
                />
              </div>

              <div className="mb-4">
                <label
                  htmlFor="email"
                  className="block text-gray-700 font-medium mb-2"
                >
                  Email
                </label>
                <input
                  type="email"
                  name="email"
                  id="email"
                  value={formData.email}
                  onChange={handleChange}
                  placeholder="Your Email"
                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  required
                />
              </div>

              <div className="mb-4">
                <label
                  htmlFor="message"
                  className="block text-gray-700 font-medium mb-2"
                >
                  Message
                </label>
                <textarea
                  name="message"
                  id="message"
                  value={formData.message}
                  onChange={handleChange}
                  rows="5"
                  placeholder="Your Message"
                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  required
                />
              </div>

              <button
                type="submit"
                className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-200"
              >
                Send Message
              </button>
            </form>
          </div>

          {/* Contact Details */}
          <div className="flex-1 bg-gray-50 p-6 rounded-lg shadow-lg">
            <h2 className="text-xl font-bold text-gray-800 mb-4">
              Get in Touch
            </h2>
            <div className="mb-4">
              <h3 className="text-gray-700 font-medium">Email</h3>
              <p className="text-gray-600">support@earthquakesafety.org</p>
            </div>
            <div className="mb-4">
              <h3 className="text-gray-700 font-medium">Phone</h3>
              <p className="text-gray-600">+1 800 123 4567</p>
            </div>
            <div className="mb-4">
              <h3 className="text-gray-700 font-medium">Address</h3>
              <p className="text-gray-600">
                123 Earthquake Ave, Prepared City, CA 98765
              </p>
            </div>

            <h2 className="text-xl font-bold text-gray-800 mb-4 mt-6">
              Follow Us
            </h2>
            <div className="flex space-x-4">
              <a
                href="#"
                className="text-blue-600 hover:text-blue-800 transition duration-200"
              >
                <span className="sr-only">Twitter</span>
                <svg
                  className="h-6 w-6"
                  fill="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M24 4.56a9.83 9.83..." />
                </svg>
              </a>
              <a
                href="#"
                className="text-blue-600 hover:text-blue-800 transition duration-200"
              >
                <span className="sr-only">Facebook</span>
                <svg
                  className="h-6 w-6"
                  fill="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M22.675 0h-21.35..." />
                </svg>
              </a>
              <a
                href="#"
                className="text-blue-600 hover:text-blue-800 transition duration-200"
              >
                <span className="sr-only">LinkedIn</span>
                <svg
                  className="h-6 w-6"
                  fill="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M22.23 0H1.77C0.8..." />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactUs;
