import { Globe, Repeat, BarChart, Shield, Zap, Users, Clock, CheckCircle } from 'lucide-react';

export default function Features() {
  const features = [
    {
      icon: Globe,
      title: '全球节点网络',
      description: '覆盖全球主要地区的分布式节点，确保就近访问',
      details: ['50+ 全球节点', '平均延迟 < 50ms', '99.9% 可用性']
    },
    {
      icon: Repeat,
      title: '智能路由优化',
      description: '基于实时网络状况，自动选择最优传输路径',
      details: ['动态路径选择', '负载均衡', '故障自动切换']
    },
    {
      icon: BarChart,
      title: '实时监控面板',
      description: '全面的性能监控和数据分析，让您随时掌握服务状态',
      details: ['实时性能指标', '详细使用报告', '自定义告警']
    },
    {
      icon: Shield,
      title: '企业级安全',
      description: '多层安全防护，保障数据传输和存储安全',
      details: ['端到端加密', 'DDoS 防护', '安全审计']
    },
    {
      icon: Zap,
      title: '极速性能',
      description: '优化的传输协议和缓存机制，提供极致访问速度',
      details: ['HTTP/3 支持', '智能缓存', '压缩优化']
    },
    {
      icon: Users,
      title: '团队协作',
      description: '完善的权限管理和团队协作功能',
      details: ['多用户管理', '权限控制', '操作日志']
    },
    {
      icon: Clock,
      title: '7×24 支持',
      description: '全天候技术支持，确保您的业务稳定运行',
      details: ['即时响应', '专业技术团队', '多渠道支持']
    },
    {
      icon: CheckCircle,
      title: 'SLA 保障',
      description: '严格的服务等级协议，确保服务质量',
      details: ['99.9% 可用性', '性能保证', '赔偿机制']
    }
  ];

  return (
    <section id="features" className="px-6 py-16">
      <div className="max-w-screen-xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-primary mb-4">
            核心产品特性
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            我们提供业界领先的云加速服务，通过先进的技术架构和智能算法，
            为您的业务提供稳定、安全、高效的技术解决方案
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {features.map((feature, index) => (
            <div 
              key={index}
              className="group bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-accent/20"
            >
              <div className="flex flex-col items-center text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-accent/10 to-accent/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                  <feature.icon className="h-8 w-8 text-accent" />
                </div>
                <h3 className="text-xl font-semibold mb-3 text-primary group-hover:text-accent transition-colors">
                  {feature.title}
                </h3>
                <p className="text-gray-600 mb-4 leading-relaxed">
                  {feature.description}
                </p>
                <ul className="space-y-2 text-sm text-gray-500">
                  {feature.details.map((detail, idx) => (
                    <li key={idx} className="flex items-center">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" />
                      {detail}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        {/* 技术架构展示 */}
        <div className="mt-20 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-8 md:p-12">
          <div className="text-center mb-8">
            <h3 className="text-2xl md:text-3xl font-bold text-primary mb-4">
              技术架构优势
            </h3>
            <p className="text-gray-600 max-w-2xl mx-auto">
              基于云原生架构，采用微服务设计，确保系统的高可用性和可扩展性
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
                <span className="text-2xl font-bold text-accent">99.9%</span>
              </div>
              <h4 className="text-lg font-semibold mb-2">服务可用性</h4>
              <p className="text-gray-600 text-sm">企业级 SLA 保障</p>
            </div>
            
            <div className="text-center">
              <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
                <span className="text-2xl font-bold text-accent">&lt; 50ms</span>
              </div>
              <h4 className="text-lg font-semibold mb-2">平均延迟</h4>
              <p className="text-gray-600 text-sm">全球节点优化</p>
            </div>
            
            <div className="text-center">
              <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
                <span className="text-2xl font-bold text-accent">50+</span>
              </div>
              <h4 className="text-lg font-semibold mb-2">全球节点</h4>
              <p className="text-gray-600 text-sm">覆盖主要地区</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}