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

const allPosts = await getCollection('posts');

// Скрываем служебные (hideFromList) из ленты главной.
const visible = allPosts.filter((p) => !p.data.hideFromList);

// Pinned featured-посты идут сверху, в порядке pubDate desc внутри группы.
const featured = visible
  .filter((p) => p.data.featured)
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
const rest = visible
  .filter((p) => !p.data.featured)
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

const lead = featured[0];
const otherFeatured = featured.slice(1);
---

<BaseLayout>
  {lead && (
    <section class="featured-section">
      <PostCard post={lead} featured />
    </section>
  )}

  {otherFeatured.length > 0 && (
    <section class="more-history">
      <h2 class="section-title">Ещё из истории</h2>
      {otherFeatured.map((p) => <PostCard post={p} />)}
    </section>
  )}

  {rest.length > 0 && (
    <section class="chronicle">
      <h2 class="section-title">Хроника</h2>
      {rest.map((p) => <PostCard post={p} />)}
    </section>
  )}
</BaseLayout>

<style>
  .featured-section { margin-bottom: 1rem; }
  .more-history, .chronicle { margin-top: 1.5rem; }
  .section-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin: 0 0 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule-strong);
  }
</style>
