'use client'

import { 
  Rocket,
  Code2,
  DollarSign,
  Zap,
  Shield,
  FileType,
  Network,
  Lock
} from 'lucide-react'

const features = [
  {
    icon: Rocket,
    title: '10分钟极速部署',
    subtitle: '一键Docker部署，新手也能搞定',
    description: '复制一条命令，回车，等10分钟。不需要配置服务器、不需要安装数据库、不需要懂Linux。Docker自动完成所有配置，真正的开箱即用',
    color: 'from-blue-500 to-cyan-500',
    highlight: '比传统部署快100倍',
  },
  {
    icon: Code2,
    title: '0代码配置',
    subtitle: '完全可视化，告别命令行',
    description: '全程Web界面操作，上传、编辑、管理都是点点鼠标。0IT经验的运营人员5分钟就能学会使用，不需要技术人员维护',
    color: 'from-purple-500 to-pink-500',
    highlight: '小团队的最佳选择',
  },
  {
    icon: DollarSign,
    title: '年省10万+成本',
    subtitle: '用你的NAS，不花冤枉钱',
    description: '直接使用企业现有NAS设备，无需购买云存储。10TB文件一年云存储费用约12万，推广期只需¥599一次付费，永久使用',
    color: 'from-green-500 to-emerald-500',
    highlight: '节省90%存储成本',
  },
  {
    icon: Zap,
    title: '内外网极速访问',
    subtitle: '局域网和外网都飞快',
    description: '内网访问直连NAS，速度可达100MB/s+。外网访问经过智能优化，支持断点续传。无论团队在哪里，都能高速上传下载',
    color: 'from-orange-500 to-red-500',
    highlight: '比云存储快5-10倍',
  },
  {
    icon: Shield,
    title: '数据100%安全',
    subtitle: '私有化部署，完全掌控',
    description: '数据存在自己的NAS上，不经过任何第三方。支持内网部署，外网完全访问不到。配合企业防火墙，安全级别等同银行系统',
    color: 'from-red-500 to-pink-500',
    highlight: '永不担心数据泄露',
  },
  {
    icon: FileType,
    title: '6大格式全支持',
    subtitle: '电商素材一网打尽',
    description: '3DMAX、PSD、AI、CAD、C4D及其他格式全面支持。智能识别文件类型，3DMAX自动显示渲染器选项。一个系统管理所有设计素材',
    color: 'from-yellow-500 to-orange-500',
    highlight: '告别文件混乱',
  },
  {
    icon: Network,
    title: '多人协同不冲突',
    subtitle: '10人同时用也不卡',
    description: '支持多用户同时上传、编辑、下载，权限管理清晰。文件版本自动管理，永不覆盖误删。设计师、运营、老板各司其职',
    color: 'from-indigo-500 to-blue-500',
    highlight: '团队效率提升3倍',
  },
  {
    icon: Lock,
    title: '企业级权限管理',
    subtitle: '该看的看，不该看的看不到',
    description: '管理员、上传者、浏览者三级权限。支持部门隔离，A部门看不到B部门的文件。操作日志完整记录，谁改了什么一清二楚',
    color: 'from-teal-500 to-green-500',
    highlight: '数据安全有保障',
  },
]

