buildmymcpserver/apps/web/app/(marketing)/pricing/page.tsx

import { pageMetadata } from '@/lib/seo';
import Link from 'next/link';

export const metadata = pageMetadata({
  title: 'Pricing',
  description:
    'BuildMyMCPServer pricing — start free with one hosted MCP server, scale to Pro, Team and Enterprise. Pay for tool calls, not boilerplate.',
  path: '/pricing',
});

const TIERS = [
  {
    name: 'Hobby',
    price: '€0',
    tag: 'Forever free',
    description: 'For trying things out and shipping single-user tools.',
    model: 'Open-tier AI',
    modelDetail: 'Free-tier model · ~30-60s analyze',
    features: [
      '1 MCP server',
      '100,000 tool calls / month',
      '5 prompt analyses / day',
      'BuildMyMCP subdomain',
      'Community support',
    ],
    cta: 'Start free',
    href: '/login',
  },
  {
    name: 'Pro',
    price: '€49',
    tag: '/ month',
    description: 'For solo founders and small teams shipping production tools.',
    model: 'Claude AI',
    modelDetail: 'Powered by Anthropic Claude · ~10–20s analyze',
    features: [
      '5 MCP servers',
      '1M tool calls / month',
      '40 prompt analyses / day',
      'Custom domain',
      'Priority build queue',
      'Email support, 1 business-day SLA',
    ],
    cta: 'Start Pro',
    href: '/settings/billing?tier=pro_monthly',
    highlight: true,
  },
  {
    name: 'Team',
    price: '€199',
    tag: '/ month',
    description: 'For teams with RBAC, audit, and 99.9% SLA needs.',
    model: 'Claude AI',
    modelDetail: "Anthropic's flagship quality",
    features: [
      '25 MCP servers',
      '10M tool calls / month',
      '50 prompt analyses / day',
      'RBAC + extended audit log',
      '99.9% uptime SLA',
      'Shared Slack channel support',
    ],
    cta: 'Start Team',
    href: '/settings/billing?tier=team_monthly',
  },
  {
    name: 'Enterprise',
    price: '€999+',
    tag: '/ month',
    description: 'For organizations bringing their own cloud, SSO and dedicated infra.',
    model: 'Claude AI',
    modelDetail: 'Top-tier Claude · EU data-residency option',
    features: [
      'Unlimited servers',
      'BYOC (AWS, GCP, Azure, Hetzner)',
      'SSO / SAML',
      'Dedicated cluster',
      'Customer success manager',
    ],
    cta: 'Contact sales',
    href: 'mailto:sales@buildmymcpserver.com',
  },
];

const FAQ = [
  {
    q: 'What counts as a tool call?',
    a: 'Every successful invocation of a tool exposed by your MCP server. Failed calls do not count.',
  },
  {
    q: 'What happens if I exceed my quota?',
    a: 'Hobby: 429 with a hint to upgrade. Pro/Team: overage at €0.02 per 1000 calls, billed the following month. Soft caps configurable.',
  },
  {
    q: 'Annual billing?',
    a: 'Yes — save 20% on Pro and Team paying annually. Enterprise is annual by default.',
  },
  {
    q: 'Plan changes?',
    a: 'Upgrade any time, pro-rated. Downgrade at end of billing period.',
  },
];

export default function Pricing() {
  return (
    <div className="mx-auto max-w-6xl px-6 py-16">
      <header className="mb-12 max-w-2xl">
        <div className="text-[11px] uppercase tracking-[0.16em] text-[--color-fg-subtle]">
          Pricing
        </div>
        <h1 className="mt-2 text-[36px] font-semibold leading-tight tracking-tight">
          Pay for tool calls, not boilerplate.
        </h1>
        <p className="mt-4 text-[15px] leading-relaxed text-[--color-fg-muted]">
          Build infinite servers, pay for the traffic they actually serve. Cancel any time, export
          everything, no lock-in.
        </p>
      </header>

      <div className="grid gap-3 md:grid-cols-4">
        {TIERS.map((t) => (
          <div
            key={t.name}
            className={`panel flex h-full flex-col p-5 ${t.highlight ? 'border-[--color-accent]/40' : ''}`}
          >
            <div className="text-[12px] uppercase tracking-wider text-[--color-fg-subtle]">
              {t.name}
            </div>
            <div className="mt-2 flex items-baseline gap-1">
              <span className="text-[28px] font-semibold tracking-tight">{t.price}</span>
              <span className="text-[12px] text-[--color-fg-subtle]">{t.tag}</span>
            </div>
            <p className="mt-2 text-[12px] leading-relaxed text-[--color-fg-muted]">
              {t.description}
            </p>
            <div className="mt-3 rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-2.5 py-1.5">
              <div className="text-[10.5px] uppercase tracking-wider text-[--color-fg-subtle]">
                AI model
              </div>
              <div className="mt-0.5 text-[12.5px] font-medium text-[--color-fg]">{t.model}</div>
              <div className="text-[10.5px] text-[--color-fg-subtle]">{t.modelDetail}</div>
            </div>
            <ul className="mt-4 space-y-1.5 text-[12.5px] text-[--color-fg-muted]">
              {t.features.map((f) => (
                <li key={f}>— {f}</li>
              ))}
            </ul>
            <Link
              href={t.href}
              className={`mt-6 inline-flex h-8 items-center justify-center rounded-md px-3 text-[12.5px] font-medium transition-colors duration-200 ${
                t.highlight
                  ? 'bg-[--color-accent] text-white hover:bg-[#5557e8]'
                  : 'border border-[--color-border] bg-[--color-bg-elevated] text-[--color-fg] hover:bg-[--color-bg-subtle]'
              }`}
            >
              {t.cta}
            </Link>
          </div>
        ))}
      </div>

      <section className="mt-20">
        <h2 className="text-[22px] font-semibold tracking-tight">Pricing FAQ</h2>
        <div className="mt-6 grid gap-x-12 gap-y-6 md:grid-cols-2">
          {FAQ.map((f) => (
            <div key={f.q}>
              <h3 className="text-[14px] font-semibold tracking-tight">{f.q}</h3>
              <p className="mt-1.5 text-[13px] leading-relaxed text-[--color-fg-muted]">{f.a}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}