import { Users, Award, Globe, Shield, Zap, Target } from 'lucide-react';

export default function About() {
  return (
    <section className="px-6 py-16 bg-white">
      <div className="max-w-screen-xl mx-auto">
        {/* 公司介绍 */}
        <div className="text-center mb-16">
          <h2 className="text-3xl font-bold text-primary mb-6">我们的故事</h2>
          <div className="max-w-4xl mx-auto space-y-6">
            <p className="text-lg text-gray-600 leading-relaxed">
              Pinnovate Cloud 成立于 2020 年，是一家专注于云网络加速技术的创新公司。
              我们的核心团队来自 AWS、阿里云、腾讯云等全球领先的云计算厂商，
              拥有超过 15 年的网络优化和运维经验。
            </p>
            <p className="text-lg text-gray-600 leading-relaxed">
              自成立以来，我们已为全球 500+ 家企业提供定制化加速解决方案，
              覆盖电商、游戏、金融、教育、医疗等多个行业，
              帮助客户显著提升网站访问速度和业务稳定性。
            </p>
          </div>
        </div>

        {/* 核心优势 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
          {[
            {
              icon: Globe,
              title: '全球覆盖',
              description: '50+ 全球节点，覆盖主要国家和地区',
              color: 'text-blue-500'
            },
            {
              icon: Zap,
              title: '极速性能',
              description: '平均延迟 < 50ms，性能提升 50%+',
              color: 'text-yellow-500'
            },
            {
              icon: Shield,
              title: '安全可靠',
              description: '企业级安全防护，99.9% 可用性保障',
              color: 'text-green-500'
            },
            {
              icon: Users,
              title: '专业团队',
              description: '来自一线云厂商的技术专家团队',
              color: 'text-purple-500'
            },
            {
              icon: Award,
              title: '行业认可',
              description: '获得多项技术专利和行业认证',
              color: 'text-red-500'
            },
            {
              icon: Target,
              title: '客户成功',
              description: '99.9% 客户满意度，持续优化服务',
              color: 'text-indigo-500'
            }
          ].map((advantage, index) => (
            <div key={index} className="text-center group">
              <div className="w-16 h-16 bg-gradient-to-br from-gray-50 to-gray-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                <advantage.icon className={`w-8 h-8 ${advantage.color}`} />
              </div>
              <h3 className="text-xl font-semibold text-primary mb-3">{advantage.title}</h3>
              <p className="text-gray-600 leading-relaxed">{advantage.description}</p>
            </div>
          ))}
        </div>

        {/* 技术实力 */}
        <div className="bg-gradient-to-r from-gray-50 to-blue-50 rounded-2xl p-8 md:p-12">
          <div className="text-center mb-8">
            <h3 className="text-2xl font-bold text-primary mb-4">技术实力</h3>
            <p className="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-6">
            {[
              { name: 'CDN 技术', value: '99.9%', desc: '缓存命中率' },
              { name: '智能路由', value: '50ms', desc: '平均延迟' },
              { name: '安全防护', value: '100%', desc: 'DDoS 防护' },
              { name: '全球节点', value: '50+', desc: '覆盖地区' }
            ].map((stat, index) => (
              <div key={index} className="text-center">
                <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
                  <span className="text-2xl font-bold text-accent">{stat.value}</span>
                </div>
                <h4 className="text-lg font-semibold text-primary mb-1">{stat.name}</h4>
                <p className="text-sm text-gray-600">{stat.desc}</p>
              </div>
            ))}
          </div>
        </div>

        {/* 客户证言 */}
        <div className="mt-16">
          <div className="text-center mb-8">
            <h3 className="text-2xl font-bold text-primary mb-4">客户评价</h3>
            <p className="text-gray-600">听听我们的客户怎么说</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                quote: 'Pinnovate Cloud 的加速服务帮助我们显著提升了全球用户的访问体验，转化率提升了近30%。',
                author: '张总',
                company: '某大型电商平台',
                position: '技术总监'
              },
              {
                quote: '通过 Pinnovate Cloud 的游戏加速服务，我们的玩家在全球范围内都能享受到流畅的游戏体验。',
                author: '李经理',
                company: '知名游戏公司',
                position: '运营总监'
              },
              {
                quote: 'Pinnovate Cloud 不仅提供了卓越的性能优化，更重要的是保证了我们金融系统的安全性。',
                author: '王总',
                company: '大型金融机构',
                position: 'CTO'
              }
            ].map((testimonial, index) => (
              <div key={index} className="bg-white rounded-lg p-6 shadow-md border border-gray-100">
                <div className="flex items-center mb-4">
                  <div className="w-12 h-12 bg-accent rounded-full flex items-center justify-center mr-4">
                    <span className="text-white font-semibold text-lg">
                      {testimonial.author.charAt(0)}
                    </span>
                  </div>
                  <div>
                    <div className="font-semibold text-primary">{testimonial.author}</div>
                    <div className="text-sm text-gray-600">{testimonial.position}</div>
                    <div className="text-sm text-gray-500">{testimonial.company}</div>
                  </div>
                </div>
                <p className="text-gray-700 italic leading-relaxed">
                  "{testimonial.quote}"
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}