<script lang="ts" setup>
// 物联网系统开发数据
const iotSystemDevelopment = {
  title: '物联网系统开发',
  subtitle: '一站式物联网解决方案提供，携手搭建物联网生态圈',
  description: '专业的物联网系统开发团队，为企业提供全方位的物联网解决方案'
}

// APP/微信/小程序用户端功能
const userClientFeatures = [
  {
    id: 1,
    title: '蓝牙连接',
    icon: 'i-lucide-bluetooth',
    description: '通过蓝牙连接完成APP与智能终端间的对接'
  },
  {
    id: 2,
    title: 'GPS定位',
    icon: 'i-lucide-map-pin',
    description: '调用GPS定位，达到定位用户位置，记录用户运动'
  },
  {
    id: 3,
    title: '数据分享',
    icon: 'i-lucide-share',
    description: '将运行数据、硬件数据意见分享到站外应用，如新浪微博、微信等，与更多朋友互动'
  },
  {
    id: 4,
    title: '扫码使用',
    icon: 'i-lucide-qr-code',
    description: '扫码使用设备，流程简单、体验佳'
  },
  {
    id: 5,
    title: '硬件数据分析',
    icon: 'i-lucide-bar-chart',
    description: '实时分析硬件数据，提供智能决策支持'
  }
]

// PC管理端功能
const pcManagementFeatures = [
  {
    id: 1,
    title: '设备管理',
    icon: 'i-lucide-settings',
    description: '全面的设备管理功能，支持设备配置、监控和维护'
  },
  {
    id: 2,
    title: '设备监控',
    icon: 'i-lucide-monitor',
    description: '实时监控设备状态，及时发现和处理异常情况'
  },
  {
    id: 3,
    title: '生命周期管理',
    icon: 'i-lucide-clock',
    description: '完整的设备生命周期管理，从采购到报废全程跟踪'
  },
  {
    id: 4,
    title: '维修工单管理',
    icon: 'i-lucide-wrench',
    description: '高效的维修工单管理系统，提升维护效率'
  },
  {
    id: 5,
    title: '合同管理',
    icon: 'i-lucide-file-text',
    description: '完善的合同管理功能，确保合规运营'
  },
  {
    id: 6,
    title: '工单流程管理',
    icon: 'i-lucide-workflow',
    description: '灵活的工单流程管理，支持自定义业务流程'
  }
]

// APP移动运维端功能
const mobileOandMFeatures = [
  {
    id: 1,
    title: '实时监控',
    icon: 'i-lucide-activity',
    description: '监控所有设备位置、运行状态，实时掌握设备情况'
  },
  {
    id: 2,
    title: '权限分配',
    icon: 'i-lucide-user-check',
    description: '手机权限分配，支持厂家-经销商-合同能源管理企业-用户等角色管理'
  },
  {
    id: 3,
    title: '工单流转',
    icon: 'i-lucide-arrow-right-left',
    description: '手机工单流转，提升工作效率'
  },
  {
    id: 4,
    title: '扫码注册',
    icon: 'i-lucide-scan',
    description: '扫描二维码注册，识别当前设备所有参数、运行信息、维护人员及历史消息等'
  },
  {
    id: 5,
    title: '售后服务',
    icon: 'i-lucide-headphones',
    description: '售后拍照回传、信息录入、抄表，提供完善的售后服务支持'
  }
]

// 系统特性
const systemFeatures = [
  {
    id: 1,
    title: '模块化设计',
    icon: 'i-lucide-package',
    description: '采用模块化设计，简便易用，高度自定义，无需二次开发'
  },
  {
    id: 2,
    title: '高度自定义',
    icon: 'i-lucide-settings-2',
    description: '根据用户需求配置各种应用模块，灵活适应不同业务场景'
  },
  {
    id: 3,
    title: '无需二次开发',
    icon: 'i-lucide-zap',
    description: '开箱即用的解决方案，快速部署，降低开发成本'
  }
]
</script>

