---
import { getCollection } from 'astro:content';

const posts = (await getCollection('blog'))
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
  .slice(0, 3);
---
<section class="section recent-posts" id="recent-posts">
  <div class="container">
    <div class="section-header">
      <div class="accent-line"></div>
      <h2>Recent <span class="text-accent">Entries</span></h2>
      <p class="text-muted font-mono" style="margin-top:0.5rem;font-size:0.85rem">
        latest dispatches from the terminal
      </p>
    </div>

    <div class="posts-grid">
      {posts.map((post, i) => (
        <article class="card post-card" class:list={[{ featured: i === 0 }]}>
          <a href={`/blog/${post.id}`} class="post-link">
            <div class="post-card-inner">
              {post.data.day && (
                <div class="post-day font-mono">entry_{String(post.data.day).padStart(3,'0')}</div>
              )}
              <h3 class="post-card-title">{post.data.title}</h3>
              <p class="post-card-desc text-muted">{post.data.description}</p>
              <div class="post-card-meta">
                <time class="font-mono text-muted" style="font-size:0.72rem">
                  {post.data.pubDate.toLocaleDateString('en-GB', { day:'numeric', month:'short', year:'numeric' })}
                </time>
                <div class="post-card-tags">
                  {(post.data.tags ?? []).slice(0,3).map((t: string) => (
                    <span class="tag">{t}</span>
                  ))}
                </div>
              </div>
              <div class="post-card-cta text-accent font-mono">
                cat post.md <span class="cta-arrow">→</span>
              </div>
            </div>
          </a>
        </article>
      ))}
    </div>

    <div style="text-align:center;margin-top:3rem">
      <a href="/blog" class="btn btn-primary">View all entries →</a>
    </div>
  </div>
</section>

<style>
  .recent-posts { 
    padding-bottom: 1rem;
    padding-top: 15rem; }

  .section-header { margin-bottom: 3rem; }

  .posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .post-card { padding: 0; overflow: hidden; }

  .post-card.featured {
    border-color: rgba(0, 210, 190, 0.2);
  }

  .post-link {
    display: block;
    color: inherit;
    height: 100%;
  }

  .post-link:hover .post-card-title { color: var(--petronas-teal); }
  .post-link:hover .cta-arrow { transform: translateX(4px); }

  .post-card-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.75rem;
    height: 100%;
  }

  .post-day {
    font-size: 0.7rem;
    color: var(--petronas-teal);
    letter-spacing: 0.1em;
    opacity: 0.7;
  }

  .post-card-title {
    font-size: 1.15rem;
    line-height: 1.3;
    transition: color var(--transition-fast);
  }

  .post-card-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    flex: 1;
  }

  .post-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

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

  .post-card-cta {
    font-size: 0.75rem;
    margin-top: 0.5rem;
    letter-spacing: 0.05em;
  }

  .cta-arrow {
    display: inline-block;
    transition: transform var(--transition-fast);
  }

  @media (max-width: 900px) {
    .posts-grid { grid-template-columns: 1fr; }
  }
</style>
