---
import Layout from '../../layouts/Layout.astro';
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

<Layout title="เรื่องน่ารู้ SEO & AI | MoreminiMore">
  <section class="py-20 bg-gradient-hero">
    <div class="container mx-auto px-4">
      <h1 class="text-5xl md:text-6xl font-bold text-center mb-6 text-secondary">เรื่องน่ารู้</h1>
      <p class="text-xl text-center text-gray-600 max-w-3xl mx-auto">บทความเกี่ยวกับ SEO, AI และดิจิตอลมาร์เก็ตติ้ง</p>
    </div>
  </section>

  <section class="py-20 bg-white">
    <div class="container mx-auto px-4">
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
        {posts.map((post) => (
          <article class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
            <div class="p-6">
              <div class="flex flex-wrap gap-2 mb-4">
                {post.data.tags.map((tag) => (
                  <span class="text-xs bg-accent-blue text-white px-3 py-1 rounded-full">{tag}</span>
                ))}
              </div>
              <h2 class="text-xl font-bold mb-3 hover:text-accent-blue transition">
                <a href={`/blog/${post.id}/`} class="hover:underline">{post.data.title}</a>
              </h2>
              <p class="text-gray-600 mb-4 line-clamp-3">{post.data.description}</p>
              <div class="flex items-center justify-between text-sm text-gray-500">
                <span>{post.data.author}</span>
                <span>{post.data.pubDate.toLocaleDateString('th-TH')}</span>
              </div>
              <a href={`/blog/${post.id}/`} class="text-accent-blue font-medium hover:underline flex items-center gap-2 mt-4">อ่านเพิ่มเติม →</a>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
</Layout>