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 {
  Users,
  Briefcase,
  GraduationCap,
  MapPin,
  Clock,
  CheckCircle,
  ArrowRight,
  Zap,
  Shield,
  BarChart,
  MessageCircle,
  Code,
  Palette,
  Brain,
  Cloud
} from 'lucide-react';

export default function TalentSharingPage() {
  const talentCategories = [
    {
      icon: <Code className="h-8 w-8" />,
      title: "软件开发工程师",
      description: "全栈开发、前端、后端、移动端开发专家",
      skills: ["JavaScript/TypeScript", "React/Vue", "Node.js", "数据库"],
      demand: "高",
      avgSalary: "15-30K",
      color: "text-blue-600",
      bgColor: "bg-blue-50"
    },
    {
      icon: <Palette className="h-8 w-8" />,
      title: "UI/UX设计师",
      description: "用户体验设计、界面设计、交互设计专家",
      skills: ["Figma/Sketch", "用户研究", "原型设计", "视觉设计"],
      demand: "中高",
      avgSalary: "12-25K",
      color: "text-purple-600",
      bgColor: "bg-purple-50"
    },
    {
      icon: <Brain className="h-8 w-8" />,
      title: "AI工程师",
      description: "机器学习、深度学习、自然语言处理专家",
      skills: ["Python", "TensorFlow/PyTorch", "数据分析", "算法优化"],
      demand: "极高",
      avgSalary: "20-40K",
      color: "text-green-600",
      bgColor: "bg-green-50"
    },
    {
      icon: <Cloud className="h-8 w-8" />,
      title: "运维工程师",
      description: "系统运维、云平台管理、DevOps专家",
      skills: ["Linux", "Docker/K8s", "AWS/Aliyun", "监控告警"],
      demand: "中",
      avgSalary: "15-28K",
      color: "text-orange-600",
      bgColor: "bg-orange-50"
    }
  ];

  const cooperationModels = [
    {
      model: "项目外包",
      description: "按项目需求外包开发，固定价格或按工时计费",
      advantages: ["成本可控", "专业团队", "质量保证", "进度明确"],
      suitable: "短期项目、特定功能开发",
      icon: <Briefcase className="h-6 w-6" />
    },
    {
      model: "人才派遣",
      description: "派遣专业技术人员到客户现场工作",
      advantages: ["灵活用工", "专业匹配", "管理简便", "成本优化"],
      suitable: "长期项目、技术团队补充",
      icon: <Users className="h-6 w-6" />
    },
    {
      model: "技术咨询",
      description: "提供技术方案咨询、架构设计等服务",
      advantages: ["专家指导", "技术评估", "方案优化", "风险控制"],
      suitable: "技术选型、系统架构设计",
      icon: <MessageCircle className="h-6 w-6" />
    },
    {
      model: "培训服务",
      description: "技术培训、团队能力提升服务",
      advantages: ["定制课程", "实战演练", "持续支持", "效果评估"],
      suitable: "团队技术能力提升",
      icon: <GraduationCap className="h-6 w-6" />
    }
  ];

  const successStories = [
    {
      company: "某金融科技公司",
      challenge: "急需AI工程师开发智能风控系统",
      solution: "派遣3名AI工程师，6个月完成系统开发",
      results: ["风控准确率提升30%", "人工审核减少70%", "项目提前2周完成"],
      duration: "6个月"
    },
    {
      company: "某电商平台",
      challenge: "需要全栈开发团队重构系统",
      solution: "外包10人团队，完成系统架构升级",
      results: ["系统性能提升5倍", "用户体验大幅改善", "开发成本节约40%"],
      duration: "8个月"
    },
    {
      company: "某教育机构",
      challenge: "缺乏UI/UX设计能力",
      solution: "长期合作设计团队，提供持续设计支持",
      results: ["产品设计质量提升", "用户满意度达95%", "设计效率提高3倍"],
      duration: "持续合作"
    }
  ];

  const talentAdvantages = [
    {
      title: "严格筛选",
      description: "每位人才都经过严格的技术面试和背景调查",
      icon: <Shield className="h-8 w-8" />
    },
    {
      title: "专业匹配",
      description: "根据项目需求精准匹配最合适的人才",
      icon: <Zap className="h-8 w-8" />
    },
    {
      title: "持续支持",
      description: "项目期间提供全程技术支持和质量保障",
      icon: <CheckCircle className="h-8 w-8" />
    },
    {
      title: "灵活合作",
      description: "支持多种合作模式，满足不同业务需求",
      icon: <BarChart className="h-8 w-8" />
    }
  ];

  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">
              <Users 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">500+</div>
                <div className="text-blue-200">专业人才</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold">100+</div>
                <div className="text-blue-200">合作企业</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold">95%</div>
                <div className="text-blue-200">匹配成功率</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Talent Categories */}
      <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 max-w-2xl mx-auto">
              我们拥有各领域的专业人才，满足不同技术需求
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {talentCategories.map((category, index) => (
              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                <CardHeader>
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center">
                      <div className={`p-3 rounded-lg ${category.bgColor} ${category.color} mr-4`}>
                        {category.icon}
                      </div>
                      <CardTitle className="text-xl">{category.title}</CardTitle>
                    </div>
                    <Badge variant={
                      category.demand === "极高" ? "destructive" :
                      category.demand === "高" ? "default" : "secondary"
                    }>
                      {category.demand}需求
                    </Badge>
                  </div>
                  <CardDescription className="text-base">
                    {category.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div>
                      <h4 className="font-semibold text-sm text-gray-600 mb-2">核心技能：</h4>
                      <div className="flex flex-wrap gap-2">
                        {category.skills.map((skill, skillIndex) => (
                          <Badge key={skillIndex} variant="outline" className="text-xs">
                            {skill}
                          </Badge>
                        ))}
                      </div>
                    </div>
                    <div className="flex justify-between items-center text-sm text-gray-600">
                      <span>平均薪资：{category.avgSalary}</span>
                      <span>市场需求：{category.demand}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Cooperation Models */}
      <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">灵活多样的合作方式，满足不同业务场景</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {cooperationModels.map((model, index) => (
              <Card key={index} className="border-0 shadow-lg text-center">
                <CardHeader>
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600">
                    {model.icon}
                  </div>
                  <CardTitle>{model.model}</CardTitle>
                  <CardDescription>{model.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div>
                      <h4 className="font-semibold text-sm mb-2">优势：</h4>
                      <ul className="space-y-1 text-sm text-gray-600">
                        {model.advantages.map((advantage, advantageIndex) => (
                          <li key={advantageIndex}>• {advantage}</li>
                        ))}
                      </ul>
                    </div>
                    <div className="text-xs text-gray-500">
                      适用：{model.suitable}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Success Stories */}
      <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="space-y-8">
            {successStories.map((story, index) => (
              <Card key={index} className="border-0 shadow-lg">
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>{story.company}</CardTitle>
                    <Badge variant="outline">{story.duration}</Badge>
                  </div>
                  <CardDescription className="text-base">
                    <strong>挑战：</strong>{story.challenge}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid md:grid-cols-2 gap-6">
                    <div>
                      <h4 className="font-semibold mb-2">解决方案：</h4>
                      <p className="text-gray-700">{story.solution}</p>
                    </div>
                    <div>
                      <h4 className="font-semibold mb-2">成果：</h4>
                      <ul className="space-y-1">
                        {story.results.map((result, resultIndex) => (
                          <li key={resultIndex} className="flex items-center text-sm text-gray-600">
                            <CheckCircle className="h-3 w-3 text-green-500 mr-2" />
                            {result}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Advantages */}
      <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">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-4">我们的优势</h2>
            <p className="text-xl text-blue-100">为什么选择元亨科技的人才共享服务</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {talentAdvantages.map((advantage, index) => (
              <div key={index} className="text-center">
                <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  {advantage.icon}
                </div>
                <h3 className="text-xl font-semibold mb-2">{advantage.title}</h3>
                <p className="text-blue-200">{advantage.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Process */}
      <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="grid md:grid-cols-4 gap-8">
            {[
              {
                step: 1,
                title: "需求沟通",
                description: "详细了解项目需求和技术要求",
                icon: <MessageCircle className="h-6 w-6" />
              },
              {
                step: 2,
                title: "人才匹配",
                description: "根据需求匹配最合适的专业人才",
                icon: <Users className="h-6 w-6" />
              },
              {
                step: 3,
                title: "面试确认",
                description: "安排技术面试，确认合作意向",
                icon: <CheckCircle className="h-6 w-6" />
              },
              {
                step: 4,
                title: "开始合作",
                description: "签订合同，启动项目合作",
                icon: <Zap className="h-6 w-6" />
              }
            ].map((step, index) => (
              <div key={index} className="text-center">
                <div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">
                  {step.step}
                </div>
                <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
                <p className="text-gray-600">{step.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="py-20 bg-gray-50">
        <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>
          <Button 
            size="lg"
            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3"
          >
            <ArrowRight className="h-4 w-4 mr-2" />
            发布人才需求
          </Button>
        </div>
      </div>
    </div>
  );
}