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 { 
  Code, 
  Database, 
  Server, 
  Cloud, 
  Shield, 
  Zap,
  CheckCircle,
  ArrowRight,
  Users,
  BarChart,
  Settings,
  Monitor
} from 'lucide-react';

export default function SoftwareRequirementsPage() {
  const developmentServices = [
    {
      icon: <Code className="h-8 w-8" />,
      title: "Web应用开发",
      description: "响应式网站、管理系统、电商平台等Web应用开发",
      technologies: ["React/Vue", "Node.js", "TypeScript", "REST API"],
      color: "text-blue-600",
      bgColor: "bg-blue-50"
    },
    {
      icon: <Monitor className="h-8 w-8" />,
      title: "桌面应用开发",
      description: "跨平台桌面应用程序，支持Windows、macOS、Linux",
      technologies: ["Electron", "React Native", "Flutter", "Java"],
      color: "text-green-600",
      bgColor: "bg-green-50"
    },
    {
      icon: <Cloud className="h-8 w-8" />,
      title: "云原生应用",
      description: "基于云平台的微服务架构应用开发",
      technologies: ["Docker", "Kubernetes", "AWS/Azure", "微服务"],
      color: "text-purple-600",
      bgColor: "bg-purple-50"
    },
    {
      icon: <Database className="h-8 w-8" />,
      title: "数据库设计",
      description: "数据库架构设计、优化和迁移服务",
      technologies: ["MySQL", "PostgreSQL", "MongoDB", "Redis"],
      color: "text-orange-600",
      bgColor: "bg-orange-50"
    }
  ];

  const requirementTypes = [
    {
      type: "功能需求",
      description: "系统需要实现的具体功能",
      examples: ["用户注册登录", "数据导入导出", "报表生成", "权限管理"],
      icon: <CheckCircle className="h-6 w-6" />
    },
    {
      type: "性能需求",
      description: "系统性能指标和要求",
      examples: ["响应时间<2秒", "并发用户数1000+", "数据存储容量", "系统可用性"],
      icon: <Zap className="h-6 w-6" />
    },
    {
      type: "安全需求",
      description: "系统安全性和数据保护要求",
      examples: ["数据加密", "访问控制", "审计日志", "漏洞防护"],
      icon: <Shield className="h-6 w-6" />
    },
    {
      type: "兼容性需求",
      description: "系统兼容性和集成要求",
      examples: ["浏览器兼容", "移动端适配", "第三方集成", "API兼容"],
      icon: <Settings className="h-6 w-6" />
    }
  ];

  const developmentProcess = [
    {
      phase: "需求分析",
      tasks: ["业务需求收集", "功能规格定义", "技术可行性分析", "项目计划制定"],
      duration: "1-2周",
      deliverables: ["需求文档", "功能清单", "技术方案"]
    },
    {
      phase: "系统设计",
      tasks: ["架构设计", "数据库设计", "界面设计", "API设计"],
      duration: "2-3周",
      deliverables: ["设计文档", "原型设计", "技术规范"]
    },
    {
      phase: "开发实现",
      tasks: ["编码实现", "单元测试", "代码审查", "持续集成"],
      duration: "4-8周",
      deliverables: ["源代码", "测试报告", "部署包"]
    },
    {
      phase: "测试验收",
      tasks: ["功能测试", "性能测试", "安全测试", "用户验收"],
      duration: "2-3周",
      deliverables: ["测试报告", "用户手册", "验收文档"]
    },
    {
      phase: "部署运维",
      tasks: ["系统部署", "数据迁移", "培训支持", "运维监控"],
      duration: "1-2周",
      deliverables: ["运行系统", "运维文档", "技术支持"]
    }
  ];

  const technologyStack = [
    {
      category: "前端技术",
      technologies: ["React 19", "TypeScript", "Tailwind CSS", "Vite"],
      icon: <Code className="h-6 w-6" />
    },
    {
      category: "后端技术",
      technologies: ["Node.js", "Hono", "TypeORM", "MySQL"],
      icon: <Server className="h-6 w-6" />
    },
    {
      category: "云服务",
      technologies: ["Docker", "Kubernetes", "AWS/Aliyun", "MinIO"],
      icon: <Cloud className="h-6 w-6" />
    },
    {
      category: "开发工具",
      technologies: ["Git", "VS Code", "Jest", "ESLint"],
      icon: <Settings className="h-6 w-6" />
    }
  ];

  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">
              <Code 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">100+</div>
                <div className="text-blue-200">成功项目</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold">50+</div>
                <div className="text-blue-200">技术专家</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold">98%</div>
                <div className="text-blue-200">项目成功率</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Development Services */}
      <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">
            {developmentServices.map((service, index) => (
              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                <CardHeader>
                  <div className="flex items-center mb-4">
                    <div className={`p-3 rounded-lg ${service.bgColor} ${service.color} mr-4`}>
                      {service.icon}
                    </div>
                    <CardTitle className="text-xl">{service.title}</CardTitle>
                  </div>
                  <CardDescription className="text-base">
                    {service.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <h4 className="font-semibold text-sm text-gray-600">技术栈：</h4>
                    <div className="flex flex-wrap gap-2">
                      {service.technologies.map((tech, techIndex) => (
                        <Badge key={techIndex} variant="outline" className="text-xs">
                          {tech}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Requirement Types */}
      <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">
            {requirementTypes.map((reqType, 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">
                    {reqType.icon}
                  </div>
                  <CardTitle>{reqType.type}</CardTitle>
                  <CardDescription>{reqType.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {reqType.examples.map((example, exampleIndex) => (
                      <div key={exampleIndex} className="text-sm text-gray-600">
                        • {example}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Development 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="space-y-8">
            {developmentProcess.map((phase, index) => (
              <Card key={index} className="border-0 shadow-lg">
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center">
                      <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center text-lg font-bold mr-4">
                        {index + 1}
                      </div>
                      <div>
                        <CardTitle>{phase.phase}</CardTitle>
                        <CardDescription>预计时长：{phase.duration}</CardDescription>
                      </div>
                    </div>
                    <Badge variant="secondary">{phase.duration}</Badge>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid md:grid-cols-2 gap-6">
                    <div>
                      <h4 className="font-semibold mb-2">主要任务：</h4>
                      <ul className="space-y-1">
                        {phase.tasks.map((task, taskIndex) => (
                          <li key={taskIndex} className="flex items-center text-sm text-gray-600">
                            <CheckCircle className="h-3 w-3 text-green-500 mr-2" />
                            {task}
                          </li>
                        ))}
                      </ul>
                    </div>
                    <div>
                      <h4 className="font-semibold mb-2">交付成果：</h4>
                      <ul className="space-y-1">
                        {phase.deliverables.map((deliverable, deliverableIndex) => (
                          <li key={deliverableIndex} className="flex items-center text-sm text-gray-600">
                            <Zap className="h-3 w-3 text-blue-500 mr-2" />
                            {deliverable}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Technology Stack */}
      <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">
            {technologyStack.map((tech, index) => (
              <Card key={index} className="border-0 bg-white/10 backdrop-blur-sm">
                <CardHeader className="text-center">
                  <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                    {tech.icon}
                  </div>
                  <CardTitle className="text-white">{tech.category}</CardTitle>
                </CardHeader>
                <CardContent className="text-center">
                  <div className="space-y-2">
                    {tech.technologies.map((technology, techIndex) => (
                      <div key={techIndex} className="text-blue-100 text-sm">
                        {technology}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Quality Assurance */}
      <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-3 gap-8">
            {[
              {
                title: "代码质量",
                description: "代码规范检查、单元测试、代码审查",
                metrics: ["代码覆盖率>90%", "无严重bug", "符合编码规范"]
              },
              {
                title: "性能测试",
                description: "压力测试、负载测试、性能优化",
                metrics: ["响应时间<2s", "并发用户1000+", "99.9%可用性"]
              },
              {
                title: "安全审计",
                description: "安全漏洞扫描、渗透测试、数据保护",
                metrics: ["OWASP合规", "数据加密", "访问控制"]
              }
            ].map((qa, index) => (
              <Card key={index} className="border-0 shadow-lg text-center">
                <CardHeader>
                  <CardTitle>{qa.title}</CardTitle>
                  <CardDescription>{qa.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {qa.metrics.map((metric, metricIndex) => (
                      <div key={metricIndex} className="text-sm text-gray-600">
                        • {metric}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </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>
  );
}