---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import BaseHead from "../../../../../../components/BaseHead.astro";
import Footer from "../../../../../../components/Footer.astro";
import FormattedDate from "../../../../../../components/FormattedDate.astro";
import Header from "../../../../../../components/Header.astro";
import { SITE_DESCRIPTION, SITE_TITLE } from "../../../../../../consts";

// Test dummy page for deep nested paths
const posts = (await getCollection("blog")).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);

const categories = Array.from(
  new Set(
    posts.flatMap(
      p => p.data.categories ?? (p.data.category ? [p.data.category] : []),
    ),
  ),
).sort();

const categoryMap: Record<string, string> = {
  updates: "Updates",
  "example-apps": "Example Apps",
  "web-extraction": "Web Extraction",
  "ai-engineering": "AI Engineering",
  "low-code": "Low Code",
};

const catHref = (c: string) => `/blog/category/${encodeURIComponent(c)}`;
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
    <style>
      main {
        width: 960px;
      }
      .tabs {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin: 0.5rem 0 1.25rem;
      }
      .tab {
        padding: 0.5rem 0.9rem;
        border: 1px solid var(--border-color);
        border-radius: 9999px;
        font-size: 0.9rem;
        color: rgb(var(--black));
        text-decoration: none;
        background: #fff;
      }
      .tab:hover {
        border-color: var(--heat-20);
        box-shadow: var(--box-shadow);
      }
      .tab.active {
        background: var(--heat-10);
        border-color: var(--heat-20);
      }
      ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      ul li {
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        overflow: hidden;
        transition: all 0.2s ease;
      }
      ul li:hover {
        box-shadow: var(--box-shadow);
        border-color: var(--heat-20);
        transform: translateY(-2px);
      }
      ul li img {
        margin: 0;
        width: 100%;
        height: 200px;
        object-fit: cover;
      }
      .post-content {
        padding: 1.5rem;
      }
      .title {
        margin: 0 0 0.5rem 0;
        color: rgb(var(--black));
        line-height: 1.3;
        font-size: 1.25rem;
      }
      .date {
        margin: 0;
        color: rgb(var(--gray));
        font-size: 0.9rem;
      }
      ul li:hover .title {
        color: var(--accent);
      }
      @media (max-width: 720px) {
        main {
          width: 100%;
        }
        ul {
          grid-template-columns: 1fr;
          gap: 1rem;
        }
      }
    </style>
  </head>
  <body>
    <Header />
    <main>
      <section>
        <h1>Blog</h1>

        <p>
          This page is a test page for nested content, learn more on the
          <a href="/about">about page</a>. For more information about Firecrawl,
          visit <a href="https://firecrawl.dev">firecrawl.dev</a>. All content
          on this website may not be real or representative of any website.
          Please use this website for testing and learning purposes only.
        </p>

        <nav class="tabs" aria-label="Categories">
          <a class="tab active" href="/blog">All Posts</a>
          {
            categories.map(c => (
              <a class="tab" href={catHref(c)}>
                {categoryMap[c] || c}
              </a>
            ))
          }
        </nav>

        <ul>
          {
            posts.map(post => (
              <li>
                <a href={`/blog/${post.id}/`}>
                  {post.data.heroImage && (
                    <Image
                      width={1280}
                      height={720}
                      src={post.data.heroImage}
                      alt=""
                    />
                  )}
                  <div class="post-content">
                    <h4 class="title">{post.data.title}</h4>
                    <p class="date">
                      <FormattedDate date={post.data.pubDate} />
                    </p>
                  </div>
                </a>
              </li>
            ))
          }
        </ul>
      </section>
    </main>
    <Footer />
  </body>
</html>