export default function Features() {
  return (
    <section id="features" className="py-24 bg-gradient-to-b from-white to-apple-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-base text-apple-blue font-semibold tracking-wide uppercase mb-3">
            为什么选择我们
          </h2>
          <h3 className="text-4xl sm:text-5xl font-bold text-apple-gray-900 mb-4">
            8大核心优势，为电商团队量身打造
          </h3>
          <p className="text-xl text-apple-gray-600 max-w-3xl mx-auto">
            不需要IT经验，不需要高额投入，10分钟就能拥有企业级素材管理系统
          </p>
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {features.map((feature, index) => {
            const Icon = feature.icon
            return (
              <div
                key={feature.title}
                className="group relative bg-white rounded-3xl p-8 hover:apple-shadow-lg transition-all duration-300 cursor-pointer border border-apple-gray-100 hover:border-transparent"
                style={{
                  animationDelay: `${index * 0.1}s`,
                }}
              >
                {/* Gradient Border Effect */}
                <div 
                  className="absolute inset-0 rounded-3xl opacity-0 group-hover:opacity-10 transition-opacity duration-300 -z-10"
                  style={{
                    background: `linear-gradient(135deg, ${feature.color.split(' ')[1]} 0%, ${feature.color.split(' ')[3]} 100%)`,
                  }}
                />

                <div className="flex items-start space-x-4">
                  {/* Icon */}
                  <div className={`flex-shrink-0 w-14 h-14 rounded-2xl bg-gradient-to-br ${feature.color} flex items-center justify-center group-hover:scale-110 transition-transform duration-300 apple-shadow`}>
                    <Icon className="w-7 h-7 text-white" strokeWidth={2.5} />
                  </div>

                  {/* Content */}
                  <div className="flex-1">
                    <div className="flex items-start justify-between mb-2">
                      <h4 className="text-xl font-bold text-apple-gray-900 group-hover:text-apple-blue transition-colors">
                        {feature.title}
                      </h4>
                      <span className="inline-block px-3 py-1 bg-green-50 text-green-700 text-xs font-semibold rounded-full border border-green-200 whitespace-nowrap ml-2">
                        {feature.highlight}
                      </span>
                    </div>
                    
                    <p className="text-sm text-apple-blue font-semibold mb-3">
                      {feature.subtitle}
                    </p>
                    
                    <p className="text-sm text-apple-gray-600 leading-relaxed">
                      {feature.description}
                    </p>
                  </div>
                </div>
              </div>
            )
          })}
        </div>

        {/* Version Comparison */}
        <div className="mt-16 mb-12">
          <h3 className="text-3xl font-bold text-center text-apple-gray-900 mb-8">
            免费版 vs 付费版功能对比
          </h3>
          <div className="max-w-5xl mx-auto bg-white rounded-3xl p-8 apple-shadow-lg">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {/* 功能列 */}
              <div className="space-y-4">
                <div className="font-bold text-apple-gray-900 mb-6">核心功能</div>
                <div className="text-sm text-apple-gray-700 py-2">团队人数</div>
                <div className="text-sm text-apple-gray-700 py-2">素材数量</div>
                <div className="text-sm text-apple-gray-700 py-2">部署方式</div>
                <div className="text-sm text-apple-gray-700 py-2">素材格式</div>
                <div className="text-sm text-apple-gray-700 py-2">NAS存储</div>
                <div className="text-sm text-apple-gray-700 py-2">权限管理</div>
                <div className="text-sm text-apple-gray-700 py-2">AI功能</div>
                <div className="text-sm text-apple-gray-700 py-2">部门隔离</div>
                <div className="text-sm text-apple-gray-700 py-2">数据分析</div>
                <div className="text-sm text-apple-gray-700 py-2">技术支持</div>
              </div>

              {/* 免费版 */}
              <div className="bg-green-50 rounded-2xl p-6 border-2 border-green-200">
                <div className="font-bold text-green-600 mb-6 text-center">免费版 ¥0</div>
                <div className="text-sm text-center py-2">最多10人</div>
                <div className="text-sm text-center py-2">最多100个</div>
                <div className="text-sm text-center py-2">✅ Docker</div>
                <div className="text-sm text-center py-2">✅ 6大格式</div>
                <div className="text-sm text-center py-2">✅ 支持</div>
                <div className="text-sm text-center py-2">✅ 基础</div>
                <div className="text-sm text-center py-2">❌</div>
                <div className="text-sm text-center py-2">❌</div>
                <div className="text-sm text-center py-2">❌</div>
                <div className="text-sm text-center py-2">社区</div>
              </div>

              {/* 付费版 */}
              <div className="bg-blue-50 rounded-2xl p-6 border-2 border-blue-200">
                <div className="font-bold text-apple-blue mb-6 text-center">标准版 ¥599</div>
                <div className="text-sm text-center py-2 font-semibold text-blue-600">无限制</div>
                <div className="text-sm text-center py-2 font-semibold text-blue-600">无限制</div>
                <div className="text-sm text-center py-2">✅ Docker</div>
                <div className="text-sm text-center py-2">✅ 6大格式</div>
                <div className="text-sm text-center py-2">✅ 支持</div>
                <div className="text-sm text-center py-2">✅ 高级</div>
                <div className="text-sm text-center py-2 font-semibold text-blue-600">✅ Gemini</div>
                <div className="text-sm text-center py-2 font-semibold text-blue-600">✅ 支持</div>
                <div className="text-sm text-center py-2 font-semibold text-blue-600">✅ 支持</div>
                <div className="text-sm text-center py-2 font-semibold text-blue-600">24/7</div>
              </div>
            </div>

            <div className="mt-8 text-center">
              <p className="text-sm text-apple-gray-600 mb-4">
                💡 <strong>免费版可随时升级付费版</strong>，数据无缝迁移，只需购买授权码激活
              </p>
              <a
                href="#pricing"
                className="inline-flex items-center px-6 py-3 bg-apple-blue text-white rounded-full font-semibold button-hover apple-shadow"
              >
                查看详细价格 →
              </a>
            </div>
          </div>
        </div>

        {/* Bottom CTA */}
        <div className="mt-16 text-center">
          <div className="inline-flex flex-col sm:flex-row items-center gap-4 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl p-8 text-white apple-shadow-lg">
            <div className="text-left">
              <h4 className="text-2xl font-bold mb-2">从免费版开始，零风险体验！</h4>
              <p className="text-white/90">
                10人团队100个素材永久免费，满意后再升级付费版
              </p>
            </div>
            <a
              href="http://sc.flnxi.com"
              target="_blank"
              rel="noopener noreferrer"
              className="flex-shrink-0 px-8 py-4 bg-white text-green-600 rounded-full font-semibold button-hover apple-shadow whitespace-nowrap"
            >
              立即免费体验 →
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}