import React from 'react'
import { Sparkles, Zap, Video } from 'lucide-react'

const FeaturesHighlight: React.FC = () => {
  const features = [
    {
      icon: Sparkles,
      title: 'AI 智能剪辑',
      description: '使用先进的 AI 技术，自动识别精彩片段，智能生成视频剪辑'
    },
    {
      icon: Zap,
      title: '高效处理',
      description: '优化的渲染引擎，支持多种格式，快速导出高质量视频'
    },
    {
      icon: Video,
      title: '专业工具',
      description: '丰富的编辑工具和特效，满足从入门到专业的各种需求'
    }
  ]

  return (
    <div className="bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg p-8 text-white">
      <h2 className="text-2xl font-bold mb-4">强大的功能特性</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {features.map((feature, index) => {
          const IconComponent = feature.icon
          return (
            <div key={index} className="text-center">
              <div className="inline-flex items-center justify-center w-12 h-12 bg-white/20 rounded-lg mb-4">
                <IconComponent size={24} />
              </div>
              <h3 className="font-semibold mb-2">{feature.title}</h3>
              <p className="text-primary-100 text-sm">{feature.description}</p>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default FeaturesHighlight