"use client";

const OurMission = () => {
	return (
		<div
			className="h-screen relative bg-fixed bg-cover bg-center text-white py-10"
			style={{ backgroundImage: "url('destruction.jpg')" }}
		>
			{/* Overlay to Improve Text Readability */}
			<div className="absolute inset-0 bg-black bg-opacity-40"></div>

			{/* Content Area */}
			<div className="relative z-10 max-w-4xl mx-auto p-5 bg-white bg-opacity-90 shadow-lg rounded-lg">
				<h1 className="text-3xl font-bold text-center text-gray-800 mb-6">Our Mission</h1>
				<p className="text-lg text-gray-600 leading-relaxed mb-4">
					At <span className="font-semibold text-blue-600">Earthquake Awareness Initiative</span>, our mission is to help people
					worldwide prepare for and recover from earthquakes. Through education, research, and innovative technology, we work
					tirelessly to empower communities with the knowledge they need to stay safe before, during, and after seismic events.
				</p>
				<p className="text-lg text-gray-600 leading-relaxed mb-4">
					We aim to bridge the gap between scientific research and community awareness by providing resources, tools, and
					real-time updates for earthquake preparedness. Together, we aspire to save lives, mitigate impacts, and foster
					resilience against nature's powerful forces.
				</p>
				<div className="flex flex-col md:flex-row md:justify-evenly items-center mt-6">
					<div className="flex flex-col items-center p-10">
						<img src="education.png" alt="Education Icon" className="h-20 w-20 mb-8" />
						<h3 className="text-xl font-bold text-gray-700 mb-2">Education</h3>
						<p className="text-sm text-gray-500 text-center">
							Providing accessible resources to educate people about earthquake preparedness.
						</p>
					</div>
					<div className="flex flex-col items-center p-10">
						<img src="research.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
						<h3 className="text-xl font-bold text-gray-700 mb-2">Research</h3>
						<p className="text-sm text-gray-500 text-center">
							Supporting scientific studies to enhance understanding of seismic activity.
						</p>
					</div>
					<div className="flex flex-col items-center p-10">
						<img src="tech.jpg" alt="Technology Icon" className="h-20 w-20 mb-8" />
						<h3 className="text-xl font-bold text-gray-700 mb-2">Technology</h3>
						<p className="text-sm text-gray-500 text-center">
							Leveraging innovation to deliver real-time alerts and safety tools.
						</p>
					</div>
				</div>
			</div>
		</div>
	);
	return (
		<div className="min-h-screen bg-neutral-100 flex flex-col items-center justify-center py-10">
			<div className="max-w-4xl mx-auto p-5 bg-white shadow-lg rounded-lg">
				<h1 className="text-3xl font-bold text-center text-neutral-800 mb-6">Our Mission</h1>
				<p className="text-lg text-neutral-600 leading-relaxed mb-4">
					At <span className="font-semibold text-blue-600">Earthquake Awareness Initiative</span>, our mission is to help people
					worldwide prepare for and recover from earthquakes. Through education, research, and innovative technology, we work
					tirelessly to empower communities with the knowledge they need to stay safe before, during, and after seismic events.
				</p>
				<p className="text-lg text-neutral-600 leading-relaxed mb-4">
					We aim to bridge the gap between scientific research and community awareness by providing resources, tools, and
					real-time updates for earthquake preparedness. Together, we aspire to save lives, mitigate impacts, and foster
					resilience against nature's powerful forces.
				</p>
				<div className="flex flex-col md:flex-row md:justify-evenly items-center mt-6">
					<div className="flex flex-col items-center p-4">
						<img src="/images/education-icon.png" alt="Education Icon" className="h-16 w-16 mb-4" />
						<h3 className="text-xl font-bold text-neutral-700 mb-2">Education</h3>
						<p className="text-sm text-neutral-500 text-center">
							Providing accessible resources to educate people about earthquake preparedness.
						</p>
					</div>
					<div className="flex flex-col items-center p-4">
						<img src="/images/research-icon.png" alt="Research Icon" className="h-16 w-16 mb-4" />
						<h3 className="text-xl font-bold text-neutral-700 mb-2">Research</h3>
						<p className="text-sm text-neutral-500 text-center">
							Supporting scientific studies to enhance understanding of seismic activity.
						</p>
					</div>
					<div className="flex flex-col items-center p-4">
						<img src="/images/technology-icon.png" alt="Technology Icon" className="h-16 w-16 mb-4" />
						<h3 className="text-xl font-bold text-neutral-700 mb-2">Technology</h3>
						<p className="text-sm text-neutral-500 text-center">
							Leveraging innovation to deliver real-time alerts and safety tools.
						</p>
					</div>
				</div>
			</div>
		</div>
	);
};

export default OurMission;