import Image from "next/image";
import Link from "next/link";
import { getAllPosts } from "@/lib/mdx";
import profileImage from "@/public/profile.jpeg";

export default function Home() {
  const posts = getAllPosts();
  const latestPost = posts[0];
  const latestPostHref = latestPost ? `/blog/${latestPost.slug}` : "/blog";

  return (
    <div className="page-frame py-16 sm:py-20">
      <section className="mx-auto grid min-h-[calc(100vh-11rem)] max-w-[64rem] gap-6 lg:grid-cols-[minmax(0,39rem)_15rem] lg:items-center lg:gap-4">
        <div className="max-w-[39rem] space-y-6">
          <p className="eyebrow">Akshay Kolli / Research + Writing</p>

          <div className="space-y-4">
            <h1 className="max-w-[34rem] text-balance font-sans text-[clamp(3.15rem,6vw,5.2rem)] font-medium leading-[0.94] tracking-[-0.085em] text-ink">
              World models and reinforcement learning.
            </h1>

            <div className="max-w-[32rem] space-y-3 text-[1.04rem] leading-8 text-ink-soft sm:text-[1.1rem]">
              <p>
                I&apos;m a CS PhD student at UMass Lowell building world models for autonomous agents.
              </p>
            </div>
          </div>

          <div className="flex flex-wrap gap-x-6 gap-y-3 text-[0.96rem] text-ink">
            <Link href={latestPostHref} className="transition-colors hover:text-accent">
              Latest essay
            </Link>
            <Link href="/blog" className="transition-colors hover:text-accent">
              Writing
            </Link>
            <Link href="/resume" className="transition-colors hover:text-accent">
              Resume
            </Link>
            <a href="mailto:akshaykolli@hotmail.com" className="transition-colors hover:text-accent">
              Email
            </a>
          </div>
        </div>

        <aside className="w-full max-w-[12rem] lg:max-w-[15rem] lg:justify-self-start">
          <div className="relative aspect-square overflow-hidden rounded-full border border-line bg-paper-strong">
            <Image
              src={profileImage}
              alt="Akshay Kolli"
              fill
              priority
              className="object-cover object-center"
            />
          </div>
        </aside>
      </section>
    </div>
  );
}