export default function Pricing() {
  const plans = [
    { name: '基础版', price: '¥100/月', features: ['全球节点接入', '社区支持'], recommended: false },
    { name: '专业版', price: '¥300/月', features: ['智能路由', '高级面板', '邮件支持'], recommended: true },
    { name: '企业版', price: '¥800/月', features: ['专属线路', '24/7 支持', '定制 SLA'], recommended: false },
  ];
  return (
    <section className="px-6 py-section bg-background">
      <div className="max-w-screen-lg mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
        {plans.map(plan => (
          <div
            key={plan.name}
            className={`border p-6 rounded-lg flex flex-col justify-between ${
              plan.recommended ? 'border-accent shadow-lg' : 'border-gray-200'
            }`}
          >
            <div>
              <h3 className="text-2xl font-medium mb-2">{plan.name}</h3>
              <p className="text-3xl font-semibold mb-4">{plan.price}</p>
              <ul className="list-disc list-inside space-y-2 text-sm">
                {plan.features.map(f => <li key={f}>{f}</li>)}
              </ul>
            </div>
            <a
              href="/contact"
              className={`mt-6 px-4 py-2 rounded-lg text-center font-medium transition ${
                plan.recommended
                  ? 'bg-accent text-white hover:opacity-90'
                  : 'bg-transparent border border-primary hover:bg-primary hover:text-white'
              }`}
            >
              {plan.recommended ? '推荐' : '选择'}
            </a>
          </div>
        ))}
      </div>
    </section>
  );
}