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 {
  Layout,
  Palette,
  Code,
  Users,
  Target,
  Clock,
  CheckCircle,
  ArrowRight,
  Zap,
  Shield,
  BarChart,
  FileText,
  Search,
  FileCheck,
  Calculator,
  Archive
} from 'lucide-react';

export default function DesignPlanningPage() {
  const services = [
    {
      icon: <Search className="h-8 w-8" />,
      title: "项目前期咨询",
      description: "项目可行性评估、需求分析、技术路线规划等前期咨询服务",
      features: ["需求调研分析", "技术可行性评估", "投资预算估算", "项目风险识别"],
      color: "text-blue-600",
      bgColor: "bg-blue-50"
    },
    {
      icon: <FileText className="h-8 w-8" />,
      title: "项目建议书编制",
      description: "编制专业的项目建议书，为项目立项提供决策依据",
      features: ["项目背景分析", "建设目标制定", "实施方案设计", "投资效益分析"],
      color: "text-purple-600",
      bgColor: "bg-purple-50"
    },
    {
      icon: <FileCheck className="h-8 w-8" />,
      title: "可行性研究报告",
      description: "深入分析项目可行性，为投资决策提供科学依据",
      features: ["市场分析", "技术方案评估", "经济评价", "社会效益分析"],
      color: "text-green-600",
      bgColor: "bg-green-50"
    },
    {
      icon: <Layout className="h-8 w-8" />,
      title: "初步设计方案",
      description: "制定项目初步设计方案，明确技术路线和实施路径",
      features: ["系统架构设计", "功能模块规划", "技术选型建议", "实施计划制定"],
      color: "text-orange-600",
      bgColor: "bg-orange-50"
    },
    {
      icon: <Shield className="h-8 w-8" />,
      title: "深化审计服务",
      description: "项目深化设计阶段的审计服务，确保设计质量",
      features: ["设计文件审查", "技术规范验证", "成本控制分析", "质量风险评估"],
      color: "text-red-600",
      bgColor: "bg-red-50"
    },
    {
      icon: <Calculator className="h-8 w-8" />,
      title: "项目造价咨询",
      description: "项目投资估算、概预算编制、成本控制等造价咨询服务",
      features: ["投资估算编制", "概预算审核", "成本控制方案", "变更造价管理"],
      color: "text-indigo-600",
      bgColor: "bg-indigo-50"
    },
    {
      icon: <Archive className="h-8 w-8" />,
      title: "竣工资料编制",
      description: "项目竣工验收阶段的资料编制和归档服务",
      features: ["竣工图纸整理", "技术文档编制", "验收资料准备", "档案归档管理"],
      color: "text-teal-600",
      bgColor: "bg-teal-50"
    }
  ];

  const processSteps = [
    {
      step: 1,
      title: "项目前期咨询",
      description: "深入调研项目需求，进行可行性分析和初步规划",
      icon: <Search className="h-6 w-6" />,
      duration: "2-4周"
    },
    {
      step: 2,
      title: "项目建议书编制",
      description: "编制项目建议书，明确项目建设目标和实施方案",
      icon: <FileText className="h-6 w-6" />,
      duration: "3-5周"
    },
    {
      step: 3,
      title: "可行性研究",
      description: "进行详细的技术经济分析，评估项目可行性",
      icon: <FileCheck className="h-6 w-6" />,
      duration: "4-6周"
    },
    {
      step: 4,
      title: "初步设计",
      description: "制定项目初步设计方案，明确技术路线",
      icon: <Layout className="h-6 w-6" />,
      duration: "5-8周"
    },
    {
      step: 5,
      title: "深化审计",
      description: "对设计方案进行深化审计，确保质量和合规性",
      icon: <Shield className="h-6 w-6" />,
      duration: "3-5周"
    },
    {
      step: 6,
      title: "造价咨询",
      description: "编制项目投资估算和概预算，进行成本控制",
      icon: <Calculator className="h-6 w-6" />,
      duration: "2-4周"
    },
    {
      step: 7,
      title: "竣工资料",
      description: "整理项目竣工资料，完成验收和归档",
      icon: <Archive className="h-6 w-6" />,
      duration: "2-3周"
    }
  ];

  const caseStudies = [
    {
      title: "智慧政务平台咨询",
      description: "为某省级政府提供智慧政务平台全过程咨询服务",
      results: ["项目投资节省15%", "实施周期缩短30%", "系统稳定性提升40%"],
      industry: "政务"
    },
    {
      title: "企业ERP系统咨询",
      description: "为大型制造企业提供ERP系统全过程咨询服务",
      results: ["业务流程优化50%", "运营成本降低25%", "决策效率提升60%"],
      industry: "制造"
    },
    {
      title: "医疗信息化咨询",
      description: "为三甲医院提供医疗信息化系统全过程咨询服务",
      results: ["医疗数据准确率99.9%", "患者满意度提升35%", "医疗效率提升45%"],
      industry: "医疗"
    }
  ];

  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">
              <Layout 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">200+</div>
                <div className="text-blue-200">成功项目</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold">15+</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>

      {/* Design 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 lg:grid-cols-3 gap-8">
            {services.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">
                    {service.features.map((feature, featureIndex) => (
                      <div key={featureIndex} className="flex items-center text-sm text-gray-600">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        {feature}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Design Process */}
      <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="relative">
            <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-200 hidden lg:block"></div>
            
            <div className="space-y-8 lg:space-y-12">
              {processSteps.map((step, index) => (
                <div key={index} className={`relative flex items-center ${
                  index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
                }`}>
                  <div className={`flex-1 ${index % 2 === 0 ? 'lg:pr-8 lg:text-right' : 'lg:pl-8'}`}>
                    <Card 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">
                              {step.step}
                            </div>
                            <CardTitle>{step.title}</CardTitle>
                          </div>
                          <Badge variant="outline">{step.duration}</Badge>
                        </div>
                      </CardHeader>
                      <CardContent>
                        <CardDescription className="text-base">
                          {step.description}
                        </CardDescription>
                      </CardContent>
                    </Card>
                  </div>
                  
                  <div className="hidden lg:block w-12 h-12 bg-white border-4 border-blue-600 rounded-full flex items-center justify-center text-blue-600 z-10">
                    {step.icon}
                  </div>
                  
                  <div className="flex-1 hidden lg:block"></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Case Studies */}
      <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">
            {caseStudies.map((caseStudy, index) => (
              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                <CardHeader>
                  <Badge variant="secondary" className="w-fit mb-2">{caseStudy.industry}</Badge>
                  <CardTitle className="text-lg">{caseStudy.title}</CardTitle>
                  <CardDescription>{caseStudy.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {caseStudy.results.map((result, resultIndex) => (
                      <div key={resultIndex} className="flex items-center text-sm text-gray-700">
                        <Zap className="h-3 w-3 text-green-500 mr-2" />
                        {result}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Design Principles */}
      <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">
            {[
              {
                icon: <Target className="h-8 w-8" />,
                title: "目标导向",
                description: "始终以项目目标和客户需求为核心"
              },
              {
                icon: <CheckCircle className="h-8 w-8" />,
                title: "专业严谨",
                description: "坚持专业标准和严谨的工作态度"
              },
              {
                icon: <BarChart className="h-8 w-8" />,
                title: "数据支撑",
                description: "基于数据分析提供科学决策依据"
              },
              {
                icon: <Clock className="h-8 w-8" />,
                title: "高效执行",
                description: "注重项目执行效率和成果质量"
              }
            ].map((principle, 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">
                  {principle.icon}
                </div>
                <h3 className="text-xl font-semibold mb-2">{principle.title}</h3>
                <p className="text-blue-200">{principle.description}</p>
              </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>
          <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>
  );
}