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

const posts = await getCollection('blog');
---

<BaseLayout title="บล็อก" description="บทความและข่าวสาร">
  <Header />
  
  <main class="pt-32 pb-16 bg-gray-50">
    <div class="container mx-auto px-4">
      <h1 class="section-title text-center mb-4">บล็อก</h1>
      <p class="section-subtitle text-center mb-12">บทความและข่าวสารจากเรา</p>
      
      <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>
  
  <Footer />
  <FloatingContact />
</BaseLayout>