import type React from 'react';
import Link from 'next/link';

interface FreeTierLimit {
  feature: string;
  limit: string;
}

const freeTierLimits: FreeTierLimit[] = [
  { feature: 'Registered agents', limit: '10' },
  { feature: 'API calls per day', limit: '1,000' },
  { feature: 'OAuth 2.0 token issuance', limit: 'Included' },
  { feature: 'W3C DID documents', limit: 'Included' },
  { feature: 'Audit log retention', limit: '7 days' },
  { feature: 'Webhook events', limit: 'Not included' },
  { feature: 'OIDC provider', limit: 'Not included' },
  { feature: 'AGNTCY federation', limit: 'Not included' },
  { feature: 'SOC 2 compliance reports', limit: 'Not included' },
  { feature: 'Priority support', limit: 'Not included' },
];

const paidFeatures: string[] = [
  'Unlimited agents',
  'Unlimited API calls',
  '90-day audit log retention',
  'Webhook event streaming',
  'OIDC provider integration',
  'AGNTCY federation',
  'SOC 2 Type II compliance reports',
  'Custom rate limit policies',
  'Dedicated SLA & priority support',
  'SSO / SAML for team access',
];

export default function PricingPage(): React.ReactElement {
  return (
    <div className="px-6 py-20">
      <div className="mx-auto max-w-5xl">
        <div className="mb-12 text-center">
          <h1 className="mb-4 text-4xl font-extrabold text-slate-900">
            Simple, Transparent Pricing
          </h1>
          <p className="text-xl text-slate-600">
            Start free. Upgrade when you grow.
          </p>
        </div>

        <div className="grid gap-8 md:grid-cols-2">
          {/* Free Tier */}
          <div className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
            <div className="mb-6">
              <h2 className="text-2xl font-bold text-slate-900">Free</h2>
              <p className="mt-1 text-slate-500">
                Perfect for development and testing
              </p>
              <div className="mt-4 flex items-baseline gap-1">
                <span className="text-5xl font-extrabold text-slate-900">
                  $0
                </span>
                <span className="text-slate-500">/ month</span>
              </div>
            </div>

            <Link
              href="/get-started"
              className="mb-8 block w-full rounded-lg border border-brand-600 py-3 text-center font-semibold text-brand-600 transition-colors hover:bg-brand-50"
            >
              Get Started Free
            </Link>

            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-500">
              Free tier limits
            </h3>
            <div className="overflow-hidden rounded-xl border border-slate-200">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-slate-50">
                    <th className="px-4 py-3 text-left font-semibold text-slate-700">
                      Feature
                    </th>
                    <th className="px-4 py-3 text-right font-semibold text-slate-700">
                      Limit
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {freeTierLimits.map(({ feature, limit }, i) => (
                    <tr
                      key={feature}
                      className={i % 2 === 0 ? 'bg-white' : 'bg-slate-50'}
                    >
                      <td className="px-4 py-3 text-slate-700">{feature}</td>
                      <td className="px-4 py-3 text-right font-medium text-slate-900">
                        {limit}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Paid Tier */}
          <div className="relative rounded-2xl border-2 border-brand-500 bg-gradient-to-b from-brand-50 to-white p-8 shadow-lg">
            <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-brand-600 px-4 py-1 text-xs font-bold uppercase tracking-wider text-white">
              Most Popular
            </span>

            <div className="mb-6">
              <h2 className="text-2xl font-bold text-slate-900">Pro</h2>
              <p className="mt-1 text-slate-500">
                For production workloads and teams
              </p>
              <div className="mt-4 flex items-baseline gap-1">
                <span className="text-5xl font-extrabold text-slate-900">
                  Custom
                </span>
              </div>
              <p className="mt-1 text-sm text-slate-500">
                Contact us for volume pricing
              </p>
            </div>

            <a
              href="mailto:sales@sentryagent.ai"
              className="mb-8 block w-full rounded-lg bg-brand-600 py-3 text-center font-semibold text-white shadow-md transition-colors hover:bg-brand-700"
            >
              Contact Sales
            </a>

            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-500">
              Everything in Free, plus
            </h3>
            <ul className="space-y-3">
              {paidFeatures.map((feature) => (
                <li key={feature} className="flex items-start gap-3 text-sm">
                  <span className="mt-0.5 flex-shrink-0 text-brand-600">
                    &#10003;
                  </span>
                  <span className="text-slate-700">{feature}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* FAQ nudge */}
        <p className="mt-12 text-center text-slate-500">
          Questions about pricing?{' '}
          <a
            href="mailto:sales@sentryagent.ai"
            className="font-medium text-brand-600 hover:underline"
          >
            Talk to our team
          </a>
        </p>
      </div>
    </div>
  );
}