---
import Base from '../../layouts/Base.astro';
import PageHero from '../../components/PageHero.astro';
import { getDb } from '../../lib/db';
import { listPublished } from '../../lib/posts';
import { CATEGORIES } from '../../lib/blog-const';
export const prerender = false;

const PER_PAGE = 9;
const url = Astro.url;
const category = url.searchParams.get('categoria') ?? undefined;
const page = Math.max(1, Number(url.searchParams.get('pagina') ?? '1') || 1);
const { items, total } = listPublished(getDb(), {
  category: category && (CATEGORIES as readonly string[]).includes(category) ? category : undefined,
  page, perPage: PER_PAGE,
});
const pages = Math.max(1, Math.ceil(total / PER_PAGE));
const fmt = (d: string | null) => d ? new Intl.DateTimeFormat('it-IT', { dateStyle: 'long' }).format(new Date(d)) : '';
const linkFor = (cat?: string, p = 1) => {
  const q = new URLSearchParams();
  if (cat) q.set('categoria', cat);
  if (p > 1) q.set('pagina', String(p));
  const s = q.toString();
  return `/blog${s ? `?${s}` : ''}`;
};
---
<Base title="Blog & Edugo" description="Edugo è lo spazio di InsanityLab dedicato alla conoscenza: articoli, guide e approfondimenti su allenamento, nutrizione e salute.">
  <PageHero title="Blog & Edugo" />
  <section class="section">
    <div class="container">
      <div class="section-heading">
        <h2>Blog & Edugo</h2>
        <p>Edugo è lo spazio di InsanityLab dedicato alla conoscenza: articoli, guide e approfondimenti su allenamento, nutrizione e salute per capire il corpo e migliorare il proprio benessere. Perché la conoscenza è il primo passo del cambiamento.</p>
      </div>
      <nav class="bfilters" aria-label="categorie">
        <a class:list={['bfilters__item', { 'is-active': !category }]} href={linkFor()}>Mostra tutto</a>
        {CATEGORIES.map((c) => (
          <a class:list={['bfilters__item', { 'is-active': category === c }]} href={linkFor(c)}>{c}</a>
        ))}
      </nav>
      {items.length === 0 ? (
        <p style="text-align:center">Nessun articolo pubblicato{category ? ' in questa categoria' : ''}, torna a trovarci presto.</p>
      ) : (
        <div class="bgrid">
          {items.map((post) => (
            <article class="bcard">
              {post.cover && <a href={`/blog/${post.slug}`}><img src={post.cover} alt="" loading="lazy" /></a>}
              <p class="bcard__date">{fmt(post.published_at)}</p>
              <h3><a href={`/blog/${post.slug}`}>{post.title}</a></h3>
              <p>{post.excerpt}</p>
              <a class="bcard__more" href={`/blog/${post.slug}`}>Per saperne di più →</a>
            </article>
          ))}
        </div>
      )}
      {pages > 1 && (
        <nav class="bpages" aria-label="paginazione">
          {Array.from({ length: pages }, (_, i) => (
            <a class:list={['bpages__n', { 'is-active': page === i + 1 }]} href={linkFor(category, i + 1)}>{i + 1}</a>
          ))}
        </nav>
      )}
    </div>
  </section>
</Base>

<style>
  .bfilters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 50px; }
  .bfilters__item { font-family: var(--font-heading); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--c-text); padding: 10px 16px; }
  .bfilters__item.is-active { background: var(--c-accent); color: #fff; }
  .bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 40px; }
  .bcard img { aspect-ratio: 4/3; object-fit: cover; width: 100%; margin-bottom: 14px; }
  .bcard__date { font-size: .78rem; color: var(--c-text-light); margin-bottom: 4px; }
  .bcard h3 a { text-decoration: none; }
  .bcard__more { font-family: var(--font-heading); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--c-heading); }
  .bpages { display: flex; gap: 8px; justify-content: center; margin-top: 50px; }
  .bpages__n { font-family: var(--font-heading); text-decoration: none; padding: 8px 14px; color: var(--c-text); }
  .bpages__n.is-active { background: var(--c-dark); color: #fff; }
  @media (max-width: 991px) { .bgrid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .bgrid { grid-template-columns: 1fr; } }
</style>
