import Image from "next/image";
import Link from "next/link";

export default function Home() {
	return (
		<main className="min-h-screen text-black">
			<div className="w-full relative overflow-hidden">
				<div className="">
					<Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg"></Image>
				</div>
				<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>
				<div className="absolute inset-0 top-[30%]">
					<Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png"></Image>
				</div>
			</div>
			<p className="mt-2"></p>
			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
				<Link
					href="/earthquakes"
					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="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
					<h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
					<p className="text-md text-black text-center max-w-xs opacity-90">
						Log new earthquakes with their required details or search past seismic events
					</p>
				</Link>
				<Link
					href="/observatories"
					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="/observatory.jpg" alt="Research Icon" className="h-40 w-40 mb-4" />
					<h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
					<p className="text-md text-black text-center max-w-xs opacity-90">
						Find recently active observatories, and newly opened/closed sites
					</p>
				</Link>
				<Link
					href="/shop"
					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="/artefactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
					<h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
					<p className="text-md text-black text-center max-w-xs opacity-90">
						View or purchase recently discovered artefacts from seismic events
					</p>
				</Link>
			</div>
			<p className="mt-18"></p>
			<section className="min-h-screen text-black">
				<div className="w-full relative overflow-hidden z-40">
					<div className="">
						<Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg"></Image>
					</div>
					<div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
						<section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
							<h1 className="text-4xl md:text-5xl font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
								Welcome to Tremor Tracker
							</h1>
							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
								TremorTracker empowers communities with real-time earthquake monitoring, and the latest research. Our mission is
								to make seismic safety and scientific insight accessible to everyone—anywhere on the planet.
							</p>
							<p className="mt-20"></p>
							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
							<p className="mt-20"></p>
							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
								How do we log earthquakes?
							</p>
							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
								What information are we interested in?
							</p>
							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
							<p className="mt-20"></p>
							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
								What are observatories?
							</p>
							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is their role?</p>
							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
						</section>
					</div>
				</div>
			</section>
			<p className="mt-20"></p>
			<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
				<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Recent Earthquake Events</h1>
				<p className="text-lg md:text-xl text-black drop-shadow-md">
					Learn about the most recent earthquake events from around the world:
				</p>
			</section>
			<p className="mt-6"></p>
			<div className="mx-auto w-5/6 px-2 border border-black divide-y bg-white bg-opacity-90 rounded-xl shadow-md">
				{["Earthquake 1", "Earthquake 2", "Earthquake 3", "Earthquake 4", "Earthquake 5"].map((name) => (
					<div className="px-5 py-5" key={name}>
						<p className="ml-3">{name}</p>
						<p></p>
					</div>
				))}
			</div>
			<p className="mt-20"></p>
			<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
				<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Contact Information</h1>
				<p className="text-lg md:text-xl text-black drop-shadow-md">
					Learn about Tremor Tracker's mission, our team or contact us directly:
				</p>
			</section>
			<p className="mt-2"></p>
			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
				<Link
					href="/contact-us"
					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="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
					<h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
					<p className="text-md text-black text-center max-w-xs opacity-90">
						Visit our socials or leave us a message via phone or email.
					</p>
				</Link>
				<Link
					href="/our-mission"
					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="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
					<h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
					<p className="text-md text-black text-center max-w-xs opacity-90">
						Find out more about our purpose and the features we offer.
					</p>
				</Link>
				<Link
					href="/the-team"
					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="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
					<h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
					<p className="text-md text-black text-center max-w-xs opacity-90">
						Learn about our team leads and their responsibilities.
					</p>
				</Link>
			</div>
			<p className="mt-10"></p>
			<section style={{ height: 500, overflow: "hidden" }} className="text-black">
				<div className="w-full relative overflow-hidden z=10">
					<div className="">
						<Image height={1000} width={2000} alt="Background Image" src="/scientists.png"></Image>
					</div>
				</div>
			</section>
		</main>
	);

	//   return (
	//     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
	//       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
	//         <Image
	//           className="dark:invert"
	//           src="/next.svg"
	//           alt="Next.js logo"
	//           width={180}
	//           height={38}
	//           priority
	//         />
	//         <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
	//           <li className="mb-2">
	//             Get started by editing{" "}
	//             <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
	//               src/app/page.tsx
	//             </code>
	//             .
	//           </li>
	//           <li>Save and see your changes instantly.</li>
	//         </ol>

	//         <div className="flex gap-4 items-center flex-col sm:flex-row">
	//           <a
	//             className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
	//             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
	//             target="_blank"
	//             rel="noopener noreferrer"
	//           >
	//             <Image
	//               className="dark:invert"
	//               src="/vercel.svg"
	//               alt="Vercel logomark"
	//               width={20}
	//               height={20}
	//             />
	//             Deploy now
	//           </a>
	//           <a
	//             className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
	//             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
	//             target="_blank"
	//             rel="noopener noreferrer"
	//           >
	//             Read our docs
	//           </a>
	//         </div>
	//       </main>
	//       <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
	//         <a
	//           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
	//           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
	//           target="_blank"
	//           rel="noopener noreferrer"
	//         >
	//           <Image
	//             aria-hidden
	//             src="/file.svg"
	//             alt="File icon"
	//             width={16}
	//             height={16}
	//           />
	//           Learn
	//         </a>
	//         <a
	//           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
	//           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
	//           target="_blank"
	//           rel="noopener noreferrer"
	//         >
	//           <Image
	//             aria-hidden
	//             src="/window.svg"
	//             alt="Window icon"
	//             width={16}
	//             height={16}
	//           />
	//           Examples
	//         </a>
	//         <a
	//           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
	//           href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
	//           target="_blank"
	//           rel="noopener noreferrer"
	//         >
	//           <Image
	//             aria-hidden
	//             src="/globe.svg"
	//             alt="Globe icon"
	//             width={16}
	//             height={16}
	//           />
	//           Go to nextjs.org →
	//         </a>
	//       </footer>
	//     </div>
	//   );
}