import { 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',
});

const GUIDES = [
  {
    slug: 'host-mcp-server-with-oauth',
    title: 'How to host a remote MCP server with OAuth (2026)',
    description:
      'Streamable HTTP, OAuth 2.1, PKCE and Resource Indicators — what it actually takes to put a remote MCP server in production, and the shortcuts.',
    tag: 'Guide',
  },
  {
    slug: 'hosted-mcp-platforms-compared',
    title: 'Hosted MCP platforms compared: Cloudflare, Smithery, Composio & generating your own',
    description:
      'The MCP hosting landscape splits into four categories. Which one fits depends on whether you have a server already, need a catalog, or need bespoke logic.',
    tag: 'Comparison',
  },
  {
    slug: 'mintmcp-alternative',
    title: 'MintMCP alternative: generate and host a custom MCP server',
    description:
      'MintMCP wraps an existing STDIO server into a remote one. If you do not have a server yet, here is the generate-from-a-prompt route — and where MintMCP still wins.',
    tag: 'Alternative',
  },
];

export default function GuidesIndex() {
  return (
    <div className="mx-auto max-w-3xl px-6 py-14">
      <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]"
          >
            <span className="mono text-[10.5px] uppercase tracking-wider text-[--color-fg-subtle]">
              {g.tag}
            </span>
            <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>
  );
}