'use client'

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

const coreFeatures = [
  {
    icon: Upload,
    title: '素材上传管理',
    description: '支持全格式素材上传：3D格式（3DMAX/C4D/FBX/OBJ）、所有图片格式（JPG/PNG/PSD/AI/BMP/SVG/TIFF等）、所有音视频格式（MP3/WAV/AAC/MP4/AVI/MOV等）、文档格式（PDF/DOC/DOCX/XLS/PPT等）、压缩包（ZIP/RAR/7Z等）。自动生成缩略图预览，支持拖拽上传，单文件最大10GB。',
    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: '支持品牌、系列、SKU等企业信息管理。可自定义品牌LOGO、主题颜色，打造专属品牌形象。支持材质、渲染参数、分辨率等专业字段配置。电商场景完美适配。',
    features: ['品牌管理', 'LOGO自定义', '主题颜色', 'SKU管理'],
    badge: '标准版'
  },
  {
    icon: Settings,
    title: '模板字段定制',
    description: '灵活的上传模板系统，支持自定义上传字段。管理员可以创建电商模板、家居模板等不同场景模板。字段支持文本、下拉选项、日期等多种类型。拖拽排序，所见即所得。',
    features: ['自定义字段', '模板管理', '拖拽排序', '多种类型'],
    badge: '标准版'
  },
  {
    icon: Share2,
    title: '公开分享链接',
    description: '生成公开分享链接，无需登录即可查看素材详情。适合向客户或合作伙伴展示作品。可设置分享链接有效期和访问密码。查看分享链接的访问统计和来源分析。',
    features: ['一键分享', '访问控制', '密码保护', '统计分析']
  },
  {
    icon: Download,
    title: '批量操作导入导出',
    description: '支持批量编辑素材信息、批量下载、批量删除。Excel批量导入素材元数据，提高录入效率。数据导出支持CSV、Excel格式。支持备份和恢复功能，数据永不丢失。',
    features: ['批量编辑', 'Excel导入', '数据导出', '备份恢复']
  },
  {
    icon: Link2,
    title: '邀请链接管理',
    description: '生成邀请链接快速邀请新成员加入。支持设置邀请次数限制和过期时间。可查看邀请链接使用情况和统计。邀请码系统让团队扩展更简单。',
    features: ['邀请链接', '次数限制', '过期控制', '使用统计']
  },
  {
    icon: Shield,
    title: '钉钉集成登录',
    description: '支持钉钉扫码登录，无需记忆密码。钉钉首次登录自动引导完善部门信息。与企业钉钉组织架构对接，提高企业协同效率。支持邮箱密码和钉钉OAuth两种登录方式。',
    features: ['钉钉扫码', 'OAuth认证', '组织对接', '双重登录']
  },
  {
    icon: Network,
    title: '内外网智能识别',
    description: '自动识别用户当前处于内网还是公网环境。内网环境自动提示内网访问地址，提高访问速度。支持远程访问配置，随时随地安全访问。外网访问带宽服务可选购。',
    features: ['网络识别', '地址提示', '远程访问', '带宽服务']
  },
]

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>
  )
}