---
import Layout from "../../layouts/Layout.astro";
import Nav from "../../components/Nav.astro";
import Footer from "../../components/Footer.astro";
import PageScripts from "../../components/PageScripts.astro";
import { getCollection } from "astro:content";

const posts = (await getCollection("blog")).sort(
  (a, b) => b.data.date.getTime() - a.data.date.getTime()
);

const [featured, ...older] = posts;

const formatDate = (date: Date) =>
  date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
---

<Layout title="Blog — Fabro" description="News, updates, and insights from the Fabro team.">
  <Nav currentPage="blog" />

  <main>
    <!-- Header — compact, content-forward -->
    <section class="relative pt-24 sm:pt-28 pb-10">
      <div class="absolute inset-0 noise-overlay"></div>
      <div class="pointer-events-none absolute top-8 -left-40 h-[400px] w-[400px] rounded-full bg-teal-500/8 blur-[120px]"></div>

      <div class="relative mx-auto max-w-3xl px-6">
        <h1 class="font-display text-4xl font-bold tracking-tight text-ice-50 sm:text-5xl leading-[1.1]">
          Blog
        </h1>
        <p class="mt-3 text-lg text-ice-300">
          News, updates, and insights from the Fabro team.
        </p>
      </div>
    </section>

    <!-- Featured post -->
    {featured && (
      <section class="relative pb-8">
        <div class="mx-auto max-w-3xl px-6">
          <a href={`/blog/${featured.id}`} class="group block">
            <article class="rounded-xl border border-teal-700/30 bg-gradient-to-br from-navy-800/40 to-navy-900/20 p-8 relative overflow-hidden transition-all duration-400 hover:border-teal-700/50 hover:shadow-[0_0_40px_-8px_rgba(53,127,158,0.15)]">
              <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-teal-500/40 to-transparent" />
              <time class="text-xs font-mono text-teal-500/70">{formatDate(featured.data.date)}</time>
              <h2 class="mt-3 font-display text-2xl font-bold text-ice-50 group-hover:text-teal-300 transition-colors sm:text-3xl">
                {featured.data.title}
              </h2>
              <p class="mt-3 text-base leading-relaxed text-ice-300">{featured.data.description}</p>
              <div class="mt-5 flex items-center gap-3">
                <span class="text-sm text-ice-300/50">By {featured.data.author}</span>
                <span class="text-ice-300/30">&middot;</span>
                <span class="text-sm font-medium text-teal-500 group-hover:text-teal-300 transition-colors">
                  Read &rarr;
                </span>
              </div>
            </article>
          </a>
        </div>
      </section>
    )}

    <!-- Older posts -->
    {older.length > 0 && (
      <section class="relative pb-24">
        <div class="mx-auto max-w-3xl px-6 space-y-1">
          {older.map((post, i) => (
            <a href={`/blog/${post.id}`} class="group flex items-baseline gap-4 py-4 border-b border-navy-800/40 transition-colors hover:border-teal-700/30">
              <time class="shrink-0 w-28 text-xs font-mono text-ice-300/40">{formatDate(post.data.date)}</time>
              <span class="font-display text-base font-semibold text-ice-50 group-hover:text-teal-300 transition-colors">{post.data.title}</span>
              <span class="hidden sm:inline text-sm text-ice-300/50">&mdash; {post.data.description}</span>
            </a>
          ))}
        </div>
      </section>
    )}

    {older.length === 0 && <div class="pb-24" />}
  </main>

  <Footer />
  <PageScripts />
</Layout>
