import Navbar from '../components/Navbar';
import About from '../components/About';
import Footer from '../components/Footer';
import { Users, Award, Target, Heart, Globe, Zap } from 'lucide-react';

export default function AboutPage() {
  return (
    <div className="pt-16 bg-background">
      <Navbar />
      <main>
        {/* 页面标题部分 */}
        <section className="px-6 py-16 bg-gradient-to-br from-green-50 to-blue-100">
          <div className="max-w-screen-xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-primary mb-6">
              关于我们
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed mb-8">
              我们是一支充满激情的团队，致力于通过创新的云加速技术，
              为全球企业提供更快、更安全、更可靠的网络服务。
            </p>
            
            {/* 核心价值展示 */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
                <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4">
                  <Target className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-lg font-semibold text-primary mb-2">我们的使命</h3>
                <p className="text-sm text-gray-600">让全球互联网无障碍连接，推动业务高速增长</p>
              </div>
              
              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
                <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Globe className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-lg font-semibold text-primary mb-2">我们的愿景</h3>
                <p className="text-sm text-gray-600">成为全球领先的云网络加速平台</p>
              </div>
              
              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
                <div className="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Heart className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-lg font-semibold text-primary mb-2">我们的价值观</h3>
                <p className="text-sm text-gray-600">客户为先，技术驱动，持续创新</p>
              </div>
            </div>
          </div>
        </section>

        {/* 公司介绍 */}
        <About />

        {/* 团队介绍 */}
        <section className="px-6 py-16 bg-white">
          <div className="max-w-screen-xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl 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-3 gap-8">
              {[
                {
                  name: '技术团队',
                  description: '来自 AWS、阿里云等一线云服务商的技术专家',
                  icon: '💻',
                  stats: '15+ 年经验'
                },
                {
                  name: '产品团队',
                  description: '深度理解用户需求，持续优化产品体验',
                  icon: '🎯',
                  stats: '10+ 年经验'
                },
                {
                  name: '运营团队',
                  description: '7×24 小时专业运维，确保服务稳定可靠',
                  icon: '⚙️',
                  stats: '99.9% 可用性'
                }
              ].map((team, index) => (
                <div key={index} className="text-center group">
                  <div className="w-20 h-20 bg-gradient-to-br from-accent/10 to-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                    <span className="text-3xl">{team.icon}</span>
                  </div>
                  <h3 className="text-xl font-semibold text-primary mb-2">{team.name}</h3>
                  <p className="text-gray-600 mb-3">{team.description}</p>
                  <div className="text-sm font-medium text-accent">{team.stats}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 发展历程 */}
        <section className="px-6 py-16 bg-gray-50">
          <div className="max-w-screen-xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-primary mb-4">发展历程</h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                从初创公司到行业领先，我们始终专注于技术创新和客户价值创造。
              </p>
            </div>

            <div className="relative">
              {/* 时间线 */}
              <div className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-accent/20"></div>
              
              <div className="space-y-12">
                {[
                  {
                    year: '2020',
                    title: '公司成立',
                    description: 'Pinnovate Cloud 正式成立，专注于云加速技术研发',
                    icon: '🚀'
                  },
                  {
                    year: '2021',
                    title: '首轮融资',
                    description: '获得知名投资机构 A 轮融资，加速技术研发',
                    icon: '💰'
                  },
                  {
                    year: '2022',
                    title: '全球扩张',
                    description: '部署全球 20+ 节点，服务覆盖主要地区',
                    icon: '🌍'
                  },
                  {
                    year: '2023',
                    title: '技术突破',
                    description: '发布 AI 智能路由技术，性能提升 50%',
                    icon: '🤖'
                  },
                  {
                    year: '2024',
                    title: '行业领先',
                    description: '服务客户超过 500+，成为行业标杆',
                    icon: '🏆'
                  }
                ].map((milestone, index) => (
                  <div key={index} className={`flex items-center ${index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}`}>
                    <div className={`w-1/2 ${index % 2 === 0 ? 'pr-8 text-right' : 'pl-8 text-left'}`}>
                      <div className="bg-white rounded-lg p-6 shadow-md">
                        <div className="flex items-center gap-3 mb-2">
                          <span className="text-2xl">{milestone.icon}</span>
                          <span className="text-2xl font-bold text-accent">{milestone.year}</span>
                        </div>
                        <h3 className="text-lg font-semibold text-primary mb-2">{milestone.title}</h3>
                        <p className="text-gray-600 text-sm">{milestone.description}</p>
                      </div>
                    </div>
                    
                    <div className="w-8 h-8 bg-accent rounded-full flex items-center justify-center relative z-10">
                      <div className="w-4 h-4 bg-white rounded-full"></div>
                    </div>
                    
                    <div className="w-1/2"></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* 联系我们 */}
        <section className="px-6 py-16 bg-gradient-to-r from-accent to-blue-600 text-white">
          <div className="max-w-screen-xl mx-auto text-center">
            <h2 className="text-3xl font-bold mb-4">加入我们的旅程</h2>
            <p className="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
              我们正在寻找志同道合的伙伴，一起推动云加速技术的发展，
              为全球用户创造更好的网络体验。
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a
                href="/contact"
                className="px-8 py-3 bg-white text-accent rounded-xl font-semibold hover:bg-gray-100 transition-colors"
              >
                联系我们
              </a>
              <a
                href="/careers"
                className="px-8 py-3 border-2 border-white text-white rounded-xl font-semibold hover:bg-white hover:text-accent transition-colors"
              >
                加入我们
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}