---
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogHeader from '../../components/BlogHeader.astro';
import SiteFooter from '../../components/SiteFooter.astro';
import '../../styles/blog.css';

const posts = (await getCollection('blog', ({ data }) => !data.draft))
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
const formatDate = (date: Date) => new Intl.DateTimeFormat('th-TH', { day: 'numeric', month: 'long', year: 'numeric' }).format(date);
---

<BaseLayout title="บทความ | MoreminiMore" description="บทความเรื่อง AI, SEO, การตลาด และระบบดิจิทัลที่ช่วยให้ธุรกิจตัดสินใจจากข้อมูลจริง">
  <BlogHeader current="blog" />
  <main id="content" class="blog-index">
    <header class="blog-index-hero">
      <p class="blog-eyebrow">INSIGHTS / BLOG</p>
      <h1>บทความสำหรับคนที่อยาก<br /><em>ตัดสินใจให้ทันโลก</em></h1>
      <p>สรุปเรื่อง AI, SEO, การตลาด และระบบดิจิทัลให้เห็นทั้งโอกาส ความเสี่ยง และสิ่งที่นำไปทำต่อได้จริง</p>
    </header>
    <section class="blog-grid" aria-label="บทความทั้งหมด">
      {posts.map((post) => <article class="blog-card">
        <a class="blog-card-image" href={`/blog/${post.id}/`} tabindex="-1" aria-hidden="true"><img src={post.data.heroImage} alt="" width="1200" height="630" loading="lazy" decoding="async" /></a>
        <div class="blog-card-copy">
          <div class="blog-card-meta"><span>{post.data.category}</span><time datetime={post.data.pubDate.toISOString()}>{formatDate(post.data.pubDate)}</time></div>
          <h2><a href={`/blog/${post.id}/`}>{post.data.title}</a></h2>
          <p>{post.data.description}</p>
          <a class="blog-read" href={`/blog/${post.id}/`} aria-label={`อ่านบทความ ${post.data.title}`}>อ่านต่อ <span aria-hidden="true">↗</span></a>
        </div>
      </article>)}
    </section>
  </main>
  <SiteFooter />
</BaseLayout>
