"use client"
import React, { useState, useEffect } from "react";
import Link from 'next/link';
import Photo from '../components/Photo';

export default function Events() {
    return (
        <main>
            <div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4">
                <div className="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col max-lg:justify-center">
                    <div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
                        <h2 className="text-5xl font-bold mt-2">Events</h2> 
                        <p className="text-base mt-4">
                            I&apos;ve been to several developer / tech-related events during the past couple of years - here are some of them! 
                        </p>
                    </div>
                </div>

                <div>
                    <div>
                        <h2 className="text-4xl font-bold my-2">FOSSASIA 2024</h2> 
                        <p className="text-base">
                            The first time FOSSASIA is held in Siam!
                        </p>
                    </div>
                    
                    <div className="grid grid-cols-6 gap-4 max-lg:flex max-lg:flex-col my-4">
                        <div className="col-span-6">
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <div className="grid gap-4 content-center">
                                    <div>
                                        <Photo src="/images/photos/events/fossasia/me-and-p-mishari.jpg" alt="Me and @mishari"></Photo>
                                    </div>
                                </div>
                                <div className="grid gap-4 content-center">
                                    <div>
                                        <Photo src="/images/photos/events/fossasia/crazy-ahh.jpg" alt="Me looking flabbergasted"></Photo>
                                    </div>
                                </div>
                                <div className="grid gap-4 content-center">
                                    <div>
                                        <Photo src="/images/photos/events/fossasia/nbtc.jpg" alt="A.I. submit poster"></Photo>
                                    </div>
                                    <div>
                                        <Photo src="/images/photos/events/fossasia/nextcloud-and-debian.png" alt="Nextcloud & Debian poster"></Photo>
                                    </div>
                                </div>      
                            </div>
                        </div>
                    </div>
                </div>  

                <div>
                    <div>
                        <h2 className="text-4xl font-bold my-2">A.I. Innovation & Engineering Summit</h2> 
                        <p className="text-base">
                            Thanks to my university&apos;s curriculum being around project-based learning, I get to work on my 1st year <span className="font-bold underline decoration-2 decoration-sky-500">Undergraduate Research & Development</span> project called &quot;Med-D&quot; in which, I also had to present it at 
                            the 2024 A.I. Innovation & Engineering Summit.
                        </p>
                    </div>
                    
                    <div className="grid grid-cols-6 gap-4 max-lg:flex max-lg:flex-col my-4">
                        <div className="col-span-6">
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <div className="grid gap-4 content-center">
                                    <div>
                                        <Photo src="/images/photos/cmkl/ai-engineering-2024/me.jpg" alt="That's me!"></Photo>
                                    </div>
                                </div>
                                <div className="grid gap-4 content-center">
                                    <div>
                                        <Photo src="/images/photos/cmkl/ai-engineering-2024/poster.jpg" alt="A.I. submit poster"></Photo>
                                    </div>
                                </div>
                                <div className="grid gap-4 content-center">
                                    <div>
                                        <Photo src="/images/photos/cmkl/ai-engineering-2024/me-and-friend.jpg" alt="Me with P' Ae!"></Photo>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  

            <div>
                <div>
                    <div>
                        <h2 className="text-4xl font-bold my-2">&quot;A.I. Made Easy&quot; - Dell & AMD</h2> 
                        <p className="text-base">
                            On April 25th, Me and my team had the opportunity to present our work at the <span className="font-bold underline decoration-2 decoration-sky-500">A.I. Made Easy</span> event; organized by Dell Technologies & Advaned Micro Devices (AMD) Inc. 
                        </p>
                    </div>

                        <div className="col-span-6">
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 my-4">
                                <div className="grid gap-4 content-center">
                                    <div>
                                        <Photo src="/images/photos/cmkl/dell-event/med-d-team.jpg" alt="My team!"></Photo>
                                    </div>
                                    <div>
                                        <Photo src="/images/photos/cmkl/dell-event/med-d-photo.jpg" alt="Discussion..."></Photo>
                                    </div>
                                </div>
                                <div className="grid gap-4 content-center">
                                    <div>
                                        <Photo src="/images/photos/cmkl/dell-event/me.jpg" alt="My photo"></Photo>
                                    </div>
                                </div>
                                <div className="grid gap-4 content-center">
                                    <div>
                                        <Photo src="/images/photos/cmkl/dell-event/team.jpg" alt="CMKL Team"></Photo>
                                    </div>
                                    <div>
                                        <Photo src="/images/photos/cmkl/dell-event/server.jpg" alt="Dell PowerEdge"></Photo>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
}
