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

const posts = await getCollection('blog');

export const metadata = {
  title: 'บทความความรู้',
  description: 'บทความความรู้เกี่ยวกับวัสดุท่อ อุปกรณ์ระบบท่อ และเทคนิคการติดตั้ง',
};

export const prerender = true;
---

<BaseLayout title={metadata.title} description={metadata.description}>
  <main class="pt-32 pb-16">
    <div class="container mx-auto px-4">
      <!-- Hero -->
      <div class="text-center mb-12">
        <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-4">
          บทความ<span class="text-primary-600">ความรู้</span>
        </h1>
        <p class="text-xl text-secondary-600 max-w-2xl mx-auto">
          บทความความรู้เกี่ยวกับวัสดุท่อ อุปกรณ์ระบบท่อ และเทคนิคการติดตั้ง
        </p>
      </div>

      <!-- Blog Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {posts.map((post) => (
          <BlogCard post={post} />
        ))}
      </div>
    </div>
  </main>
</BaseLayout>