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

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);
    alert("Thank you for reaching out! We will get back to you soon.");
    setFormData({ name: "", email: "", message: "" });
  };

  return (
    <div
      className="h-screen relative text-white py-10 border border-black">
       <Image height={5000} width={5000} alt="Logo" className="border border-neutral-300 absolute z-10" src="/tsunamiWaves.jpg"/>
    
      {/* Overlay for readability */}
      <div className="absolute overflow-hidden w-full h-full bg-black bg-opacity-40 flex flex-col items-center z-20">
        {/* Container */}
        <div className="max-w-4xl mx-auto p-5">
          {/* Header */}
          <h1 className="text-4xl font-bold text-center text-white mb-6">
            Contact Us
          </h1>
          <p className="text-lg text-center text-gray-300 mb-6">
            Have questions or concerns about earthquake preparedness? Contact us
            using the form below or through the provided contact details.
          </p>

          {/* Content Section */}
          <div className="flex flex-col md:flex-row gap-6">
            {/* Contact Form Section */}
            <div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
              <form onSubmit={handleSubmit}>
                <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 Section */}
            <div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
              <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">getintouch@tremortracker.org.uk</p>
              </div>
              <div className="mb-4">
                <h3 className="text-gray-700 font-medium">Phone</h3>
                <p className="text-gray-600">+44 7538 359022</p>
              </div>
              <div className="mb-4">
                <h3 className="text-gray-700 font-medium">Address</h3>
                <p className="text-gray-600">
                  1 Swentown Row, Greenwich, London, SE3 0FQ
                </p>
              </div>
              <h2 className="text-xl font-bold text-gray-800 mb-4 mt-6">
                Follow Us
              </h2>
              <div className="flex justify-around items-center">
                <a
                  href="#"
                  className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200"
                >
                  <span className="sr-only">Instagram</span>
                  <Image height={200} width={200} alt="Logo" className="z-10" src="/insta.webp"/>
                </a>
                <a
                  href="#"
                  className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200"
                >
                  <span className="sr-only">Facebook</span>
                  <Image height={200} width={200} alt="Logo" className="z-10" src="/facebook.webp"/>
                </a>
                <a
                  href="#"
                  className="w-20 h-20 p-4 text-blue-600 hover:text-blue-800 transition duration-200"
                >
                  <span className="sr-only">X</span>
                  <Image height={200} width={200} alt="Logo" className="z-10 rounded-lg" src="/x_logo.jpg"/>
                </a>
                <a
                  href="#"
                  className="w-20 h-20 flex items-center text-blue-600 hover:text-blue-800 transition duration-200"
                >
                  <span className="sr-only">LinkedIn</span>
                  <Image height={200} width={200} alt="Logo" className="z-10" src="/linkedIn.png"/>
                </a>
              <h3 className="text-l font-bold text-gray-500 mb-2 mt-4">
                @tremor.tracker
              </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactUs;