"use client";
import Image from "next/image";

const OurMission = () => {
	return (
		<div
			className="min-h-screen relative bg-fixed bg-cover bg-center text-white py-28 px-4"
			style={{ backgroundImage: "url('destruction.jpg')" }}
		>
			{/* Overlay for Readability */}
			<div className="absolute inset-0 bg-black bg-opacity-50"></div>

			{/* Content Area */}
			<div className="relative z-10 max-w-5xl mx-auto p-8 bg-white bg-opacity-95 shadow-xl rounded-3xl">
				<h1 className="text-4xl font-extrabold text-center text-neutral-800 mb-8 tracking-tight">Our Mission</h1>
				<p className="text-xl text-neutral-600 leading-relaxed mb-6 max-w-3xl mx-auto">
					At <span className="font-semibold text-blue-600">Tremor Tracker</span>, we empower communities worldwide to prepare for
					and recover from earthquakes through education, cutting-edge research, and innovative technology.
				</p>
				<p className="text-xl text-neutral-600 leading-relaxed mb-8 max-w-3xl mx-auto">
					We bridge scientific insights with public awareness, delivering resources, tools, and real-time updates to enhance
					preparedness, save lives, and build resilience against seismic events.
				</p>
				<div className="flex flex-col md:flex-row md:justify-evenly gap-8 mt-8">
					<div className="flex flex-col items-center p-6 hover:bg-neutral-50 rounded-xl transition-colors duration-300">
						<Image height={100} width={100} src="/education.png" alt="Education Icon" className="h-20 w-20 mb-4" />
						<h3 className="text-xl font-bold text-neutral-700 mb-2">Education</h3>
						<p className="text-sm text-neutral-500 text-center max-w-xs">
							Delivering accessible resources to educate communities on earthquake preparedness.
						</p>
					</div>
					<div className="flex flex-col items-center p-6 hover:bg-neutral-50 rounded-xl transition-colors duration-300">
						<Image height={100} width={100} src="/research.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
						<h3 className="text-xl font-bold text-neutral-700 mb-2">Research</h3>
						<p className="text-sm text-neutral-500 text-center max-w-xs">
							Advancing scientific studies to deepen understanding of seismic activity.
						</p>
					</div>
					<div className="flex flex-col items-center p-6 hover:bg-neutral-50 rounded-xl transition-colors duration-300">
						<Image height={100} width={100} src="/tech.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
						<h3 className="text-xl font-bold text-neutral-700 mb-2">Technology</h3>
						<p className="text-sm text-neutral-500 text-center max-w-xs">
							Harnessing innovation for real-time alerts and safety solutions.
						</p>
					</div>
				</div>
			</div>
		</div>
	);
};

export default OurMission;