"use client"; // Required for components in Next.js (using client-side rendering)
import styles from './page.module.css';

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={styles.container}>
            {/* Header */}
            <h1 className={styles.header}>Meet The Team</h1>
            <p className={styles.subheader}>
                Our expert team is made up of scientists around the globe. Our heads of department are shown below.
            </p>

            {/* Team Members Section */}
            <div className={styles.team}>
                {teamMembers.map((member, index) => (
                    <div key={index} className={styles.card}>
                        {/* Image */}
                        <img src={member.image} alt={member.name} className={styles.image} />
                        
                        {/* Text Content */}
                        <div className={styles.text}>
                            <h2 className={styles.name}>{member.name}</h2>
                            <p className={styles.title}>{member.title}</p>
                            <p className={styles.description}>{member.description}</p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}