'use client'

import { 
  Upload,
  Search,
  Tags,
  Download,
  Users,
  FolderTree,
  Sparkles,
  BarChart3,
  FileImage,
  Share2,
  Settings,
  Clock
} from 'lucide-react'

const coreFeatures = [
  {
    icon: Upload,
    title: '素材上传管理',
    description: '支持批量上传3DMAX、PSD、AI、CAD、C4D等6大格式文件。自动生成缩略图预览，支持拖拽上传，单文件最大支持10GB。上传时可添加品牌、系列、SKU等元数据信息。',
    features: ['批量上传', '自动缩略图', '元数据标注', '断点续传']
  },
  {
    icon: Search,
    title: '智能搜索筛选',
    description: '多维度搜索功能，支持按文件名、品牌、系列、分类、场景、平台等条件筛选。支持模糊搜索和组合筛选，快速定位所需素材。搜索结果可按时间、下载量、点赞数排序。',
    features: ['多维度筛选', '模糊搜索', '组合条件', '智能排序']
  },
  {
    icon: Tags,
    title: '分类标签体系',
    description: '灵活的分类和标签系统，支持自定义分类、场景、平台等。管理员可以创建和维护分类体系，用户上传时可选择或创建标签。支持标签云展示，热门标签一目了然。',
    features: ['自定义分类', '标签管理', '热门标签', '标签云展示']
  },
  {
    icon: FileImage,
    title: '在线预览下载',
    description: '支持图片、视频在线预览，无需下载即可查看。3D文件显示详细参数（渲染器、分辨率、渲染时间等）。一键下载原文件，支持批量下载。下载记录自动统计。',
    features: ['在线预览', '参数展示', '批量下载', '下载统计']
  },
  {
    icon: Users,
    title: '团队协作管理',
    description: '支持多用户协同工作，管理员、上传者、浏览者三级权限。用户可以点赞、收藏、评论素材。实时显示谁在查看、下载哪些素材。团队成员在线状态实时显示。',
    features: ['三级权限', '点赞收藏', '实时协作', '在线状态']
  },
  {
    icon: FolderTree,
    title: '部门权限隔离',
    description: '支持按部门划分权限，不同部门只能看到自己的素材。部门管理员可管理本部门成员和素材。支持组织架构树状展示，层级关系清晰。跨部门协作可通过分享实现。',
    features: ['部门隔离', '层级管理', '权限细分', '安全共享'],
    badge: '付费版'
  },
  {
    icon: Sparkles,
    title: 'AI智能功能',
    description: '集成Gemini AI，支持智能素材分析和改图。AI可以理解素材内容，自动生成标签建议。上传参考图，AI自动生成多个设计风格稿。支持多模态对话，最多5张参考图。',
    features: ['AI分析', '智能标签', '风格生成', '对话改图'],
    badge: '付费版'
  },
  {
    icon: BarChart3,
    title: '数据分析报表',
    description: '完整的数据统计分析功能。查看素材下载排行、点赞排行、用户活跃度。30天新增素材趋势图，部门上传量对比。导出数据报表，支持Excel和PDF格式。',
    features: ['下载统计', '活跃分析', '趋势图表', '报表导出'],
    badge: '付费版'
  },
  {
    icon: Settings,
    title: '模板字段定制',
    description: '灵活的上传模板系统，支持自定义上传字段。管理员可以创建电商模板、家居模板等不同场景模板。字段支持文本、下拉选项、日期等多种类型。拖拽排序，所见即所得。',
    features: ['自定义字段', '模板管理', '拖拽排序', '多种类型'],
    badge: '付费版'
  },
  {
    icon: Share2,
    title: '公开分享链接',
    description: '生成公开分享链接，无需登录即可查看素材详情。适合向客户或合作伙伴展示作品。可设置分享链接有效期和访问密码。查看分享链接的访问统计和来源分析。',
    features: ['一键分享', '访问控制', '密码保护', '统计分析']
  },
  {
    icon: Clock,
    title: '版本历史管理',
    description: '自动记录素材的修改历史，支持版本回溯。查看每个版本的修改时间、修改人、修改内容。可以对比不同版本的差异。重要版本可以标记和备注。',
    features: ['版本记录', '历史回溯', '版本对比', '标记备注']
  },
  {
    icon: Download,
    title: '批量操作导入导出',
    description: '支持批量编辑素材信息、批量下载、批量删除。Excel批量导入素材元数据，提高录入效率。数据导出支持CSV、Excel格式。支持备份和恢复功能，数据永不丢失。',
    features: ['批量编辑', 'Excel导入', '数据导出', '备份恢复']
  },
]

export default function SystemFeatures() {
  return (
    <section id="system-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-base text-green-600 font-semibold tracking-wide uppercase mb-3">
            免费版功能
          </h2>
          <h3 className="text-4xl sm:text-5xl font-bold text-apple-gray-900 mb-4">
            专业的素材管理解决方案
          </h3>
          <p className="text-xl text-apple-gray-600 max-w-3xl mx-auto">
            完全免费，功能强大！涵盖上传、搜索、分类、下载、协作等全流程管理
          </p>
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {coreFeatures.map((feature, index) => {
            const Icon = feature.icon
            return (
              <div
                key={feature.title}
                className="relative bg-gradient-to-br from-white to-apple-gray-50 rounded-2xl p-6 border border-apple-gray-200 hover:border-apple-blue hover:shadow-xl transition-all duration-300"
                style={{
                  animationDelay: `${index * 0.05}s`,
                }}
              >
                {/* Pro Badge */}
                {feature.badge && (
                  <div className="absolute top-4 right-4">
                    <span className="inline-block px-3 py-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs font-bold rounded-full">
                      {feature.badge}
                    </span>
                  </div>
                )}

                {/* Icon */}
                <div className="mb-4">
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-apple-blue to-blue-600 flex items-center justify-center">
                    <Icon className="w-6 h-6 text-white" strokeWidth={2} />
                  </div>
                </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 mb-4">
                  {feature.description}
                </p>

                {/* Feature Tags */}
                <div className="flex flex-wrap gap-2">
                  {feature.features.map((item) => (
                    <span
                      key={item}
                      className="inline-block px-3 py-1 bg-blue-50 text-apple-blue text-xs font-medium rounded-full border border-blue-200"
                    >
                      {item}
                    </span>
                  ))}
                </div>
              </div>
            )
          })}
        </div>

      </div>
    </section>
  )
}