import { TIERS } from '@/lib/pricing';
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 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: 'Daily build and analysis limits return a 429 with a clear upgrade hint. Monthly tool-call volumes are generous soft limits — we reach out before anything is capped.',
  },
  {
    q: 'Annual billing?',
    a: 'Annual plans are coming — contact us for annual invoicing today. 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>
  );
}