import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Button } from '@/client/components/ui/button';
import { Badge } from '@/client/components/ui/badge';
import { Separator } from '@/client/components/ui/separator';
import { 
  Building, 
  Target, 
  Users, 
  Award, 
  Clock, 
  MapPin,
  Heart,
  Shield,
  Zap
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';

export default function AboutPage() {
  const navigate = useNavigate();

  const companyInfo = {
    name: "元亨科技有限公司",
    founded: "2018年",
    location: "中国·北京",
    employees: "50+",
    projects: "200+",
    clients: "1000+"
  };

  const values = [
    {
      icon: <Heart className="h-8 w-8" />,
      title: "客户至上",
      description: "始终以客户需求为导向，提供最优质的服务体验",
      color: "text-red-600"
    },
    {
      icon: <Shield className="h-8 w-8" />,
      title: "诚信经营",
      description: "坚持诚信原则，建立长期稳定的合作关系",
      color: "text-blue-600"
    },
    {
      icon: <Zap className="h-8 w-8" />,
      title: "创新驱动",
      description: "持续技术创新，引领行业发展方向",
      color: "text-yellow-600"
    }
  ];

  const milestones = [
    { year: "2018", event: "公司成立，专注于AI技术研发" },
    { year: "2019", event: "推出首个AI文档处理产品" },
    { year: "2020", event: "获得国家高新技术企业认证" },
    { year: "2021", event: "用户突破10万，服务覆盖全国" },
    { year: "2022", event: "推出元亨Word批量处理平台" },
    { year: "2023", event: "AI工具矩阵全面升级" },
    { year: "2024", event: "开启国际化战略布局" }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* Hero Section */}
      <div className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div className="absolute inset-0 bg-black/20" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center">
            <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm text-sm font-medium mb-6">
              <Building className="h-4 w-4 mr-2" />
              关于元亨科技
            </div>
            
            <h1 className="text-5xl md:text-6xl font-bold mb-6">
              元亨科技有限公司
            </h1>
            
            <p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
              专注于人工智能技术研发与应用的高新技术企业，致力于为企业提供智能化解决方案
            </p>
            
            <div className="flex flex-wrap justify-center gap-6 mt-8">
              <div className="text-center">
                <div className="text-3xl font-bold">{companyInfo.founded}</div>
                <div className="text-blue-200">成立时间</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold">{companyInfo.employees}</div>
                <div className="text-blue-200">专业团队</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold">{companyInfo.projects}+</div>
                <div className="text-blue-200">成功项目</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold">{companyInfo.clients}+</div>
                <div className="text-blue-200">服务客户</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Company Overview */}
      <div className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-4xl font-bold text-gray-900 mb-6">公司简介</h2>
              <p className="text-lg text-gray-700 mb-6">
                元亨科技有限公司成立于2018年，是一家专注于人工智能技术研发与应用的高新技术企业。
                公司总部位于北京，拥有一支由资深AI专家、软件工程师和产品设计师组成的专业团队。
              </p>
              <p className="text-lg text-gray-700 mb-6">
                我们致力于将前沿的AI技术转化为实用的商业解决方案，帮助企业实现数字化转型和智能化升级。
                目前，我们的产品和服务已广泛应用于金融、教育、医疗、制造等多个行业领域。
              </p>
              <div className="flex items-center text-gray-600 mb-4">
                <MapPin className="h-5 w-5 mr-2" />
                <span>总部地址：{companyInfo.location}</span>
              </div>
              <div className="flex items-center text-gray-600">
                <Clock className="h-5 w-5 mr-2" />
                <span>成立时间：{companyInfo.founded}</span>
              </div>
            </div>
            <div className="relative">
              <div className="bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl p-8">
                <div className="grid grid-cols-2 gap-6">
                  <Card className="border-0 shadow-lg">
                    <CardHeader className="pb-2">
                      <Target className="h-8 w-8 text-blue-600" />
                      <CardTitle className="text-lg">使命</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <CardDescription>
                        让AI技术赋能每一个企业，推动产业智能化升级
                      </CardDescription>
                    </CardContent>
                  </Card>
                  <Card className="border-0 shadow-lg">
                    <CardHeader className="pb-2">
                      <Award className="h-8 w-8 text-purple-600" />
                      <CardTitle className="text-lg">愿景</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <CardDescription>
                        成为全球领先的AI技术解决方案提供商
                      </CardDescription>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Core Values */}
      <div className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">核心价值观</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              我们坚信，优秀的企业文化是持续发展的基石
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {values.map((value, index) => (
              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                <CardHeader className="text-center">
                  <div className={`p-3 rounded-full bg-gray-100 inline-block mb-4 ${value.color}`}>
                    {value.icon}
                  </div>
                  <CardTitle className="text-xl">{value.title}</CardTitle>
                </CardHeader>
                <CardContent className="text-center">
                  <CardDescription className="text-base">
                    {value.description}
                  </CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Development History */}
      <div className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">发展历程</h2>
            <p className="text-xl text-gray-600">每一步都见证着我们的成长与突破</p>
          </div>

          <div className="relative">
            <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-200"></div>
            
            <div className="space-y-12">
              {milestones.map((milestone, index) => (
                <div key={index} className={`relative flex items-center ${index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}`}>
                  <div className={`flex-1 ${index % 2 === 0 ? 'pr-8 text-right' : 'pl-8'}`}>
                    <div className="inline-block bg-white p-6 rounded-lg shadow-lg border">
                      <Badge variant="secondary" className="mb-2">{milestone.year}</Badge>
                      <p className="text-lg font-medium text-gray-900">{milestone.event}</p>
                    </div>
                  </div>
                  <div className="w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-lg z-10"></div>
                  <div className="flex-1"></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Team Section */}
      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl font-bold mb-6">专业团队</h2>
          <p className="text-xl text-blue-100 max-w-3xl mx-auto mb-8">
            我们拥有一支由AI专家、软件工程师、产品设计师和行业顾问组成的多元化团队，
            具备丰富的技术经验和行业洞察力
          </p>
          
          <div className="grid md:grid-cols-4 gap-8 mt-12">
            <div className="text-center">
              <Users className="h-12 w-12 mx-auto mb-4 text-blue-200" />
              <div className="text-2xl font-bold">AI专家</div>
              <div className="text-blue-200">机器学习、自然语言处理</div>
            </div>
            <div className="text-center">
              <Zap className="h-12 w-12 mx-auto mb-4 text-blue-200" />
              <div className="text-2xl font-bold">软件工程师</div>
              <div className="text-blue-200">全栈开发、系统架构</div>
            </div>
            <div className="text-center">
              <Target className="h-12 w-12 mx-auto mb-4 text-blue-200" />
              <div className="text-2xl font-bold">产品设计师</div>
              <div className="text-blue-200">用户体验、界面设计</div>
            </div>
            <div className="text-center">
              <Shield className="h-12 w-12 mx-auto mb-4 text-blue-200" />
              <div className="text-2xl font-bold">行业顾问</div>
              <div className="text-blue-200">业务咨询、解决方案</div>
            </div>
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="py-20 bg-white">
        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold text-gray-900 mb-4">
            加入元亨科技，共创智能未来
          </h2>
          <p className="text-xl text-gray-600 mb-8">
            如果您对我们的技术和服务感兴趣，欢迎与我们联系
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button 
              size="lg"
              className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3"
              onClick={() => navigate('/contact')}
            >
              联系我们
            </Button>
            <Button 
              size="lg"
              variant="outline"
              className="border-blue-600 text-blue-600 hover:bg-blue-50 px-8 py-3"
              onClick={() => navigate('/ai-tools')}
            >
              了解产品
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}