---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
import { WORLDS, CATEGORY_COLORS, HERO_TAGLINE, SITE_FOUNDED, plural } from '../consts';

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

const totalPosts = posts.length;
const totalWorlds = WORLDS.length; // используется в hero-meta
const oldestYear = posts.length ? posts[posts.length - 1].data.pubDate.getFullYear() : SITE_FOUNDED;

const fmtDate = (d: Date) =>
  d.toLocaleDateString('ru-RU', { year: 'numeric', month: 'long', day: 'numeric' });
---
<BaseLayout>
  <section class="hero">
    <span class="hero-eyebrow">Ролевой проект · с {SITE_FOUNDED} года</span>
    <h1>Иные<br/>Отражения</h1>
    <p class="hero-tagline">{HERO_TAGLINE}</p>
    <div class="hero-meta">
      <span><strong>{totalWorlds}</strong> {plural(totalWorlds, ['мир', 'мира', 'миров'])}</span>
      <span><strong>{totalPosts}</strong> {plural(totalPosts, ['публикация', 'публикации', 'публикаций'])}</span>
      <span><strong>с {SITE_FOUNDED}</strong> года</span>
    </div>
  </section>

  <section id="news">
    <div class="section-head">
      <h2>Хроника проекта</h2>
      <span class="section-meta"><a href="/feed.xml">RSS-фид</a></span>
    </div>
    <ul class="post-list">
      {posts.map((post) => {
        const catColor = post.data.categorySlugs[0]
          ? CATEGORY_COLORS[post.data.categorySlugs[0]] ?? 'var(--accent)'
          : 'var(--accent)';
        return (
          <li class="post-card" style={`--cat-color: ${catColor}`}>
            <div class="post-meta">
              <time datetime={post.data.pubDate.toISOString()}>{fmtDate(post.data.pubDate)}</time>
              {post.data.categories.length > 0 && (
                <a
                  href={`/category/${post.data.categorySlugs[0]}/`}
                  class="cat-tag"
                  style={`--cat-color: ${catColor}`}
                >
                  {post.data.categories[0]}
                </a>
              )}
            </div>
            <h3><a href={`/${post.data.slug}/`}>{post.data.title}</a></h3>
            {post.data.description && <p class="post-excerpt">{post.data.description}…</p>}
          </li>
        );
      })}
    </ul>
  </section>

</BaseLayout>