InfiniteCloud/components/Pricing.tsx

import { Check, Star, Zap } from 'lucide-react';

export default function Pricing() {
  const plans = [
    { 
      name: '基础版', 
      price: '¥100', 
      period: '/月',
      originalPrice: '¥120',
      description: '适合个人用户和小型项目',
      features: [
        '全球 20+ 节点接入',
        '基础智能路由',
        '社区支持',
        '基础监控面板',
        '5GB 月流量',
        '标准 SLA'
      ], 
      recommended: false,
      popular: false
    },
    { 
      name: '专业版', 
      price: '¥300', 
      period: '/月',
      originalPrice: '¥400',
      description: '适合中小企业和成长型项目',
      features: [
        '全球 50+ 节点接入',
        '高级智能路由',
        '实时监控面板',
        '邮件 + 电话支持',
        '50GB 月流量',
        '高级安全防护',
        'API 接口访问',
        '99.9% SLA 保障'
      ], 
      recommended: true,
      popular: true
    },
    { 
      name: '企业版', 
      price: '¥800', 
      period: '/月',
      originalPrice: '¥1000',
      description: '适合大型企业和关键业务',
      features: [
        '全球 100+ 节点接入',
        '专属线路优化',
        '7×24 专业技术支持',
        '定制 SLA 协议',
        '无限流量',
        '企业级安全防护',
        '专属客户经理',
        '定制化解决方案',
        '99.99% SLA 保障'
      ], 
      recommended: false,
      popular: false
    },
  ];

  return (
    <section className="px-6 py-16 bg-gradient-to-br from-gray-50 to-blue-50">
      <div className="max-w-screen-xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-primary mb-4">
            灵活的定价方案
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            选择最适合您业务需求的方案，所有方案都包含免费试用和专业技术支持
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {plans.map((plan, index) => (
            <div
              key={plan.name}
              className={`relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 ${
                plan.recommended 
                  ? 'ring-2 ring-accent scale-105' 
                  : 'hover:scale-105'
              }`}
            >
              {plan.popular && (
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                  <div className="bg-gradient-to-r from-accent to-blue-600 text-white px-6 py-2 rounded-full text-sm font-semibold flex items-center">
                    <Star className="w-4 h-4 mr-1" />
                    最受欢迎
                  </div>
                </div>
              )}
              
              <div className="p-8">
                <div className="text-center mb-8">
                  <h3 className="text-2xl font-bold text-primary mb-2">{plan.name}</h3>
                  <p className="text-gray-600 mb-4">{plan.description}</p>
                  
                  <div className="flex items-baseline justify-center mb-4">
                    <span className="text-4xl font-bold text-accent">{plan.price}</span>
                    <span className="text-gray-500 ml-1">{plan.period}</span>
                    {plan.originalPrice && (
                      <span className="text-lg text-gray-400 line-through ml-2">
                        {plan.originalPrice}
                      </span>
                    )}
                  </div>
                  
                  {plan.originalPrice && (
                    <div className="inline-flex items-center bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                      <Zap className="w-4 h-4 mr-1" />
                      限时优惠
                    </div>
                  )}
                </div>

                <ul className="space-y-4 mb-8">
                  {plan.features.map((feature, idx) => (
                    <li key={idx} className="flex items-start">
                      <Check className="w-5 h-5 text-green-500 mr-3 mt-0.5 flex-shrink-0" />
                      <span className="text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>

                <a
                  href="/contact"
                  className={`w-full block text-center py-3 px-6 rounded-xl font-semibold transition-all duration-300 ${
                    plan.recommended
                      ? 'bg-gradient-to-r from-accent to-blue-600 text-white hover:from-blue-600 hover:to-accent shadow-lg hover:shadow-xl'
                      : 'bg-gray-100 text-primary hover:bg-accent hover:text-white border border-gray-200 hover:border-accent'
                  }`}
                >
                  {plan.recommended ? '立即开始' : '选择方案'}
                </a>
              </div>
            </div>
          ))}
        </div>

        {/* 额外信息 */}
        <div className="mt-16 text-center">
          <div className="bg-white rounded-2xl p-8 shadow-lg max-w-4xl mx-auto">
            <h3 className="text-2xl font-bold text-primary mb-4">为什么选择我们？</h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🆓</span>
                </div>
                <h4 className="text-lg font-semibold mb-2">免费试用</h4>
                <p className="text-gray-600 text-sm">所有方案都提供 15 天免费试用</p>
              </div>
              
              <div className="text-center">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">💰</span>
                </div>
                <h4 className="text-lg font-semibold mb-2">年付优惠</h4>
                <p className="text-gray-600 text-sm">年付享受 88 折优惠，节省更多成本</p>
              </div>
              
              <div className="text-center">
                <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🔄</span>
                </div>
                <h4 className="text-lg font-semibold mb-2">随时升级</h4>
                <p className="text-gray-600 text-sm">支持随时升级或降级，灵活调整</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}