---
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))
  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0));
// Geplande reviews (draft: false, datum in de toekomst) blijven helemaal
// onzichtbaar op de homepage — niet eens als placeholder-rij — tot de datum
// voorbij is en er een nieuwe build gebeurt. Alleen echte drafts (geen datum)
// verschijnen als "binnenkort".
const drafts = all.filter((r) => r.data.draft);
const posts = [...published, ...drafts];

const dateFormatter = new Intl.DateTimeFormat("nl-NL", {
  day: "numeric",
  month: "short",
  year: "numeric",
});
---

<Base
  title="Reviews"
  description="Wekelijkse, eerlijke tests van Nederlandse AI-tools. Score van 1 tot 5 robots."
>
  <section class="intro">
    <h1>Nederlandse AI-tools, eerlijk getest.</h1>
    <p>
      Elke week (of vaker) een AI-tool onder de loep: hoe het werkt, voor wie
      het is, wat het kost. Score van 1 tot 5 robots.
    </p>
  </section>

  <ul class="postlist">
    {
      posts.map((post) => {
        const live = isPublished(post.data);
        return (
          <li class="post-row">
            <Cover
              hue={categoryHue(post.data.category)}
              logo={post.data.logo}
              company={post.data.company}
              size="thumb"
            />
            <div class="meta">
              <span class="tabnum">{live && post.data.date ? dateFormatter.format(post.data.date) : "—"}</span>
              <span>·</span>
              <a href={`/categorieen#${categorySlug(post.data.category)}`}>{emojify(post.data.category)}</a>
              <span class={`status ${live ? "" : "pending"}`}>{live ? "gepubliceerd" : "binnenkort"}</span>
            </div>
            <h2>
              <a href={live ? `/reviews/${post.id}` : undefined}>
                {emojify(post.data.title)}
              </a>
            </h2>
            <p class="dek">
              {emojify(post.data.location)} · {emojify(post.data.verdict)}
            </p>
            <div class="score">{live && <RobotScore score={post.data.score} />}</div>
          </li>
        );
      })
    }
  </ul>
</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);
    max-width: 58ch;
    font-size: 18px;
  }

  ul.postlist { list-style: none; margin: 0; padding: 0; }
  .post-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 6px 20px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
  }
  .post-row :global(.cover) { grid-row: 1 / 3; }
  .post-row .meta {
    grid-column: 2 / 3;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .post-row .meta a {
    color: var(--muted);
    text-decoration-color: var(--line);
  }
  .post-row .meta a:hover { color: var(--accent); text-decoration-color: var(--accent); }
  .post-row .meta .status {
    padding: 1px 7px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0;
  }
  .post-row .meta .status.pending {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
  }
  .post-row h2 { grid-column: 2 / 3; margin: 0; font-size: 20px; line-height: 1.35; }
  .post-row h2 a { color: var(--ink); text-decoration: none; }
  .post-row h2 a:hover { color: var(--accent); }
  .post-row p.dek {
    grid-column: 2 / 3;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 15.5px;
    max-width: 54ch;
  }
  .post-row .score { grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; white-space: nowrap; }

  @media (max-width: 620px) {
    .post-row { grid-template-columns: 64px 1fr auto; }
  }
</style>
