---
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);

const featuredMetrics: Record<string, string> = {
  'running-production-infrastructure-solo': '3 Hosts · 162 Containers',
  'loop-engineering-without-a-coding-agent': '11 Cron Jobs · 8 Pure Loops',
  'one-prometheus-for-unraid-synology-and-a-vps': '3 Hosts · 1 Prometheus',
  'self-healing-digital-goods-entitlements': 'NocoDB + n8n + AList',
};
---

<BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
  <section class="hero">
    <div class="hero-intro">
      <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 build and operate production web systems — from the code down to the servers.
        <strong>162 containers across three self-managed hosts</strong> run client sites, a mail
        platform, CI/CD, workflow automation and this blog. I write up what broke, what the
        evidence said, and how I fixed it.
      </p>
      <div class="hero-pills" aria-label="Core tech stack">
        <span class="hero-pills-label">Stack:</span>
        <a class="tech-pill" href="/tags/docker/">Docker</a>
        <a class="tech-pill" href="/tags/self-hosting/">Self-Hosting</a>
        <a class="tech-pill" href="/tags/n8n/">n8n</a>
        <a class="tech-pill" href="/tags/ai/">Local GPU AI</a>
        <a class="tech-pill" href="/tags/python/">Python</a>
        <a class="tech-pill" href="/tags/php/">PHP</a>
        <a class="tech-pill" href="/tags/security/">Security</a>
      </div>
    </div>

    <div class="hero-visual">
      <button
        type="button"
        class="hero-banner-card"
        onclick="document.getElementById('arch-lightbox')?.showModal()"
        aria-label="View full architecture diagram"
      >
        <picture>
          <source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner-1280.webp 1280w, /images/hero-banner.webp 1024w" sizes="(max-width: 960px) 100vw, 560px" type="image/webp" />
          <img
            class="hero-banner-img"
            src="/images/hero-banner.jpg"
            alt="From Code to Production — engineer at a multi-monitor workstation, container streams flowing into server racks"
            width="1024"
            height="572"
            loading="eager"
            fetchpriority="high"
            decoding="async"
          />
        </picture>
        <span class="hero-banner-zoom-badge">🔍 View full architecture</span>
      </button>

      <div class="hero-infra-grid" aria-label="Infrastructure stats">
        <div class="infra-stat-card">
          <div class="infra-stat-val">162</div>
          <div class="infra-stat-label">Containers in Prod</div>
        </div>
        <div class="infra-stat-card">
          <div class="infra-stat-val">3 Hosts</div>
          <div class="infra-stat-label">Unraid · Synology · VPS</div>
        </div>
        <div class="infra-stat-card">
          <div class="infra-stat-val">78</div>
          <div class="infra-stat-label">Compose Stacks</div>
        </div>
        <div class="infra-stat-card">
          <div class="infra-stat-val">91</div>
          <div class="infra-stat-label">Bilingual Write-ups</div>
        </div>
      </div>
    </div>

    <div class="hero-actions">
      <div 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>
      </div>
      <p class="hero-note">
        {posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
      </p>
    </div>
  </section>

  <dialog id="arch-lightbox" class="arch-lightbox" onclick="if (event.target === this) this.close()">
    <div class="arch-lightbox-inner">
      <button type="button" class="arch-lightbox-close" aria-label="Close" onclick="this.closest('dialog').close()">&times;</button>
      <img
        src="/images/hero-banner-2x.webp"
        alt="From Code to Production — engineer at a multi-monitor workstation, container streams flowing into server racks"
        width="2048"
        height="1144"
        loading="lazy"
      />
      <div class="arch-lightbox-caption">
        <span>From Code to Production — Workstation to Server Racks</span>
        <span class="arch-lightbox-hint">ESC / Click outside to close</span>
      </div>
    </div>
  </dialog>

  <section id="featured">
    <h2>Featured</h2>
  <div class="featured-bento-grid">
    {featuredPosts.map((post, idx) => {
      const cleanSlug = post.slug.replace(/^zh\//, '');
      const metric = featuredMetrics[cleanSlug] ?? post.data.category;
      return (
        <a class={`bento-card bento-item-${idx + 1}`} href={`/posts/${post.slug}/`}>
          <div class="bento-visual" aria-hidden="true">
            <img
              src={`/og/thumb/${cleanSlug}-800.webp`}
              srcset={`/og/thumb/${cleanSlug}-400.webp 400w, /og/thumb/${cleanSlug}-800.webp 800w`}
              sizes="(max-width: 640px) 60vw, 341px"
              alt=""
              loading="lazy"
              decoding="async"
              width="400"
              height="210"
              onerror="this.style.display='none'"
            />
            <div class="bento-visual-scrim"></div>
          </div>
          <div class="bento-content">
            <div class="bento-top-meta">
              <span class="featured-badge">{post.data.category}</span>
              <span class="bento-metric-pill">
                <span class="pulse-dot"></span>
                {metric}
              </span>
            </div>
            <h3>{post.data.title}</h3>
            <p>{post.data.description}</p>
            <span class="bento-cta">Read case study →</span>
          </div>
        </a>
      );
    })}
  </div>
  </section>

  <section>
    <div class="section-head-with-nav">
      <h2>Latest posts</h2>
      <div class="section-nav-pills" aria-label="Category shortcuts">
        <a class="section-nav-pill" href="/categories/case-studies/">case-studies</a>
        <a class="section-nav-pill" href="/categories/devops/">devops</a>
        <a class="section-nav-pill" href="/categories/tutorials/">tutorials</a>
        <a class="section-nav-pill" href="/categories/notes/">notes</a>
        <a class="section-nav-pill section-nav-all" href="/posts/">All {posts.length} →</a>
      </div>
    </div>
    {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>