import type { Metadata } from "next";
import Link from "next/link";

import { estimateReadTime, formatDate, getAllPosts, getSiteMeta } from "@/lib/site-data";

export const metadata: Metadata = {
  title: "Journal",
  description: "Stories, release notes, and product context behind the current work.",
};

export default function BlogPage() {
  const posts = getAllPosts();
  const site = getSiteMeta();

  return (
    <div className="page-enter space-y-8">
      <section className="surface rounded-[2.5rem] px-6 py-10 sm:px-8 sm:py-14">
        <p className="text-sm font-medium uppercase tracking-[0.3em] text-[var(--muted)]">Journal</p>
        <h1 className="mt-4 max-w-4xl text-4xl font-semibold tracking-tight text-[var(--foreground)] sm:text-5xl">The ideas, release notes, and product stories shaping {site.name}.</h1>
        <p className="mt-4 max-w-3xl text-sm leading-7 text-[var(--muted)]">Every entry is tied to a real release, experiment, or current project so the writing stays close to the work itself.</p>
      </section>

      <section className="grid gap-4">
        {posts.map((post) => (
          <Link key={post.id} href={`/blog/${post.slug}`} className="surface group rounded-[2rem] p-6 transition hover:-translate-y-1">
            <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
              <div className="max-w-3xl space-y-3">
                <p className="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--muted)]">{formatDate(post.date)} · {estimateReadTime(post.content)} min read</p>
                <h2 className="text-2xl font-semibold tracking-tight text-[var(--foreground)] transition group-hover:opacity-80">{post.title}</h2>
                <p className="text-sm leading-7 text-[var(--muted)]">{post.excerpt}</p>
              </div>
              <div className="flex flex-wrap gap-2 lg:max-w-sm lg:justify-end">
                {(post.terms.category ?? []).map((term) => (
                  <span key={term.id} className="rounded-full border border-[var(--border)] bg-[var(--background-soft)] px-3 py-1 text-xs text-[var(--muted)]">{term.name}</span>
                ))}
              </div>
            </div>
          </Link>
        ))}
      </section>
    </div>
  );
}