xiaso-flnxi-website/components/CostComparison.tsx

'use client'

import { Check, X, TrendingDown, AlertCircle } from 'lucide-react'

const comparisonData = {
  cloudStorage: {
    name: '传统云存储方案',
    color: 'from-red-500 to-orange-500',
    items: [
      { label: '10TB存储空间/年', cost: '¥48,000', icon: X, negative: true },
      { label: '流量费用/年', cost: '¥36,000', icon: X, negative: true },
      { label: '数据库服务/年', cost: '¥18,000', icon: X, negative: true },
      { label: '服务器租用/年', cost: '¥12,000', icon: X, negative: true },
      { label: '维护人员成本/年', cost: '¥60,000', icon: X, negative: true },
      { label: '3年总成本', cost: '¥522,000', highlight: true, icon: X, negative: true },
    ],
    cons: [
      '数据存储在第三方，安全风险高',
      '流量费用不可控，用得越多越贵',
      '需要专业IT人员维护',
      '续费涨价，被平台绑架',
    ]
  },
  ourSolution: {
    name: 'FLNXI素材系统',
    color: 'from-green-500 to-emerald-500',
    items: [
      { label: '系统使用权（永久）', cost: '¥1,999', icon: Check },
      { label: '使用现有NAS', cost: '¥0', icon: Check },
      { label: '内网流量', cost: '¥0', icon: Check },
      { label: '外网流量', cost: '¥0', icon: Check },
      { label: '维护成本', cost: '¥0', icon: Check },
      { label: '3年总成本', cost: '¥1,999', highlight: true, icon: Check },
    ],
    pros: [
      '数据100%私有，完全掌控',
      '无流量限制，随便用',
      '0IT门槛，运营人员也能管',
      '一次付费永久用，无套路',
    ]
  }
}

