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

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

<Layout title="บล็อก" description="บทความและความรู้ด้าน Digital Transformation, AI และการตลาดออนไลน์สำหรับ SMEs ไทย">
  <section class="page-header">
    <div class="container">
      <h1>บล็อก</h1>
      <p>บทความและความรู้ด้านเทคโนโลยีและการตลาดสำหรับธุรกิจ SMEs ไทย</p>
    </div>
  </section>

  <section class="blog-list">
    <div class="container">
      <div class="posts-grid">
        {sortedPosts.map((post) => (
          <article class="post-card">
            <h2>
              <a href={`/blog/${post.slug}`}>{post.data.title}</a>
            </h2>
            <p class="post-meta">
              <span>{post.data.author}</span>
              <span>•</span>
              <time datetime={post.data.pubDate.toISOString()}>
                {post.data.pubDate.toLocaleDateString('th-TH', { 
                  year: 'numeric', 
                  month: 'long', 
                  day: 'numeric' 
                })}
              </time>
            </p>
            <p class="post-description">{post.data.description}</p>
            <div class="post-tags">
              {post.data.tags?.slice(0, 3).map((tag) => (
                <span class="tag">{tag}</span>
              ))}
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
</Layout>

<style>
  .page-header {
    background: var(--color-primary);
    padding: 4rem 0;
    text-align: center;
  }

  .page-header h1 {
    margin-bottom: 0.5rem;
  }

  .blog-list {
    padding: 4rem 0;
  }

  .posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }

  .post-card {
    background: var(--color-neutral);
    border: 1px solid var(--color-light-gray);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }

  .post-card h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .post-card h2 a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.2s;
  }

  .post-card h2 a:hover {
    color: var(--color-primary);
  }

  .post-meta {
    font-size: 0.875rem;
    color: var(--color-dark-gray);
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
  }

  .post-description {
    color: var(--color-dark-gray);
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .post-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .tag {
    background: var(--color-light-gray);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    color: var(--color-dark-gray);
  }
</style>