---
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';

const base = import.meta.env.BASE_URL;
const posts = await getCollection('blog');

// Sort by filename (which is chronologically ordered by the number prefix)
posts.sort((a, b) => b.id.localeCompare(a.id));

function extractTitle(id: string): string {
  return id
    .replace(/^\d+[a-z]?-/, '')
    .replace(/-/g, ' ')
    .replace(/\b\w/g, (c) => c.toUpperCase());
}
---

<BaseLayout title="Blog">
  <Header />
  <main class="max-w-4xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
    <h1 class="text-4xl font-bold text-surface-900 dark:text-white mb-2">Blog</h1>
    <p class="text-lg text-surface-600 dark:text-surface-400 mb-10">Stories from the Squad development journey — releases, learnings, and the road ahead.</p>

    <div class="space-y-6">
      {posts.map((post) => (
        <a
          href={`${base}blog/${post.id}/`}
          class="group block p-6 rounded-xl border border-surface-200 dark:border-surface-800 hover:border-squad-400 dark:hover:border-squad-700 hover:shadow-lg hover:shadow-squad-100/50 dark:hover:shadow-squad-900/20 transition-all duration-200"
        >
          <h2 class="text-xl font-semibold text-surface-900 dark:text-white group-hover:text-squad-600 dark:group-hover:text-squad-400 transition-colors mb-2">
            {post.data.title || extractTitle(post.id)}
          </h2>
          {post.data.description && (
            <p class="text-surface-600 dark:text-surface-400 text-sm">{post.data.description}</p>
          )}
          <span class="inline-flex items-center gap-1 text-sm text-squad-600 dark:text-squad-400 mt-3 font-medium">
            Read more
            <svg class="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </span>
        </a>
      ))}
    </div>
  </main>
  <Footer />
</BaseLayout>
