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
} from 'lucide-react';

export default function DesignPlanningPage() {
  const services = [
    {
      icon: <Layout className="h-8 w-8" />,
      title: "UI/UX设计",
      description: "用户界面与用户体验设计，打造直观易用的产品界面",
      features: ["用户研究", "交互设计", "视觉设计", "原型测试"],
      color: "text-blue-600",
      bgColor: "bg-blue-50"
    },
    {
      icon: <Palette className="h-8 w-8" />,
      title: "品牌视觉设计",
      description: "企业品牌形象设计，建立统一的视觉识别系统",
      features: ["Logo设计", "VI系统", "品牌手册", "应用规范"],
      color: "text-purple-600",
      bgColor: "bg-purple-50"
    },
    {
      icon: <Code className="h-8 w-8" />,
      title: "产品架构设计",
      description: "技术架构与系统设计，确保产品的可扩展性和稳定性",
      features: ["技术选型", "系统架构", "数据库设计", "API设计"],
      color: "text-green-600",
      bgColor: "bg-green-50"
    },
    {
      icon: <Users className="h-8 w-8" />,
      title: "用户体验规划",
      description: "全面的用户体验策略规划，提升产品用户满意度",
      features: ["用户旅程", "可用性测试", "数据分析", "优化建议"],
      color: "text-orange-600",
      bgColor: "bg-orange-50"
    }
  ];

  const processSteps = [
    {
      step: 1,
      title: "需求分析",
      description: "深入了解业务需求，明确设计目标",
      icon: <Target className="h-6 w-6" />,
      duration: "1-2周"
    },
    {
      step: 2,
      title: "概念设计",
      description: "创意构思，确定设计方向和风格",
      icon: <Palette className="h-6 w-6" />,
      duration: "2-3周"
    },
    {
      step: 3,
      title: "详细设计",
      description: "完成界面设计和交互细节",
      icon: <Layout className="h-6 w-6" />,
      duration: "3-4周"
    },
    {
      step: 4,
      title: "原型开发",
      description: "制作可交互原型，进行用户测试",
      icon: <Code className="h-6 w-6" />,
      duration: "2-3周"
    },
    {
      step: 5,
      title: "优化迭代",
      description: "根据反馈优化设计，完善细节",
      icon: <CheckCircle className="h-6 w-6" />,
      duration: "1-2周"
    }
  ];

  const caseStudies = [
    {
      title: "金融科技平台设计",
      description: "为某大型金融机构设计移动端理财平台",
      results: ["用户满意度提升35%", "交易转化率增加20%", "操作效率提升50%"],
      industry: "金融"
    },
    {
      title: "教育SaaS系统设计",
      description: "在线教育平台的整体用户体验设计",
      results: ["用户留存率提升40%", "课程完成率增加25%", "教师工作效率提升60%"],
      industry: "教育"
    },
    {
      title: "医疗健康APP设计",
      description: "智能医疗健康管理移动应用设计",
      results: ["日活跃用户增长300%", "用户满意度4.8/5.0", "医疗咨询效率提升70%"],
      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">50+</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>

      {/* 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 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: <Users className="h-8 w-8" />,
                title: "用户中心",
                description: "始终以用户需求和体验为核心"
              },
              {
                icon: <Shield className="h-8 w-8" />,
                title: "简洁直观",
                description: "追求简洁明了的设计表达"
              },
              {
                icon: <Zap className="h-8 w-8" />,
                title: "高效实用",
                description: "注重设计的实用性和效率"
              },
              {
                icon: <BarChart 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>
  );
}