<template>
  <section class=" bg-white dark:bg-gray-900 py-20 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
      <!-- 主标题 -->
      <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>

      <!-- 解决方案网格 -->
      <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
        <!-- 定制化共享电动车 -->
        <div
            class="group relative bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
          <div
              class="absolute inset-0 bg-gradient-to-br from-yellow-400/10 to-yellow-600/5 dark:from-yellow-500/10 dark:to-yellow-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>

          <div class="relative z-10">
            <!-- 图标区域 -->
            <div
                class="w-20 h-20 bg-yellow-500 dark:bg-yellow-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
              <svg class="w-10 h-10 text-white" 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>

            <!-- 内容 -->
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">定制化共享电动车</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              专为共享场景设计的电动车，具备耐用性、安全性和智能化特性，满足不同运营需求
            </p>

            <!-- 电动车示意图 -->
            <div class="mt-6 relative h-32">
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="w-24 h-16 bg-yellow-400 dark:bg-yellow-600 rounded-lg relative">
                  <!-- 车架 -->
                  <div class="absolute top-2 left-2 w-20 h-8 bg-yellow-300 dark:bg-yellow-500 rounded"/>
                  <!-- 车轮 -->
                  <div class="absolute bottom-0 left-2 w-4 h-4 bg-gray-800 dark:bg-gray-700 rounded-full"/>
                  <div class="absolute bottom-0 right-2 w-4 h-4 bg-gray-800 dark:bg-gray-700 rounded-full"/>
                  <!-- 车把 -->
                  <div class="absolute top-1 -left-2 w-2 h-4 bg-gray-800 dark:bg-gray-700 rounded"/>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 专业级IOT物联网设备 -->
        <div
            class="group relative bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
          <div
              class="absolute inset-0 bg-gradient-to-br from-blue-400/10 to-blue-600/5 dark:from-blue-500/10 dark:to-blue-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>

          <div class="relative z-10">
            <!-- 图标区域 -->
            <div
                class="w-20 h-20 bg-blue-500 dark:bg-blue-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
              <svg class="w-10 h-10 text-white" 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>

            <!-- 内容 -->
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">专业级IOT物联网设备</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              高精度定位、实时数据传输、远程控制，确保车辆管理和用户服务的可靠性
            </p>

            <!-- IOT设备示意图 -->
            <div class="mt-6 relative h-32">
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="w-16 h-12 bg-gray-800 dark:bg-gray-700 rounded-lg relative">
                  <!-- 指示灯 -->
                  <div class="absolute top-2 left-2 w-2 h-2 bg-green-500 rounded-full animate-pulse"/>
                  <!-- 接口 -->
                  <div class="absolute bottom-2 left-4 w-8 h-1 bg-gray-600 dark:bg-gray-500 rounded"/>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 多平台APP快速开发 -->
        <div
            class="group relative bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
          <div
              class="absolute inset-0 bg-gradient-to-br from-green-400/10 to-green-600/5 dark:from-green-500/10 dark:to-green-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>

          <div class="relative z-10">
            <!-- 图标区域 -->
            <div
                class="w-20 h-20 bg-green-500 dark:bg-green-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
              <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                    d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v край 2a2 2 0 002 2z"
                    stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2"/>
              </svg>
            </div>

            <!-- 内容 -->
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">多平台APP快速开发</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              支持iOS、Android、小程序多端开发，提供完整的用户端和运维端应用解决方案
            </p>

            <!-- 手机示意图 -->
            <div class="mt-6 relative h-32">
              <div class="absolute inset-0 flex items-center justify-center">
                <div
                    class="w-12 h-20 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 rounded-xl relative">
                  <!-- 屏幕内容 -->
                  <div class="absolute inset-1 bg-blue-100 dark:bg-blue-900 rounded">
                    <!-- 地图示意 -->
                    <div class="absolute top-1 left-1 right-1 h-8 bg-blue-200 dark:bg-blue-800 rounded"/>
                    <!-- 按钮 -->
                    <div
                        class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-6 h-6 bg-blue-500 dark:bg-blue-600 rounded-full"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 专业级运营管理平台 -->
        <div
            class="group relative bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
          <div
              class="absolute inset-0 bg-gradient-to-br from-purple-400/10 to-purple-600/5 dark:from-purple-500/10 dark:to-purple-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>

          <div class="relative z-10">
            <!-- 图标区域 -->
            <div
                class="w-20 h-20 bg-purple-500 dark:bg-purple-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
              <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                    stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2"/>
              </svg>
            </div>

            <!-- 内容 -->
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">专业级运营管理平台</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              实时监控、数据分析、智能调度、财务管理，全方位支撑运营决策和业务管理
            </p>

            <!-- 电脑示意图 -->
            <div class="mt-6 relative h-32">
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="w-20 h-16 bg-gray-800 dark:bg-gray-700 rounded-t-lg relative">
                  <!-- 屏幕 -->
                  <div class="absolute inset-1 bg-blue-100 dark:bg-blue-900 rounded">
                    <!-- 数据图表示意 -->
                    <div class="absolute top-1 left-1 right-1 h-2 bg-blue-300 dark:bg-blue-700 rounded"/>
                    <div class="absolute top-4 left-1 right-1 h-2 bg-blue-400 dark:bg-blue-600 rounded"/>
                    <div class="absolute top-7 left-1 right-1 h-2 bg-blue-500 dark:bg-blue-500 rounded"/>
                  </div>
                </div>
                <!-- 底座 -->
                <div class="absolute -bottom-4 w-24 h-2 bg-gray-700 dark:bg-gray-600 rounded-b-lg"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
/* 自定义动画效果 */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .grid {
    gap: 1.5rem;
  }

  .text-4xl {
    font-size: 2rem;
  }
}
</style>