xiaso-flnxi-website/components/Pricing.tsx

'use client'

import { Check, Star, Sparkles, Zap, TrendingUp, AlertCircle } from 'lucide-react'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'

const freeFeatures = [
  { text: '✅ 永久免费使用，0成本体验', highlight: true },
  { text: '✅ 10人团队协作', highlight: true },
  { text: '✅ 100个素材上传限制', highlight: true },
  { text: '✅ 支持6大素材格式（3DMAX/PSD/AI/CAD/C4D/其他）' },
  { text: '✅ 10分钟Docker一键部署' },
  { text: '✅ 0代码配置，可视化操作' },
  { text: '✅ 基于企业NAS存储，数据私有化' },
  { text: '✅ 内外网高速访问' },
  { text: '✅ 基础权限管理' },
  { text: '✅ 社区技术支持' },
  { text: '⚠️ 不支持AI功能' },
  { text: '⚠️ 不支持高级权限（部门隔离）' },
]

const standardFeatures = [
  { text: '永久使用权，买断制', highlight: true },
  { text: '无限团队人数', highlight: true },
  { text: '无限素材数量', highlight: true },
  { text: '免费版所有功能' },
  { text: 'AI智能体（Gemini集成，素材改图）' },
  { text: '高级权限管理（部门隔离、角色分配）' },
  { text: '模板管理 + 自定义字段' },
  { text: '数据分析报表' },
  { text: '批量操作 + 版本管理' },
  { text: '24/7技术支持（工作日优先响应）' },
  { text: '永久免费功能更新' },
  { text: '完整部署文档 + 在线培训' },
]

const customFeatures = [
  '包含标准版所有功能',
  '✨ UI界面定制（匹配企业VI）',
  '✨ 专属功能开发',
  '✨ 第三方系统对接（ERP/CRM）',
  '✨ 数据分析报表定制',
  '✨ 高级权限系统（部门隔离）',
  '✨ 专属技术支持（1对1服务）',
  '✨ 驻场部署指导',
]

