---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { siteConfig } from "@/config/site";
import Hero from "@/components/widgets/Hero.astro";
import PostItem from "@/components/blog/PostItem.astro";
import { getCollection } from "astro:content";

const metadata = {
  title: `${siteConfig.name} — You Only Live Once`,
  description:
    "Chào mừng bạn đến với blog của chúng tôi, nơi chúng tôi chia sẻ những câu chuyện, kiến thức và trải nghiệm về cuộc sống. Hãy cùng khám phá và tận hưởng hành trình này nhé!",
  ignoreTitleTemplate: true,
};

const blogEntries = await getCollection("blog");
const latestPosts = blogEntries
  .filter((post) => post.data && post.data.pubDate)
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
  .slice(0, 5);

const firstRow = latestPosts.slice(0, 2);
const secondRow = latestPosts.slice(2, 5);
---

<BaseLayout {metadata}>
  <Hero
    title={`You Only Live Once`}
    tagline=""
    description=""
    bgImage="/images/460cc863-81ff-44b4-811f-422558bd2078.jpg"
  />

  <section class="relative px-4 py-12 sm:px-6 lg:px-8 md:py-36">
    <div class="mx-auto max-w-5xl">
      <div class="grid gap-8 md:grid-cols-2 mb-8">
        {firstRow.map((post) => <PostItem post={post} />)}
      </div>

      <div class="grid gap-8 md:grid-cols-3 mb-12">
        {secondRow.map((post) => <PostItem post={post} />)}
      </div>

      <div class="text-center">
        <a
          href="/blog"
          class="inline-flex items-center gap-2 rounded-xl border border-border bg-card px-6 py-3 text-sm font-medium text-foreground transition-colors hover:bg-muted"
        >
          Xem tất cả bài viết
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-4 w-4"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M5 12h14M12 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </section>
</BaseLayout>