---
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import { SITE, HOME, SOCIALS } from "@consts";
import ArrowCard from "@components/ArrowCard.astro";
import Link from "@components/Link.astro";
import { getCollection } from "astro:content";
import type { CollectionEntry } from "astro:content";

const blog = (await getCollection("blog"))
  .filter((post) => !post.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  .slice(0, SITE.NUM_POSTS_ON_HOMEPAGE);

const projects: CollectionEntry<"projects">[] = (
  await getCollection("projects")
)
  .filter((project) => !project.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  .slice(0, SITE.NUM_PROJECTS_ON_HOMEPAGE);
---

<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
  <Container>
    <aside data-pagefind-ignore>
      <h1 class="font-heading font-extralight text-black dark:text-white">
        👋
      </h1>
      <div class="space-y-16">
        <section>
          <article class="space-y-4">
            <p>
              I am Neeldhara, a faculty member with the Computer Science and Engineering Department at <Link href="https://iitgn.ac.in">IIT Gandhinagar</Link>. This page is mostly a stream of consciousness braindump so I can reduce spamming my friends individually!
            </p>
          </article>
        </section>

        <section class="animate space-y-6">
          <div class="flex flex-wrap items-center justify-between gap-y-2">
            <h2 class="font-heading font-extralight text-black dark:text-white">
              Latest posts
            </h2>
            <Link href="/blog"> See all posts </Link>
          </div>
          <ul class="not-prose flex flex-col gap-4">
            {
              blog.map((post) => (
                <li>
                  <ArrowCard entry={post} />
                </li>
              ))
            }
          </ul>
        </section>

        <section class="animate space-y-6">
          <div class="flex flex-wrap items-center justify-between gap-y-2">
            <h2 class="font-heading font-extralight text-black dark:text-white">
              Recent projects
            </h2>
            <Link href="/projects"> See all projects </Link>
          </div>
          <ul class="not-prose flex flex-col gap-4">
            {
              projects.map((project) => (
                <li>
                  <ArrowCard entry={project} />
                </li>
              ))
            }
          </ul>
        </section>

        <section class="animate space-y-4">
          <h2 class="font-heading font-extralight text-black dark:text-white">
            Let's Connect
          </h2>
          <article>
            <p>
              If you want to get in touch with me about something or just to say
              hi, reach out on social media or send me an email.
            </p>
          </article>
          <ul class="not-prose flex flex-wrap gap-2">
            {
              SOCIALS.map((SOCIAL) => (
                <li class="flex gap-x-2 text-nowrap">
                  <Link
                    href={SOCIAL.HREF}
                    external
                    aria-label={`${SITE.TITLE} on ${SOCIAL.NAME}`}
                  >
                    {SOCIAL.NAME}
                  </Link>
                  {"/"}
                </li>
              ))
            }
            <li class="line-clamp-1">
              <Link
                href={`mailto:${SITE.EMAIL}`}
                aria-label={`Email ${SITE.TITLE}`}
              >
                {SITE.EMAIL}
              </Link>
            </li>
          </ul>
        </section>
      </div>
    </aside>
  </Container>
</Layout>