export default function CostComparison() {
  return (
    <section id="cost-comparison" className="py-24 bg-gradient-to-b from-apple-gray-50 to-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center space-x-2 bg-green-50 px-4 py-2 rounded-full mb-4">
            <TrendingDown className="w-5 h-5 text-green-600" />
            <span className="text-sm font-semibold text-green-700">
              3年节省52万元
            </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">
            同样的功能，为什么要多花50万？用您现有的NAS，成本降低99%
          </p>
        </div>

        {/* Comparison Cards */}
        <div className="grid md:grid-cols-2 gap-8 mb-12">
          {/* Cloud Storage */}
          <div className="relative bg-white rounded-3xl p-8 border-2 border-red-200 overflow-hidden">
            <div className="absolute top-0 right-0 bg-red-500 text-white px-4 py-1 text-sm font-semibold rounded-bl-2xl">
              传统方案
            </div>
            
            <div className="mt-8">
              <h3 className="text-2xl font-bold text-apple-gray-900 mb-2">
                {comparisonData.cloudStorage.name}
              </h3>
              <p className="text-apple-gray-600 mb-6">
                使用阿里云/腾讯云等云存储服务
              </p>

              {/* Cost Items */}
              <div className="space-y-3 mb-8">
                {comparisonData.cloudStorage.items.map((item, index) => {
                  const Icon = item.icon
                  return (
                    <div 
                      key={index}
                      className={`flex items-center justify-between p-3 rounded-xl ${
                        item.highlight ? 'bg-red-50 border-2 border-red-300' : 'bg-gray-50'
                      }`}
                    >
                      <div className="flex items-center space-x-3">
                        <Icon className={`w-5 h-5 ${item.negative ? 'text-red-500' : 'text-gray-400'}`} />
                        <span className={`${item.highlight ? 'font-bold text-apple-gray-900' : 'text-apple-gray-700'}`}>
                          {item.label}
                        </span>
                      </div>
                      <span className={`font-bold ${item.highlight ? 'text-2xl text-red-600' : 'text-lg text-apple-gray-900'}`}>
                        {item.cost}
                      </span>
                    </div>
                  )
                })}
              </div>

              {/* Cons */}
              <div className="space-y-2">
                <h4 className="font-semibold text-apple-gray-900 mb-3 flex items-center">
                  <AlertCircle className="w-4 h-4 text-red-500 mr-2" />
                  主要问题
                </h4>
                {comparisonData.cloudStorage.cons.map((con, index) => (
                  <div key={index} className="flex items-start space-x-2 text-sm text-apple-gray-600">
                    <X className="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" />
                    <span>{con}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Our Solution */}
          <div className="relative bg-gradient-to-br from-green-50 to-emerald-50 rounded-3xl p-8 border-2 border-green-300 overflow-hidden apple-shadow-lg">
            <div className="absolute top-0 right-0 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-2 text-sm font-bold rounded-bl-2xl flex items-center space-x-1">
              <span>🎉</span>
              <span>推荐方案</span>
            </div>
            
            <div className="mt-8">
              <h3 className="text-2xl font-bold text-apple-gray-900 mb-2">
                {comparisonData.ourSolution.name}
              </h3>
              <p className="text-apple-gray-600 mb-6">
                基于企业现有NAS设备部署
              </p>

              {/* Cost Items */}
              <div className="space-y-3 mb-8">
                {comparisonData.ourSolution.items.map((item, index) => {
                  const Icon = item.icon
                  return (
                    <div 
                      key={index}
                      className={`flex items-center justify-between p-3 rounded-xl ${
                        item.highlight ? 'bg-gradient-to-r from-green-100 to-emerald-100 border-2 border-green-400' : 'bg-white/50'
                      }`}
                    >
                      <div className="flex items-center space-x-3">
                        <Icon className="w-5 h-5 text-green-600" />
                        <span className={`${item.highlight ? 'font-bold text-apple-gray-900' : 'text-apple-gray-700'}`}>
                          {item.label}
                        </span>
                      </div>
                      <span className={`font-bold ${item.highlight ? 'text-2xl text-green-600' : 'text-lg text-green-600'}`}>
                        {item.cost}
                      </span>
                    </div>
                  )
                })}
              </div>

              {/* Pros */}
              <div className="space-y-2">
                <h4 className="font-semibold text-apple-gray-900 mb-3 flex items-center">
                  <Check className="w-4 h-4 text-green-600 mr-2" />
                  核心优势
                </h4>
                {comparisonData.ourSolution.pros.map((pro, index) => (
                  <div key={index} className="flex items-start space-x-2 text-sm text-apple-gray-700 font-medium">
                    <Check className="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5" />
                    <span>{pro}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Highlight */}
        <div className="bg-gradient-to-r from-apple-blue to-blue-600 rounded-2xl p-8 text-white text-center apple-shadow-lg">
          <div className="max-w-3xl mx-auto">
            <h4 className="text-3xl font-bold mb-4">
              3年节省 <span className="text-yellow-300">¥520,000</span>
            </h4>
            <p className="text-lg text-white/90 mb-6">
              这笔钱可以：招聘1名设计师 + 购买10台高配电脑 + 团队旅游2次 + 还剩30万
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <a
                href="http://sc.flnxi.com"
                target="_blank"
                rel="noopener noreferrer"
                className="px-8 py-4 bg-white text-apple-blue rounded-full font-semibold button-hover apple-shadow"
              >
                立即体验，看看是不是真的
              </a>
              <a
                href="#pricing"
                className="px-8 py-4 bg-white/10 backdrop-blur-sm text-white rounded-full font-semibold border-2 border-white/30 hover:bg-white/20 transition-all"
              >
                查看价格
              </a>
            </div>
          </div>
        </div>

        {/* FAQ Note */}
        <div className="mt-8 text-center">
          <p className="text-sm text-apple-gray-500">
            * 云存储成本基于阿里云、腾讯云2025年公开价格计算，不同配置价格会有差异
          </p>
        </div>
      </div>
    </section>
  )
}