"use client"; // Required for components in Next.js (using client-side rendering)
import Image from 'next/image';

const teamMembers = [
	{
		name: "Tim Howitz",
		title: "Chief Crack Inspector",
		description:
			"Tim is responsible for analysing structures on a day to day basis, in his home life he is a keen outdoors enthusiast, with 3 kids and a dog.",
		image: "/Timthescientist.PNG",
	},
	{
		name: "Emily Neighbour",
		title: "Chief Software Engineer",
		description:
			"Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching and becoming a mute",
		image: "/Emilythescientist.PNG",
	},
	{
		name: "Izzy Patterson",
		title: "Chief Geologist",
		description:
			"Izzy team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them",
		image: "/Izzythescientist.PNG",
	},
	{
		name: "Lukeshan Thananchayan",
		title: "Chief Duster",
		description:
			"Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure - he likes to play monopoly, on repeat... maybe one day hell get a hotel",
		image: "/Lukeshanthescientist.PNG",
	},
];

export default function Page() {
	return (
		<div className="h-full text-center bg-gradient-to-b from-neutral-100 to-neutral-50 pt-10">
			{/* Header */}
			<h1 className="text-4xl font-bold mb-5">Meet The Team</h1>
			<p className="text-lg text-neutral-600 mb-5">
				Our expert team is made up of scientists around the globe. Our heads of department are shown below.
			</p>

			{/* Team Members Section */}
			<div className="flex flex-col items-center gap-8">
				{teamMembers.map((member, index) => (
					<div key={index} className="flex bg-white align-middle rounded-2xl border border-neutral-300 w-1/2 shadow-sm">
						{/* Image */}
						<div className="flex items-center ml-4">
							<div className="relative w-24 h-24">
								<div className="absolute inset-0 rounded-full overflow-hidden">
									<Image height={5000} width={5000} src={member.image} alt={member.name} className="h-full w-full object-cover" />
								</div>
							</div>
						</div>

						{/* Text Content */}
						<div className="flex flex-col items-start pl-6 py-4">
							<h2 className="text-2xl font-bold">{member.name}</h2>
							<p className="text-md text-neutral-600 font-bold">{member.title}</p>
							<p className="text-neutral-600 mt-2 text-left">{member.description}</p>
						</div>
					</div>
				))}
			</div>
		</div>
	);
}
