<template>
  <div class=" bg-white dark:bg-gray-900">


    <div class="text-center mb-16">
      <h1 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
        共享电动车 + 物联网设备
      </h1>
      <p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        智能物联技术，打造安全高效的共享出行体验
      </p>
    </div>

    <!-- 功能特性网格 -->
    <section class="py-20">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
          <!-- 物联网设备数据传输 -->
          <div
              class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="flex items-start space-x-4">
              <!-- 图标区域 -->
              <div
                  class="flex-shrink-0 w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <!-- 内容区域 -->
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                  物联网设备数据传输
                </h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                  通过联网中控及车载控制器设备实现实时数据传输，确保车辆状态实时监控
                </p>
              </div>
            </div>

            <!-- 设备示意图 -->
            <div
                class="mt-6 relative h-32 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/10 rounded-lg p-4">
              <div class="flex items-center justify-center h-full">
                <div class="flex space-x-4">
                  <!-- 中控设备 -->
                  <div class="w-12 h-8 bg-blue-500 rounded-lg relative">
                    <div class="absolute top-1 left-1 w-2 h-2 bg-green-400 rounded-full animate-pulse"/>
                  </div>
                  <!-- 数据传输示意 -->
                  <div class="flex items-center space-x-1">
                    <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0s"/>
                    <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.2s"/>
                    <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.4s"/>
                  </div>
                  <!-- 车载控制器 -->
                  <div class="w-10 h-6 bg-gray-800 rounded relative">
                    <div class="absolute top-1 left-1 w-1 h-1 bg-yellow-400 rounded-full"/>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 防水防盗防高温 -->
          <div
              class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="flex items-start space-x-4">
              <!-- 图标区域 -->
              <div
                  class="flex-shrink-0 w-16 h-16 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <!-- 内容区域 -->
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                  防水防盗防高温
                </h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                  车辆及设备采用防水式设计、材料采用防高温材料，并加载智能防盗系统
                </p>
              </div>
            </div>

            <!-- 防护示意图 -->
            <div
                class="mt-6 relative h-32 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/10 rounded-lg p-4">
              <div class="flex items-center justify-center h-full space-x-6">
                <!-- 防水图标 -->
                <div class="text-center">
                  <div class="w-10 h-10 bg-blue-400 rounded-full flex items-center justify-center mx-auto mb-2">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                          d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
                          stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="2"/>
                    </svg>
                  </div>
                  <span class="text-xs text-gray-600 dark:text-gray-400">防水设计</span>
                </div>

                <!-- 防盗图标 -->
                <div class="text-center">
                  <div class="w-10 h-10 bg-red-400 rounded-full flex items-center justify-center mx-auto mb-2">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                          stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="2"/>
                    </svg>
                  </div>
                  <span class="text-xs text-gray-600 dark:text-gray-400">智能防盗</span>
                </div>

                <!-- 防高温图标 -->
                <div class="text-center">
                  <div class="w-10 h-10 bg-orange-400 rounded-full flex items-center justify-center mx-auto mb-2">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                          d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"
                          stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="2"/>
                    </svg>
                  </div>
                  <span class="text-xs text-gray-600 dark:text-gray-400">防高温</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 出骑行区提醒 -->
          <div
              class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="flex items-start space-x-4">
              <!-- 图标区域 -->
              <div
                  class="flex-shrink-0 w-16 h-16 bg-yellow-100 dark:bg-yellow-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <!-- 内容区域 -->
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                  出骑行区提醒
                </h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                  车辆出骑行区，车辆喇叭自动发出语音提醒，若不按语音要求返回则车辆自动断电
                </p>
              </div>
            </div>

            <!-- 提醒示意图 -->
            <div
                class="mt-6 relative h-32 bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/10 rounded-lg p-4">
              <div class="flex items-center justify-center h-full">
                <div class="text-center">
                  <div
                      class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-2 animate-pulse">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                          d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"/>
                    </svg>
                  </div>
                  <span class="text-sm font-medium text-gray-700 dark:text-gray-300">超出骑行区域</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 在线寻车 -->
          <div
              class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="flex items-start space-x-4">
              <!-- 图标区域 -->
              <div
                  class="flex-shrink-0 w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                  <path
                      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <!-- 内容区域 -->
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                  在线寻车
                </h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                  根据车辆定位及电量信息，可在线查找最合适的可骑行车辆
                </p>
              </div>
            </div>

            <!-- 寻车示意图 -->
            <div
                class="mt-6 relative h-32 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-lg p-4">
              <div class="flex items-center justify-center h-full">
                <div class="relative">
                  <!-- 地图背景 -->
                  <div class="w-24 h-16 bg-blue-100 dark:bg-blue-900 rounded-lg relative">
                    <!-- 车辆标记 -->
                    <div class="absolute top-4 left-6 w-3 h-3 bg-green-500 rounded-full animate-bounce"/>
                    <div class="absolute top-8 left-10 w-3 h-3 bg-yellow-500 rounded-full"/>
                    <div class="absolute top-2 left-14 w-3 h-3 bg-red-500 rounded-full"/>
                  </div>
                  <!-- 定位图标 -->
                  <div
                      class="absolute -top-2 -right-2 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center">
                    <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                      <path
                          clip-rule="evenodd"
                          d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                          fill-rule="evenodd"/>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 规范停车区 -->
          <div
              class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="flex items-start space-x-4">
              <!-- 图标区域 -->
              <div
                  class="flex-shrink-0 w-16 h-16 bg-indigo-100 dark:bg-indigo-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                </svg>
              </div>

              <!-- 内容区域 -->
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                  规范停车区
                </h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                  通过运营管理平台设置停车区，若用户不在停车区内停车，则需额外支付车辆调度费
                </p>
              </div>
            </div>

            <!-- 停车区示意图 -->
            <div
                class="mt-6 relative h-32 bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/10 rounded-lg p-4">
              <div class="flex items-center justify-center h-full">
                <div class="relative">
                  <!-- 停车区域 -->
                  <div
                      class="w-20 h-12 bg-green-100 dark:bg-green-900 border-2 border-green-400 dark:border-green-600 rounded-lg relative">
                    <!-- 停车标记 -->
                    <div
                        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-6 bg-green-400 dark:bg-green-600 rounded flex items-center justify-center">
                      <span class="text-white text-xs font-bold">P</span>
                    </div>
                  </div>
                  <!-- 车辆图标 -->
                  <div
                      class="absolute -right-4 top-1/2 transform -translate-y-1/2 w-8 h-4 bg-gray-600 rounded-sm"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


  </div>
</template>


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

.animate-float {
  animation: float 3s ease-in-out infinite;
}
</style>