---
import { getCollection } from "astro:content";
import Base from "../layouts/Base.astro";
import Cover from "../components/Cover.astro";
import RobotScore from "../components/RobotScore.astro";
import { categorySlug, categoryHue } from "../lib/category";
import { emojify } from "../lib/emojify";
import { isPublished } from "../lib/publish";

const all = await getCollection("reviews");
const published = all.filter((r) => isPublished(r.data));

const byCategory = new Map<string, typeof published>();
for (const post of published) {
  const key = post.data.category;
  if (!byCategory.has(key)) byCategory.set(key, []);
  byCategory.get(key)!.push(post);
}
const categories = [...byCategory.entries()].sort((a, b) => a[0].localeCompare(b[0], "nl"));
---

<Base
  title="Categorieën"
  description="Alle AITestBank-reviews gegroepeerd per categorie."
>
  <section class="intro">
    <h1>Categorieën</h1>
    <p>Alle reviews gegroepeerd per soort tool.</p>
  </section>

  {
    categories.length === 0 && (
      <p class="empty">Nog geen gepubliceerde reviews.</p>
    )
  }

  {
    categories.map(([category, posts]) => (
      <section class="category" id={categorySlug(category)}>
        <h2>
          <span class={`dot hue-${categoryHue(category)}`} />
          {emojify(category)}
        </h2>
        <ul class="taglist">
          {posts.map((post) => (
            <li class="tag-row">
              <Cover hue={categoryHue(category)} logo={post.data.logo} company={post.data.company} size="thumb" />
              <div class="tag-body">
                <h3>
                  <a href={`/reviews/${post.id}`}>{emojify(post.data.title)}</a>
                </h3>
                <p class="dek">{emojify(post.data.location)} · {emojify(post.data.verdict)}</p>
              </div>
              <RobotScore score={post.data.score} />
            </li>
          ))}
        </ul>
      </section>
    ))
  }
</Base>

<style>
  section.intro {
    padding: 44px 0 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
  section.intro h1 {
    font-size: 34px;
    margin: 0 0 12px;
    text-wrap: balance;
    letter-spacing: -0.01em;
  }
  section.intro p {
    margin: 0 0 30px;
    color: var(--muted);
    font-size: 18px;
  }

  .empty { color: var(--muted); padding: 30px 0; }

  .category { padding: 34px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }
  .category h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    margin: 0 0 18px;
    letter-spacing: -0.005em;
  }
  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hue-teal-ink);
    flex-shrink: 0;
  }
  .dot.hue-amber { background: var(--hue-amber-ink); }
  .dot.hue-rust { background: var(--hue-rust-ink); }
  .dot.hue-slate { background: var(--hue-slate-ink); }
  .dot.hue-olive { background: var(--hue-olive-ink); }

  ul.taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
  .tag-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: center;
  }
  .tag-row :global(.cover.thumb) { width: 64px; height: 64px; }
  .tag-row :global(.cover.thumb) :global(.mark) { width: 38px; height: 38px; }
  .tag-body h3 { margin: 0; font-size: 16px; line-height: 1.35; }
  .tag-body h3 a { color: var(--ink); text-decoration: none; }
  .tag-body h3 a:hover { color: var(--accent); }
  .tag-body p.dek { margin: 3px 0 0; color: var(--muted); font-size: 14px; }

  @media (max-width: 560px) {
    .tag-row { grid-template-columns: 48px 1fr; }
    .tag-row :global(.cover.thumb) { width: 48px; height: 48px; grid-row: 1 / 3; }
    .tag-row :global(.cover.thumb) :global(.mark) { width: 28px; height: 28px; }
    .tag-row > :last-child:not(.cover) { grid-column: 2; }
  }
</style>
