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

const OurMission = () => {
    return (
        <div
            className="min-h-screen relative bg-fixed bg-cover bg-center text-white"
            style={{ backgroundImage: "url('destruction.jpg')" }}
        >
            {/* Overlay for Readability */}
            <div className="absolute inset-0 bg-black bg-opacity-50"></div>
            {/* Centered content */}
            <div className="relative z-20 flex flex-col items-center justify-center min-h-screen">
                {/* Title & Mission Statement */}
                <div className="mb-10 flex flex-col items-center">
                    <h1 className="text-4xl font-bold text-center tracking-tight mb-2 drop-shadow-lg">
                        Our Mission
                    </h1>
                    <p className="text-lg text-center max-w-2xl text-white drop-shadow-md">
                        Earthquake awareness accessible for everyone
                    </p>
                </div>
                {/* Content Area */}
                <div className="max-w-5xl w-full p-8 bg-white bg-opacity-90 shadow-xl rounded-3xl">
                    <p className="text-xl text-black leading-relaxed mb-6 max-w-3xl mx-auto">
                        At <span className="font-bold text-black">Tremor Tracker</span>, we empower communities worldwide to understand where and why earthquakes occur to enable better preparation
                        and recovery. Education, cutting-edge research, and innovative technology combine together.
                    </p>
                    <p className="text-xl text-black leading-relaxed mb-8 max-w-3xl mx-auto">
                        We combine scientific insights with public awareness, delivering resources, tools, and real-time updates to enhance
                        preparedness for earthquakes in order to save lives, improve recovery efficiency, 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-white hover:bg-opacity-10 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-black mb-2">Education</h3>
                            <p className="text-sm text-black text-center max-w-xs opacity-90">
                                Delivering accessible resources to educate communities on earthquakes.
                            </p>
                        </div>
                        <div className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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-black mb-2">Research</h3>
                            <p className="text-sm text-black text-center max-w-xs opacity-90">
                                Advancing scientific studies to deepen understanding of seismic activity.
                            </p>
                        </div>
                        <div className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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-black mb-2">Technology</h3>
                            <p className="text-sm text-black text-center max-w-xs opacity-90">
                                Harnessing innovation for real-time alerts and safety solutions.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
export default OurMission;