"use client";
import Image from "next/image";
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);
		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-neutral-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-neutral-800 rounded-lg shadow-lg p-6">
							<form onSubmit={handleSubmit}>
								<div className="mb-4">
									<label htmlFor="name" className="block text-neutral-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-neutral-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-neutral-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-neutral-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-neutral-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-neutral-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-neutral-800 rounded-lg shadow-lg p-6">
							<h2 className="text-xl font-bold text-neutral-800 mb-4">Get in Touch</h2>
							<div className="mb-4">
								<h3 className="text-neutral-700 font-medium">Email</h3>
								<p className="text-neutral-600">getintouch@tremortracker.org.uk</p>
							</div>
							<div className="mb-4">
								<h3 className="text-neutral-700 font-medium">Phone</h3>
								<p className="text-neutral-600">+44 7538 359022</p>
							</div>
							<div className="mb-4">
								<h3 className="text-neutral-700 font-medium">Address</h3>
								<p className="text-neutral-600">1 Swentown Row, Greenwich, London, SE3 0FQ</p>
							</div>
							<h2 className="text-xl font-bold text-neutral-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;