'use client'

import { 
  Upload,
  Search,
  Users,
  Shield,
  Zap,
  FileType
} from 'lucide-react'

const features = [
  {
    icon: Upload,
    title: '素材上传管理',
    description: '支持3DMAX、PSD、AI、CAD、C4D等6大格式。批量上传、自动缩略图、拖拽上传，单文件最大10GB。',
  },
  {
    icon: Search,
    title: '智能搜索筛选',
    description: '多维度搜索，按品牌、系列、分类快速筛选。支持模糊搜索和组合条件，秒级定位所需素材。',
  },
  {
    icon: Users,
    title: '团队协作',
    description: '多用户同时在线，权限管理清晰。支持点赞、收藏、评论，实时查看团队动态。',
  },
  {
    icon: FileType,
    title: '在线预览下载',
    description: '图片、视频在线预览，参数一目了然。一键下载原文件，支持批量下载和下载统计。',
  },
  {
    icon: Shield,
    title: '数据私有化',
    description: '部署在您的NAS上，数据100%掌控。支持内网部署，外网完全访问不到，银行级安全。',
  },
  {
    icon: Zap,
    title: '10分钟部署',
    description: '一键Docker部署，自动安装所有依赖。0代码配置，全Web界面操作，新手也能轻松搞定。',
  },
]

export default function FeaturesSimple() {
  return (
    <section id="features" className="py-20 bg-white">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <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>

        {/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => {
            const Icon = feature.icon
            return (
              <div
                key={feature.title}
                className="bg-gradient-to-br from-white to-apple-gray-50 rounded-2xl p-8 border border-apple-gray-200 hover:border-apple-blue hover:shadow-xl transition-all duration-300"
              >
                {/* Icon */}
                <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-apple-blue to-blue-600 flex items-center justify-center mb-4">
                  <Icon className="w-7 h-7 text-white" strokeWidth={2} />
                </div>

                {/* Content */}
                <h4 className="text-xl font-bold text-apple-gray-900 mb-3">
                  {feature.title}
                </h4>
                
                <p className="text-sm text-apple-gray-600 leading-relaxed">
                  {feature.description}
                </p>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}