---
import Base from '../../layouts/Base.astro';

const posts = await Astro.glob('./*.mdx');
posts.sort((a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime());
---
<Base title="Blog" description="leeworks.dev developer blog">
  <style>
    .blog-hero { padding: 3rem 2rem 1rem; text-align: center; }
    .blog-hero h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
    .blog-hero p { color: #a0aec0; }
    .posts { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }
    .post-card { border-bottom: 1px solid #2d3748; padding: 2rem 0; }
    .post-card h2 a { color: #90cdf4; text-decoration: none; font-size: 1.5rem; }
    .meta { color: #718096; font-size: 0.875rem; margin: 0.5rem 0; }
    .description { color: #a0aec0; }
  </style>
  <div class="blog-hero"><h1>Blog</h1><p>Tutorials and news from leeworks.dev</p></div>
  <div class="posts">
    {posts.map(post => (
      <div class="post-card">
        <h2><a href={post.url}>{post.frontmatter.title}</a></h2>
        <div class="meta">{post.frontmatter.date}</div>
        <p class="description">{post.frontmatter.description}</p>
      </div>
    ))}
    {posts.length === 0 && <p style="color: #718096">No posts yet.</p>}
  </div>
</Base>