export default function Pricing() {
  const { data: session, status } = useSession()
  const router = useRouter()

  const handlePurchaseClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault()
    
    if (status === 'loading') {
      return
    }
    
    if (!session) {
      // 未登录，跳转到登录页
      router.push('/auth/signin?callbackUrl=' + encodeURIComponent('/#contact'))
    } else {
      // 已登录，跳转到联系部分
      window.location.href = '#contact'
    }
  }

  return (
    <section id="pricing" className="py-24 bg-gradient-to-b from-white to-apple-gray-50 relative overflow-hidden">
      {/* Background Elements */}
      <div className="absolute top-0 left-1/4 w-96 h-96 bg-apple-blue/5 rounded-full blur-3xl" />
      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl" />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-12">
          <div className="inline-flex items-center space-x-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-4 py-2 rounded-full mb-4">
            <TrendingUp className="w-4 h-4" />
            <span className="text-sm font-semibold">
              比云存储方案节省99%成本
            </span>
          </div>
          <h2 className="text-4xl sm:text-5xl font-bold text-apple-gray-900 mb-4">
            简单透明的价格方案
          </h2>
          <p className="text-xl text-apple-gray-600 max-w-2xl mx-auto">
            免费版永久使用 · 付费版推广期超值特惠 · 一次付费永久使用
          </p>
        </div>

        {/* Pricing Comparison */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto mb-12">
          {/* Free Edition */}
          <div className="relative bg-gradient-to-br from-white to-green-50 rounded-3xl p-8 border-2 border-green-200 apple-shadow hover:scale-[1.02] transition-all duration-300">
            {/* Badge */}
            <div className="absolute -top-4 left-1/2 -translate-x-1/2">
              <div className="flex items-center space-x-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-2 rounded-full text-sm font-bold apple-shadow">
                <Sparkles className="w-4 h-4" />
                <span>永久免费</span>
              </div>
            </div>

            {/* Header */}
            <div className="text-center mb-8 mt-4">
              <h4 className="text-3xl font-bold text-apple-gray-900 mb-4">
                免费版
              </h4>
              
              {/* Price */}
              <div className="mb-4">
                <div className="flex items-baseline justify-center space-x-2 mb-2">
                  <span className="text-6xl font-bold bg-gradient-to-r from-green-500 to-emerald-600 bg-clip-text text-transparent">
                    ¥0
                  </span>
                </div>
                <div className="flex items-center justify-center space-x-2 text-green-600 font-semibold mb-2">
                  <Zap className="w-4 h-4" />
                  <span>永久免费，0成本体验</span>
                </div>
                <p className="text-apple-gray-500 text-sm">
                  适合小团队试用和体验
                </p>
              </div>

              {/* Quick Stats */}
              <div className="grid grid-cols-2 gap-3 mb-6">
                <div className="bg-green-50 rounded-xl p-3 border border-green-200">
                  <div className="text-2xl font-bold text-green-600">10人</div>
                  <div className="text-xs text-apple-gray-600">团队人数</div>
                </div>
                <div className="bg-green-50 rounded-xl p-3 border border-green-200">
                  <div className="text-2xl font-bold text-green-600">100个</div>
                  <div className="text-xs text-apple-gray-600">素材数量</div>
                </div>
              </div>
            </div>

            {/* Features */}
            <div className="space-y-3 mb-8">
              {freeFeatures.map((feature, index) => (
                <div 
                  key={index} 
                  className={`flex items-start space-x-3 ${feature.highlight ? 'bg-green-50 p-3 rounded-xl border border-green-200' : ''}`}
                >
                  <Check className={`w-5 h-5 flex-shrink-0 mt-0.5 ${feature.highlight ? 'text-green-600' : 'text-green-500'}`} />
                  <span className={`text-sm ${feature.highlight ? 'font-semibold text-apple-gray-900' : 'text-apple-gray-700'}`}>
                    {feature.text}
                  </span>
                </div>
              ))}
            </div>

            {/* CTA Button */}
            <a
              href="http://sc.flnxi.com"
              target="_blank"
              rel="noopener noreferrer"
              className="block w-full py-4 bg-gradient-to-r from-green-500 to-emerald-600 text-white text-center rounded-full font-bold text-lg button-hover apple-shadow-lg"
            >
              立即免费体验
            </a>

            <p className="text-center text-sm text-apple-gray-500 mt-4">
              无需注册，立即可用
            </p>
          </div>

          {/* Standard Edition */}
          <div className="relative bg-gradient-to-br from-white to-blue-50 rounded-3xl p-8 border-2 border-blue-200 apple-shadow-lg hover:scale-[1.02] transition-all duration-300">
            {/* Popular Badge */}
            <div className="absolute -top-4 left-1/2 -translate-x-1/2">
              <div className="flex items-center space-x-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-2 rounded-full text-sm font-bold apple-shadow">
                <Star className="w-4 h-4 fill-current" />
                <span>🔥 99%客户选择</span>
              </div>
            </div>

            {/* Header */}
            <div className="text-center mb-8 mt-4">
              <h4 className="text-3xl font-bold text-apple-gray-900 mb-4">
                标准版
              </h4>
              
              {/* Price */}
              <div className="mb-4">
                <div className="flex items-baseline justify-center space-x-2 mb-2">
                  <span className="text-2xl text-apple-gray-400 line-through">¥4,999</span>
                  <span className="text-6xl font-bold bg-gradient-to-r from-red-500 to-orange-600 bg-clip-text text-transparent">
                    ¥599
                  </span>
                </div>
                <div className="flex items-center justify-center space-x-2 text-red-600 font-semibold mb-2">
                  <Zap className="w-4 h-4" />
                  <span>🔥 推广期限时特惠，立省¥4,400</span>
                </div>
                <p className="text-apple-gray-500 text-sm">
                  买断制 · 永久使用 · 无任何后续费用
                </p>
              </div>

              {/* Quick Stats */}
              <div className="grid grid-cols-3 gap-3 mb-6">
                <div className="bg-blue-50 rounded-xl p-3 border border-blue-200">
                  <div className="text-2xl font-bold text-apple-blue">∞</div>
                  <div className="text-xs text-apple-gray-600">无限人数</div>
                </div>
                <div className="bg-green-50 rounded-xl p-3 border border-green-200">
                  <div className="text-2xl font-bold text-green-600">∞</div>
                  <div className="text-xs text-apple-gray-600">无限素材</div>
                </div>
                <div className="bg-purple-50 rounded-xl p-3 border border-purple-200">
                  <div className="text-2xl font-bold text-purple-600">AI</div>
                  <div className="text-xs text-apple-gray-600">智能功能</div>
                </div>
              </div>
            </div>

            {/* Features */}
            <div className="space-y-3 mb-8">
              {standardFeatures.map((feature, index) => (
                <div 
                  key={index} 
                  className={`flex items-start space-x-3 ${feature.highlight ? 'bg-green-50 p-3 rounded-xl border border-green-200' : ''}`}
                >
                  <Check className={`w-5 h-5 flex-shrink-0 mt-0.5 ${feature.highlight ? 'text-green-600' : 'text-green-500'}`} />
                  <span className={`${feature.highlight ? 'font-semibold text-apple-gray-900' : 'text-apple-gray-700'}`}>
                    {feature.text}
                  </span>
                </div>
              ))}
            </div>

            {/* CTA Button */}
            <a
              href="#contact"
              onClick={handlePurchaseClick}
              className="block w-full py-4 bg-gradient-to-r from-apple-blue to-blue-600 text-white text-center rounded-full font-bold text-lg button-hover apple-shadow-lg cursor-pointer"
            >
              {status === 'loading' ? '加载中...' : session ? '立即购买' : '登录后购买'}
            </a>

            <p className="text-center text-sm text-apple-gray-500 mt-4">
              支持对公转账 / 微信 / 支付宝
            </p>
          </div>

          {/* Custom Edition */}
          <div className="relative bg-gradient-to-br from-white to-purple-50 rounded-3xl p-8 border-2 border-purple-200 apple-shadow">
            {/* Badge */}
            <div className="absolute -top-4 left-1/2 -translate-x-1/2">
              <div className="flex items-center space-x-2 bg-gradient-to-r from-purple-500 to-pink-600 text-white px-6 py-2 rounded-full text-sm font-bold apple-shadow">
                <Sparkles className="w-4 h-4" />
                <span>企业定制</span>
              </div>
            </div>

            {/* Header */}
            <div className="text-center mb-8 mt-4">
              <h4 className="text-3xl font-bold text-apple-gray-900 mb-4">
                定制版
              </h4>
              
              {/* Price */}
              <div className="mb-6">
                <div className="text-4xl font-bold text-purple-600 mb-2">
                  面议
                </div>
                <p className="text-apple-gray-600 text-sm">
                  根据需求定制报价 · 专属技术团队服务
                </p>
              </div>
            </div>

            {/* Features */}
            <div className="space-y-3 mb-8">
              {customFeatures.map((feature, index) => (
                <div key={index} className="flex items-start space-x-3">
                  <Check className="w-5 h-5 text-purple-500 flex-shrink-0 mt-0.5" />
                  <span className="text-apple-gray-700">{feature}</span>
                </div>
              ))}
            </div>

            {/* CTA Button */}
            <a
              href="#contact"
              onClick={handlePurchaseClick}
              className="block w-full py-4 bg-gradient-to-r from-purple-500 to-pink-600 text-white text-center rounded-full font-bold text-lg button-hover apple-shadow-lg cursor-pointer"
            >
              {status === 'loading' ? '加载中...' : session ? '咨询定制方案' : '登录后咨询'}
            </a>

            <p className="text-center text-sm text-apple-gray-500 mt-4">
              1-3个工作日内回复报价方案
            </p>
          </div>
        </div>

        {/* 远程部署服务 */}
        <div className="max-w-4xl mx-auto mb-12">
          <div className="bg-gradient-to-br from-orange-50 to-amber-50 rounded-3xl p-8 border-2 border-orange-200 apple-shadow-lg">
            <div className="flex flex-col md:flex-row items-center gap-6">
              {/* 左侧图标和标题 */}
              <div className="flex-shrink-0 text-center md:text-left">
                <div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-amber-600 rounded-2xl flex items-center justify-center mx-auto md:mx-0 mb-3">
                  <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                </div>
                <div className="text-3xl font-bold text-orange-600 mb-1">¥299</div>
                <div className="text-sm text-apple-gray-600">可选增值服务</div>
              </div>

              {/* 右侧内容 */}
              <div className="flex-1">
                <h4 className="text-2xl font-bold text-apple-gray-900 mb-3">
                  🎯 远程部署服务
                </h4>
                <p className="text-apple-gray-700 mb-4">
                  不懂技术？没时间折腾？我们的技术团队为您提供<strong>1对1远程部署服务</strong>，
                  30分钟内帮您完成系统安装配置，确保正常运行。
                </p>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
                  <div className="flex items-center text-sm text-apple-gray-700">
                    <Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
                    <span>远程连接您的服务器</span>
                  </div>
                  <div className="flex items-center text-sm text-apple-gray-700">
                    <Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
                    <span>安装Docker和依赖环境</span>
                  </div>
                  <div className="flex items-center text-sm text-apple-gray-700">
                    <Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
                    <span>配置NAS存储和数据库</span>
                  </div>
                  <div className="flex items-center text-sm text-apple-gray-700">
                    <Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
                    <span>系统启动并测试功能</span>
                  </div>
                  <div className="flex items-center text-sm text-apple-gray-700">
                    <Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
                    <span>基础使用培训（15分钟）</span>
                  </div>
                  <div className="flex items-center text-sm text-apple-gray-700">
                    <Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
                    <span>7天内免费二次调试</span>
                  </div>
                </div>
                <div className="flex items-center justify-between bg-white rounded-xl p-4 border border-orange-200">
                  <div>
                    <div className="text-sm text-apple-gray-600 mb-1">
                      💡 推荐：<strong className="text-orange-600">付费版 + 远程部署</strong>
                    </div>
                    <div className="text-xs text-apple-gray-500">
                      ¥599（软件）+ ¥299（部署）= ¥898，省时省心
                    </div>
                  </div>
                  <a
                    href="#contact"
                    onClick={handlePurchaseClick}
                    className="px-6 py-2 bg-gradient-to-r from-orange-500 to-amber-600 text-white rounded-full font-semibold text-sm button-hover apple-shadow whitespace-nowrap"
                  >
                    立即购买
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Guarantee Badges */}
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-5xl mx-auto mb-12">
          <div className="bg-white rounded-2xl p-6 text-center apple-shadow hover:apple-shadow-lg transition-all">
            <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
              <Check className="w-6 h-6 text-white" />
            </div>
            <h5 className="font-bold text-apple-gray-900 mb-2">永久使用权</h5>
            <p className="text-sm text-apple-gray-600">
              一次付费，永久使用。不是订阅制，是买断制
            </p>
          </div>

          <div className="bg-white rounded-2xl p-6 text-center apple-shadow hover:apple-shadow-lg transition-all">
            <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-full flex items-center justify-center mx-auto mb-4">
              <Zap className="w-6 h-6 text-white" />
            </div>
            <h5 className="font-bold text-apple-gray-900 mb-2">免费培训</h5>
            <p className="text-sm text-apple-gray-600">
              提供在线培训和部署指导，确保团队会用
            </p>
          </div>

          <div className="bg-white rounded-2xl p-6 text-center apple-shadow hover:apple-shadow-lg transition-all">
            <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full flex items-center justify-center mx-auto mb-4">
              <TrendingUp className="w-6 h-6 text-white" />
            </div>
            <h5 className="font-bold text-apple-gray-900 mb-2">永久更新</h5>
            <p className="text-sm text-apple-gray-600">
              系统持续升级，新功能免费获取
            </p>
          </div>
        </div>

        {/* FAQ / Notice */}
        <div className="max-w-4xl mx-auto space-y-6">
          {/* 版本对比说明 */}
          <div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-2xl p-8 border border-blue-200">
            <div className="flex items-start space-x-4">
              <Star className="w-6 h-6 text-apple-blue flex-shrink-0 mt-1" />
              <div>
                <h5 className="font-bold text-apple-gray-900 mb-3">如何选择合适的版本？</h5>
              <ul className="space-y-2 text-sm text-apple-gray-700">
                <li><strong>• 免费版：</strong>适合10人以下小团队，素材量不大（100个以内），想先体验系统功能</li>
                <li><strong>• 标准版（推广期）：</strong>原价¥4,999，限时¥599！适合成长型团队，素材量大（100+），需要AI功能和高级权限管理</li>
                <li><strong>• 定制版：</strong>适合大型企业，需要对接现有系统（ERP/CRM）或定制专属功能</li>
                <li className="text-red-600 font-semibold">⚠️ 推广期特惠名额有限，恢复原价后不再享受此优惠</li>
                <li className="text-green-600 font-semibold">💡 免费版可随时升级到付费版，数据无缝迁移，升级只需购买授权码</li>
              </ul>
              </div>
            </div>
          </div>

          {/* 购买须知 */}
          <div className="bg-blue-50 rounded-2xl p-8 border border-blue-200">
            <div className="flex items-start space-x-4">
              <AlertCircle className="w-6 h-6 text-blue-600 flex-shrink-0 mt-1" />
              <div>
                <h5 className="font-bold text-apple-gray-900 mb-3">购买须知</h5>
              <ul className="space-y-2 text-sm text-apple-gray-700">
                <li><strong>• 硬件要求：</strong>需要企业自备NAS设备（群晖、威联通等），用于存储素材文件</li>
                <li><strong>• 部署环境：</strong>支持任何可以运行Docker的服务器（Linux/Windows/Mac）</li>
                <li><strong>• 部署方式：</strong>提供详细文档自行部署（免费），或购买远程部署服务¥299</li>
                <li><strong>• 技术支持：</strong>付费版提供工作日24小时内响应，免费版提供社区支持</li>
                <li><strong>• 源码说明：</strong>我们销售的是使用权，不开放源代码，保证系统稳定性</li>
                <li><strong>• 升级政策：</strong>免费版随时可升级付费版，支付差价即可，数据完全保留</li>
              </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}