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

type Post = {
  slug: string;
  title: string;
  description: string;
  body: string[];
};

const POSTS: readonly Post[] = [
  {
    slug: "jpg-vs-png",
    title: "JPG vs PNG: when to convert and why",
    description:
      "Compare JPG/JPEG and PNG. Learn when to convert, when to compress, and how to pick the best image format for your use case.",
    body: [
      "JPG (JPEG) is designed for photographs and gradients. It uses lossy compression, which means you can compress images significantly by lowering quality. This is great for web galleries and camera photos.",
      "PNG is lossless and supports transparency. It’s ideal for UI screenshots, logos, and images with sharp edges. The trade-off is file size: PNG can be much larger than JPG for photos.",
      "If you need a smaller file for the web, consider converting PNG to WebP or converting JPG to AVIF/WebP. These modern formats often deliver better compression at similar quality.",
    ],
  },
  {
    slug: "png-to-webp-for-speed",
    title: "Convert PNG to WebP for website speed",
    description:
      "Learn why converting PNG to WebP can reduce file size and improve page speed, and how to compress images safely.",
    body: [
      "If your pages load slowly, large PNG images are a common cause. PNG is great for quality, but it’s not always the most efficient format for web delivery.",
      "WebP supports transparency like PNG, but can compress images much smaller. Converting PNG to WebP is often one of the fastest optimizations for SEO and performance metrics.",
      "For icons and flat graphics, try palette PNG or lossless WebP. For photos, try WebP lossy or AVIF.",
    ],
  },
  {
    slug: "avif-for-photos",
    title: "AVIF for photos: smaller files, modern compression",
    description:
      "AVIF is a modern image format that can compress photos aggressively. Learn when to convert JPG to AVIF and how to pick quality.",
    body: [
      "AVIF is a modern format based on the AV1 codec. It’s especially strong for compressing photos to smaller file sizes while keeping high quality.",
      "If you currently use JPG for photos, try converting JPG to AVIF and compare file sizes. For many images, AVIF can be noticeably smaller at similar perceived quality.",
      "When you compress an image too much, you may see banding or smearing in textures. Increase quality if artifacts appear, or consider WebP as a faster alternative.",
    ],
  },
] as const;

export function generateStaticParams() {
  return POSTS.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = POSTS.find((p) => p.slug === slug);
  if (!post) return { title: "Blog post" };
  return { title: post.title, description: post.description };
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = POSTS.find((p) => p.slug === slug);
  if (!post) {
    return (
      <main className="relative z-10 min-h-screen px-4 py-10 sm:px-6">
        <div className="mx-auto w-full max-w-3xl">
          <h1 className="font-display text-2xl font-bold tracking-tight text-slate-900">Post not found</h1>
          <p className="mt-2 text-slate-600">Go back to the blog.</p>
          <Link href="/blog" className="mt-5 inline-flex rounded-xl bg-white/70 px-4 py-2 text-sm font-semibold text-indigo-700 shadow-sm backdrop-blur hover:bg-white">
            Browse blog
          </Link>
        </div>
      </main>
    );
  }

  return (
    <main className="relative z-10 min-h-screen px-4 py-10 sm:px-6">
      <div className="mx-auto w-full max-w-4xl">
        <nav className="glass-panel flex flex-wrap items-center justify-between gap-3 rounded-2xl px-4 py-2.5 sm:px-6">
          <Link href="/" className="font-display rounded-xl px-2 py-2 text-sm font-bold tracking-tight text-slate-900 hover:bg-white/50">
            ← Image Converter
          </Link>
          <div className="flex flex-wrap items-center gap-1 text-sm font-medium">
            <Link className="rounded-xl px-3 py-2 text-slate-600 hover:bg-white/60" href="/blog">
              Blog
            </Link>
            <Link className="rounded-xl px-3 py-2 text-slate-600 hover:bg-white/60" href="/guides">
              Guides
            </Link>
          </div>
        </nav>

        <article className="glass-panel mt-10 rounded-3xl p-6 sm:p-8">
          <h1 className="font-display text-balance text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">
            {post.title}
          </h1>
          <p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-600 sm:text-base">{post.description}</p>

          <div className="prose prose-slate mt-8 max-w-none">
            {post.body.map((p) => (
              <p key={p}>{p}</p>
            ))}
          </div>
        </article>
      </div>
    </main>
  );
}