---
import ArticleList from '../components/ArticleList.astro';
import ProjectList from '../components/ProjectList.astro';
import TagList from '../components/TagList.astro';
import Base from '../layouts/Base.astro';
import {
  buildPersonJsonLd,
  getAllTags,
  getProjects,
  getPublishedPosts,
} from '../lib/site';

const LATEST_ARTICLES = 5;

const posts = await getPublishedPosts();
const latestPosts = posts.slice(0, LATEST_ARTICLES);
const projects = await getProjects();
const selectedProjects = projects.filter((project) => project.data.selected);
const tags = getAllTags(posts);

// Reference the canonical Person (defined on /about/) by @id.
const personJsonLd = buildPersonJsonLd();
---

<Base jsonLd={personJsonLd}>
  <section class="home-intro">
    <p class="eyebrow">
      Software systems, AI deployment, graphics, simulations, and tools
    </p>
    <h1>
      Andras Schmelczer writes about building software that has to work under real
      constraints.
    </h1>
    <p>
      I am a software engineer with an MSc in Computer Science. This site is mostly a
      notebook of technical articles and project writeups; the hiring details live on the
      <a href="/about/">About</a> page.
    </p>
  </section>

  <section class="home-section">
    <div class="section-heading">
      <h2 id="latest-articles">Latest Articles</h2>
      <a href="/articles/"
        >All {posts.length}
        {posts.length === 1 ? 'article' : 'articles'}
        <span aria-hidden="true">→</span></a
      >
    </div>
    <ArticleList posts={latestPosts} />
  </section>

  <section class="home-section">
    <div class="section-heading">
      <h2 id="home-selected-projects">Selected Projects</h2>
      <a href="/projects/">All projects <span aria-hidden="true">→</span></a>
    </div>
    <ProjectList projects={selectedProjects} />
  </section>

  <section class="home-section">
    <div class="section-heading">
      <h2 id="browse-by-topic">Browse by Topic</h2>
    </div>
    <div class="tag-cloud">
      <TagList tags={tags} />
    </div>
  </section>
</Base>