import { JsonLd } from '@/components/json-ld';
import { articlesNewestFirst } from '@/lib/articles';
import { breadcrumbJsonLd, pageMetadata } from '@/lib/seo';
import Link from 'next/link';

export const metadata = pageMetadata({
  title: 'MCP guides',
  description:
    'Practical guides on hosting, securing and shipping Model Context Protocol (MCP) servers — OAuth 2.1, remote transport, platform comparisons.',
  path: '/guides',
});

export default function GuidesIndex() {
  const guides = articlesNewestFirst();
  return (
    <div className="mx-auto max-w-3xl px-6 py-14">
      <JsonLd
        data={breadcrumbJsonLd([
          { name: 'Home', path: '/' },
          { name: 'Guides', path: '/guides' },
        ])}
      />
      <h1 className="text-[28px] font-semibold tracking-tight text-[--color-fg]">MCP guides</h1>
      <p className="mt-2 text-[14.5px] leading-relaxed text-[--color-fg-muted]">
        Hosting, auth and shipping for Model Context Protocol servers — written for people building
        real tools, not demos.
      </p>
      <div className="mt-8 space-y-3">
        {guides.map((g) => (
          <Link
            key={g.slug}
            href={`/guides/${g.slug}`}
            className="block rounded-lg border border-[--color-border] p-4 transition-colors hover:bg-[--color-bg-subtle]"
          >
            <div className="flex items-center gap-2.5">
              <span className="mono text-[10.5px] uppercase tracking-wider text-[--color-fg-subtle]">
                {g.tag}
              </span>
              <span className="text-[10.5px] text-[--color-fg-subtle]">
                {new Date(g.dateModified ?? g.datePublished).toLocaleDateString('en-US', {
                  year: 'numeric',
                  month: 'short',
                  day: 'numeric',
                })}
              </span>
            </div>
            <h2 className="mt-1 text-[16px] font-semibold tracking-tight text-[--color-fg]">
              {g.title}
            </h2>
            <p className="mt-1.5 text-[13px] leading-relaxed text-[--color-fg-muted]">
              {g.description}
            </p>
          </Link>
        ))}
      </div>
    </div>
  );
}