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

export const metadata: Metadata = {
  title: "Guides",
  description: "Image optimization guides: convert, compress, resize, and choose the best image format for the web."
};

const GUIDES = [
  {
    slug: "best-image-format-for-web",
    title: "Best image format for web (JPG vs PNG vs WebP vs AVIF)",
    excerpt:
      "A practical guide to choosing the best format to convert images for websites, balancing quality, compression, and compatibility."
  },
  {
    slug: "how-to-compress-images-without-quality-loss",
    title: "How to compress images without obvious quality loss",
    excerpt:
      "Simple steps to compress JPG, PNG, WebP, and AVIF while keeping visuals sharp, including when to resize."
  },
  {
    slug: "webp-vs-png",
    title: "WebP vs PNG: which should you use?",
    excerpt:
      "When converting images, use PNG for transparency and crisp UI, and WebP for smaller web files — here’s the full breakdown."
  }
] as const;

export default function GuidesIndexPage() {
  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="/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">Guides</h1>
          <p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-600 sm:text-base">
            Long-form, crawlable articles about image convert workflows: JPG, PNG, WebP, AVIF; how to compress images;
            and how to resize for performance and SEO.
          </p>
        </header>

        <section className="mt-8 grid gap-4">
          {GUIDES.map((g) => (
            <Link
              key={g.slug}
              href={`/guides/${g.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">{g.title}</h2>
              <p className="mt-2 text-sm leading-relaxed text-slate-600">{g.excerpt}</p>
            </Link>
          ))}
        </section>
      </div>
    </main>
  );
}