<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Hero Section - 物联网系统开发 -->
    <section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
      <!-- 背景 -->
      <div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <!-- 几何图案 -->
        <div class="absolute inset-0 opacity-20">
          <div class="absolute inset-0">
            <!-- 网格图案 -->
            <div 
              v-for="i in 20" 
              :key="i"
              class="absolute w-4 h-4 border border-blue-400/30 rounded"
              :style="{
                left: Math.random() * 100 + '%',
                top: Math.random() * 100 + '%',
                transform: `rotate(${Math.random() * 360}deg)`
              }"
            ></div>
          </div>
        </div>
        
        <!-- 发光圆形 -->
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96">
          <div class="w-full h-full rounded-full border-2 border-dashed border-blue-400/50 animate-pulse"></div>
          <div class="absolute inset-8 rounded-full border border-dashed border-blue-300/30 animate-pulse" style="animation-delay: 0.5s"></div>
        </div>
        
        <!-- 曲线线条 -->
        <div class="absolute bottom-0 right-0 w-64 h-64">
          <svg class="w-full h-full text-blue-400/30" viewBox="0 0 100 100">
            <path d="M0,80 Q30,20 60,40 T100,20" stroke="currentColor" stroke-width="2" fill="none" class="animate-pulse"/>
            <path d="M0,60 Q20,10 50,30 T100,10" stroke="currentColor" stroke-width="1" fill="none" class="animate-pulse" style="animation-delay: 1s"/>
          </svg>
        </div>
        
        <!-- 手部线框 -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-32 h-32">
          <svg class="w-full h-full text-blue-400" viewBox="0 0 100 100">
            <path d="M20,80 L30,70 L40,75 L50,65 L60,70 L70,60 L80,65 L85,55" stroke="currentColor" stroke-width="2" fill="none"/>
            <circle cx="25" cy="75" r="3" fill="currentColor"/>
            <circle cx="35" cy="70" r="3" fill="currentColor"/>
            <circle cx="45" cy="75" r="3" fill="currentColor"/>
            <circle cx="55" cy="65" r="3" fill="currentColor"/>
            <circle cx="65" cy="70" r="3" fill="currentColor"/>
            <circle cx="75" cy="60" r="3" fill="currentColor"/>
            <circle cx="80" cy="65" r="3" fill="currentColor"/>
            <circle cx="85" cy="55" r="3" fill="currentColor"/>
          </svg>
        </div>
      </div>
      
      <!-- 内容 -->
      <div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center text-white">
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
            {{ iotSystemDevelopment.title }}
          </h1>
          <p class="text-xl md:text-2xl text-blue-200 dark:text-blue-300 mb-8 max-w-4xl mx-auto leading-relaxed">
            {{ iotSystemDevelopment.subtitle }}
          </p>
          <p class="text-lg md:text-xl text-blue-100 dark:text-blue-200 max-w-2xl mx-auto">
            {{ iotSystemDevelopment.description }}
          </p>
        </div>
      </div>
    </section>

    <!-- APP/微信/小程序用户端 -->
    <section class="py-16 md:py-20 bg-white dark:bg-gray-800">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 标题区域 -->
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            APP/微信/小程序用户端
          </h2>
          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <!-- 手机展示 -->
          <div class="relative flex justify-center items-center">
            <div class="relative w-64 h-96 md:w-80 md:h-[480px]">
              <!-- 手机外壳 -->
              <div class="absolute inset-0 bg-gray-300 dark:bg-gray-600 rounded-3xl p-2 shadow-2xl">
                <div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
                  <!-- 应用界面 -->
                  <div class="p-4 h-full">
                    <!-- 通知区域 -->
                    <div class="flex items-center mb-4">
                      <div class="w-8 h-4 bg-pink-200 dark:bg-pink-800 rounded mr-2"></div>
                      <div class="w-12 h-4 bg-pink-200 dark:bg-pink-800 rounded"></div>
                    </div>
                    
                    <!-- 用户信息 -->
                    <div class="text-center mb-6">
                      <div class="w-16 h-16 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-2 flex items-center justify-center">
                        <UIcon name="i-lucide-user" class="w-8 h-8 text-gray-600 dark:text-gray-300" />
                      </div>
                      <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
                      <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mx-auto"></div>
                    </div>
                    
                    <!-- 聊天区域 -->
                    <div class="flex justify-end mb-4">
                      <div class="w-20 h-12 bg-gray-900 dark:bg-gray-100 rounded-lg flex items-center justify-center">
                        <div class="w-6 h-4 bg-white dark:bg-gray-800 rounded"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 功能连接点 -->
              <div class="absolute inset-0">
                <!-- 蓝牙连接 -->
                <div class="absolute -left-8 top-1/4">
                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
                  <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
                    蓝牙连接
                  </div>
                </div>
                
                <!-- GPS定位 -->
                <div class="absolute -right-8 top-1/4">
                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
                  <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
                    GPS定位
                  </div>
                </div>
                
                <!-- 扫码使用 -->
                <div class="absolute -right-8 bottom-1/4">
                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
                  <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
                    扫码使用
                  </div>
                </div>
                
                <!-- 硬件数据分析 -->
                <div class="absolute -left-8 bottom-1/3">
                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
                  <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
                    硬件数据分析
                  </div>
                </div>
                
                <!-- 连接线 -->
                <svg class="absolute inset-0 w-full h-full pointer-events-none">
                  <line x1="0" y1="25%" x2="20%" y2="25%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
                  <line x1="80%" y1="25%" x2="100%" y2="25%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
                  <line x1="80%" y1="75%" x2="100%" y2="75%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
                  <line x1="0" y1="66%" x2="20%" y2="66%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
                </svg>
              </div>
            </div>
          </div>

          <!-- 功能列表 -->
          <div class="space-y-6">
            <div 
              v-for="feature in userClientFeatures" 
              :key="feature.id"
              class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300"
            >
              <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                <UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  {{ feature.title }}
                </h3>
                <p class="text-gray-600 dark:text-gray-300">
                  {{ feature.description }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- PC管理端 -->
    <section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 标题区域 -->
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            PC管理端
          </h2>
          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <!-- 功能列表 -->
          <div class="space-y-6">
            <div 
              v-for="feature in pcManagementFeatures" 
              :key="feature.id"
              class="flex items-start p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300"
            >
              <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                <UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  {{ feature.title }}
                </h3>
                <p class="text-gray-600 dark:text-gray-300">
                  {{ feature.description }}
                </p>
              </div>
            </div>
          </div>

          <!-- 电脑展示 -->
          <div class="relative flex justify-center items-center">
            <div class="relative w-80 h-64 md:w-96 md:h-72">
              <!-- 电脑外壳 -->
              <div class="absolute inset-0 bg-gray-200 dark:bg-gray-600 rounded-lg shadow-2xl">
                <div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
                  <!-- 屏幕内容 -->
                  <div class="p-4 h-full">
                    <!-- 顶部卡片 -->
                    <div class="flex space-x-2 mb-4">
                      <div class="w-16 h-8 bg-gray-100 dark:bg-gray-700 rounded"></div>
                      <div class="w-20 h-8 bg-gray-100 dark:bg-gray-700 rounded"></div>
                    </div>
                    
                    <!-- 图表区域 -->
                    <div class="flex space-x-4 mb-4">
                      <!-- 饼图 -->
                      <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
                        <div class="w-12 h-12 bg-red-500 rounded-full"></div>
                      </div>
                      
                      <!-- 柱状图 -->
                      <div class="flex-1 space-y-1">
                        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded"></div>
                        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
                        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
                      </div>
                    </div>
                    
                    <!-- 底部图表 -->
                    <div class="space-y-2">
                      <div class="h-2 bg-red-500 rounded"></div>
                      <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded"></div>
                      <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 功能标签 -->
              <div class="absolute -top-4 -left-4 bg-white dark:bg-gray-800 rounded-lg p-2 shadow-lg">
                <div class="w-8 h-8 bg-red-100 dark:bg-red-900 rounded flex items-center justify-center">
                  <UIcon name="i-lucide-wrench" class="w-4 h-4 text-red-600 dark:text-red-400" />
                </div>
              </div>
              
              <div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 rounded-lg p-2 shadow-lg">
                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded flex items-center justify-center">
                  <UIcon name="i-lucide-check-square" class="w-4 h-4 text-blue-600 dark:text-blue-400" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- APP移动运维端 -->
    <section class="py-16 md:py-20 bg-white dark:bg-gray-800">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 标题区域 -->
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            APP移动运维端
          </h2>
          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <!-- 手机展示 -->
          <div class="relative flex justify-center items-center">
            <div class="relative w-64 h-96 md:w-80 md:h-[480px]">
              <!-- 手机外壳 -->
              <div class="absolute inset-0 bg-gray-300 dark:bg-gray-600 rounded-3xl p-2 shadow-2xl">
                <div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
                  <!-- 应用界面 -->
                  <div class="p-4 h-full">
                    <!-- 进度环 -->
                    <div class="flex justify-center mb-6">
                      <div class="relative w-20 h-20">
                        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
                          <circle cx="50" cy="50" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                          <circle cx="50" cy="50" r="40" stroke="#ef4444" stroke-width="8" fill="none" 
                                  stroke-dasharray="251.2" stroke-dashoffset="105.5"/>
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                          <span class="text-sm font-bold text-gray-900 dark:text-white">58%</span>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 列表项 -->
                    <div class="space-y-3">
                      <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded"></div>
                      <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
                      <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
                      <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-5/6"></div>
                      <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-2/3"></div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 功能连接点 -->
              <div class="absolute inset-0">
                <!-- 实时监控 -->
                <div class="absolute -left-8 top-1/4">
                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
                  <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
                    实时监控
                  </div>
                </div>
                
                <!-- 权限分配 -->
                <div class="absolute -right-8 top-1/4">
                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
                  <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
                    权限分配
                  </div>
                </div>
                
                <!-- 工单流转 -->
                <div class="absolute -left-8 top-1/2">
                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
                  <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
                    工单流转
                  </div>
                </div>
                
                <!-- 扫码注册 -->
                <div class="absolute -left-8 bottom-1/4">
                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
                  <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
                    扫码注册
                  </div>
                </div>
                
                <!-- 售后服务 -->
                <div class="absolute -right-8 bottom-1/4">
                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
                  <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
                    售后服务
                  </div>
                </div>
                
                <!-- 连接线 -->
                <svg class="absolute inset-0 w-full h-full pointer-events-none">
                  <circle cx="50%" cy="50%" r="45%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
                </svg>
              </div>
            </div>
          </div>

          <!-- 功能列表 -->
          <div class="space-y-6">
            <div 
              v-for="feature in mobileOandMFeatures" 
              :key="feature.id"
              class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300"
            >
              <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                <UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  {{ feature.title }}
                </h3>
                <p class="text-gray-600 dark:text-gray-300">
                  {{ feature.description }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 系统特性 -->
    <section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 标题区域 -->
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            系统特性
          </h2>
          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
        </div>

        <!-- 特性展示 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div 
            v-for="feature in systemFeatures" 
            :key="feature.id"
            class="text-center p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
          >
            <div class="w-16 h-16 mx-auto mb-6 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
              <UIcon :name="feature.icon" class="w-8 h-8 text-blue-600 dark:text-blue-400" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
              {{ feature.title }}
            </h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              {{ feature.description }}
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* 自定义动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
}
</style>