---
import BaseLayout from '../layouts/BaseLayout.astro';
import PostList from '../components/PostList.astro';
import { getCollection } from 'astro:content';
import { isEn } from '../lib/lang';
import { SITE } from '../config';
import { sortForListing } from '../lib/sort';

const posts = sortForListing(await getCollection('posts', isEn));

// Featured picks: fixed slugs, not "newest 4", so the front page stays stable after a
// publish and keeps answering "who is this and what has he actually run" (scale →
// automation → observability → a delivered business result). Falls back to the newest
// posts if a slug ever disappears.
const FEATURED_SLUGS = [
  'running-production-infrastructure-solo',
  'loop-engineering-without-a-coding-agent',
  'one-prometheus-for-unraid-synology-and-a-vps',
  'self-healing-digital-goods-entitlements',
];
const bySlug = new Map(posts.map((p) => [p.slug, p]));
const featured = FEATURED_SLUGS.map((s) => bySlug.get(s)).filter(Boolean);
const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
---

<BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
  <section class="hero">
    <div class="hero-id">
      <picture>
        <source srcset={SITE.photo.smallWebp} type="image/webp" />
        <img
          class="hero-photo"
          src={SITE.photo.small}
          alt={`${SITE.author} (${SITE.handle})`}
          width="72"
          height="72"
          decoding="async"
        />
      </picture>
      <h1>{SITE.author} — full-stack developer &amp; DevOps engineer</h1>
    </div>
    <p class="hero-sub">
      I run <strong>162 containers across three self-managed hosts</strong> — client sites, a
      mail platform, CI/CD, workflow automation and this blog — and I build web systems for
      Malaysian SMEs. I write up what broke, what the evidence said, and how I fixed it.
    </p>
    <p class="hero-cta">
      <a class="btn btn-primary" href="#featured">Read the engineering case studies ↓</a>
      <a class="btn" href="/about/">Hiring? Profile &amp; stack →</a>
      <a class="btn" href={SITE.website} target="_blank" rel="noopener">Malaysian SME? How I work ↗</a>
    </p>
    <p class="hero-note">
      {posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
    </p>
  </section>

  <section id="featured">
    <h2>Featured</h2>
    <div class="featured-grid">
      {featuredPosts.map((p) => (
        <a class="featured-card" href={`/posts/${p.slug}/`}>
          <h3>{p.data.title}</h3>
          <p>{p.data.description}</p>
        </a>
      ))}
    </div>
  </section>

  <section>
    <h2>Latest posts</h2>
    {posts.length === 0 ? (
      <p><em>No posts yet — check back soon.</em></p>
    ) : (
      <PostList posts={posts} limit={6} />
    )}
    <p class="archive-meta"><a href="/posts/">All {posts.length} posts</a> · <a href="/tags/docker/">tag pages</a></p>
  </section>
</BaseLayout>