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

export const metadata: Metadata = {
  title: "Blog",
  description: "Image conversion notes: JPG, PNG, WebP, AVIF, compression, resizing, and format compatibility."
};

const POSTS = [
  {
    slug: "jpg-vs-png",
    title: "JPG vs PNG: when to convert and why",
    excerpt: "A simple comparison of JPG/JPEG and PNG, plus when to compress and when to keep lossless pixels."
  },
  {
    slug: "png-to-webp-for-speed",
    title: "Convert PNG to WebP for website speed",
    excerpt: "How WebP compression can reduce file size while keeping transparency and good quality."
  },
  {
    slug: "avif-for-photos",
    title: "AVIF for photos: smaller files, modern compression",
    excerpt: "When converting JPG to AVIF makes sense, and how to pick a quality level that still looks great."
  }
] as const;

export default function BlogIndexPage() {
  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="/guides">
              Guides
            </Link>
            <Link className="rounded-xl px-3 py-2 text-slate-600 hover:bg-white/60" href="/about">
              About
            </Link>
            <Link className="rounded-xl px-3 py-2 text-slate-600 hover:bg-white/60" href="/contact">
              Contact
            </Link>
          </div>
        </nav>

        <header className="mt-10">
          <h1 className="font-display text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">Blog</h1>
          <p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-600 sm:text-base">
            Short articles on converting images, compressing JPG/PNG/WebP/AVIF, resizing for performance, and common
            compatibility issues.
          </p>
        </header>

        <section className="mt-8 grid gap-4">
          {POSTS.map((p) => (
            <Link key={p.slug} href={`/blog/${p.slug}`} className="glass-panel rounded-2xl p-6 transition hover:bg-white/65">
              <h2 className="font-display text-xl font-bold tracking-tight text-slate-900">{p.title}</h2>
              <p className="mt-2 text-sm leading-relaxed text-slate-600">{p.excerpt}</p>
            </Link>
          ))}
        </section>
      </div>
    </main>
  );
}