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

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

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

	const handleSubmit = (e: { preventDefault: () => void }) => {
		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-full relative text-white border border-black overflow-hidden">
			<Image
				height={5000}
				width={5000}
				alt="Logo"
				className="border border-neutral-300 absolute z-10 -top-20"
				src="/tsunamiWaves.jpg"
			/>

			{/* Overlay for readability */}
			<div className="absolute overflow-hidden w-full h-full bg-gradient-to-b from-black/80 via-black/40 to-black/20 flex flex-col items-center z-20">
				{/* Container */}
				<div className="max-w-4xl mx-auto p-5 mt-20">
					{/* Header */}
					<h1 className="text-4xl font-bold text-center text-neutral-50 mb-6">Contact Us</h1>
					<p className="text-lg text-center max-w-2xl text-neutral-200 mb-6">
						Have questions or concerns about earthquakes, observatories or artefacts? Contact us via phone, email, social media or
						using the form below with the relevant 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
										style={{ resize: "none" }}
									/>
								</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="w-[45%] bg-white bg-opacity-90 text-neutral-800 rounded-lg shadow-lg p-6">
							<h2 className="text-2xl font-bold text-neutral-800 mb-4">Get in Touch</h2>
							<div className="mb-4">
								<h3 className="text-neutral-700 font-bold font-large">Email</h3>
								<a href="Mail to:getintouch@tremortracker.com font-medium" style={{ color: "initial" }}>
									getintouch@tremortracker.com
								</a>
							</div>
							<div className="mb-4">
								<h3 className="text-neutral-700 font-bold font-large">Phone</h3>
								<p className="text-neutral-600 font-medium">+44 7538 359022</p>
							</div>
							<div className="mb-4">
								<h3 className="text-neutral-700 font-bold font-large">Address</h3>
								<p className="text-neutral-600 font-medium">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>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
};

export default ContactUs;