---
import Layout from "../layouts/Layout.astro";
import Hero from "../components/Hero.astro";
import CircuitDivider from "../components/CircuitDivider.astro";
import Section from "../components/Section.astro";
import About from "../components/About.astro";
import SkillGroup from "../components/SkillGroup.astro";
import ProjectCard from "../components/ProjectCard.astro";
import PostList from "../components/PostList.astro";
import Contact from "../components/Contact.astro";
import { skills } from "../data/skills";
import { getPosts, allTags } from "../lib/blog";
import { getCollection } from "astro:content";

const featuredProjects = (await getCollection("projects", (p) => p.data.featured)).sort(
  (a, b) => a.data.order - b.data.order,
);
const allPosts = await getPosts();
const recentPosts = allPosts.slice(0, 3);
const postTags = allTags(allPosts);
---

<Layout path="/">
  <Hero />

  <CircuitDivider />

  <Section id="about" eyebrow="About" index="01" title="Reliability you can reason about.">
    <About />
  </Section>

  <Section id="skills" eyebrow="Capabilities" index="02" title="What I work with, grouped by what it's for.">
    <div class="grid grid--skills">
      {skills.map((group) => <SkillGroup group={group} />)}
    </div>
  </Section>

  <Section id="projects" eyebrow="Selected work" index="03" title="Platforms built to keep working unattended.">
    <div class="grid grid--projects">
      {featuredProjects.map((entry, i) => <ProjectCard entry={entry} index={i + 1} />)}
    </div>
    <p class="projects__more" data-reveal>
      <a class="btn" href="/projects/">All projects →</a>
    </p>
  </Section>

  <Section id="writing" eyebrow="Writing" index="04" title="Notes from the build.">
    <p class="writing__intro" data-reveal>
      Lessons from edge Kubernetes, GPUs, and running infrastructure like it matters - 
      written up as I go.
    </p>
    {postTags.length > 0 && (
      <nav class="writing__tags" aria-label="Browse the blog by tag" data-reveal>
        <span class="mono writing__tags-label">tags:</span>
        {postTags.map((t) => (
          <a class="tag" href={`/blog/tags/${t}/`}>{t}</a>
        ))}
      </nav>
    )}
    <PostList posts={recentPosts} />
    <p class="projects__more" data-reveal>
      <a class="btn" href="/blog/">Read the blog →</a>
    </p>
  </Section>

  <Section id="contact" eyebrow="Get in touch" index="05" title="Let's talk infrastructure.">
    <Contact />
  </Section>
</Layout>

<style>
  .grid {
    display: grid;
    gap: var(--space-5);
  }
  /* capabilities bento: 4 columns, hero tile spans 2×2, min row height per the spec */
  .grid--skills {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(190px, auto);
    gap: 16px;
  }
  @media (max-width: 1000px) {
    .grid--skills {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 720px) {
    .grid--skills {
      grid-template-columns: 1fr;
    }
  }
  .grid--projects {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 20px;
  }
  .projects__more {
    margin-top: var(--space-6);
    text-align: center;
  }
  .writing__intro {
    max-width: 52ch;
    margin-bottom: var(--space-4);
    color: var(--text-dim);
  }
  .writing__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-6);
  }
  .writing__tags-label {
    font-size: var(--step--1);
    color: var(--text-faint);
  }
</style>