<script lang="ts" setup>
// 智能控制器功能特性
const controllerFeatures = [
  {
    icon: 'i-lucide-bluetooth',
    title: '蓝牙GPRS双通道解锁',
    description: '支持蓝牙和GPRS双重通信，确保解锁稳定可靠'
  },
  {
    icon: 'i-lucide-key-round',
    title: '一键启动、无需钥匙',
    description: '智能启动系统，告别传统钥匙，操作更便捷'
  },
  {
    icon: 'i-lucide-map-pin',
    title: '卫星定位、精准跟踪',
    description: 'GPS定位技术，实时掌握车辆位置信息'
  },
  {
    icon: 'i-lucide-shield-alert',
    title: '防盗报警、不怕丢失',
    description: '智能防盗系统，异常情况及时报警通知'
  }
]

// 快速定制服务
const customizationServices = [
  {
    icon: 'i-lucide-smartphone',
    title: '独立APP定制',
    description: '15个工作日完成独立应用上线'
  },
  {
    icon: 'i-lucide-zap',
    title: '小程序开发',
    description: '快速定制微信小程序解决方案'
  },
  {
    icon: 'i-lucide-settings',
    title: '一键管理',
    description: '品牌信息一键管理，操作简单便捷'
  },
  {
    icon: 'i-lucide-clock',
    title: '快速交付',
    description: '高效开发流程，确保项目按时交付'
  }
]

// 用户端功能
const userFeatures = [
  {
    icon: 'i-lucide-battery',
    title: '智能电量计算',
    description: '精准计算剩余电量，合理安排出行'
  },
  {
    icon: 'i-lucide-key',
    title: '智能无钥匙启停',
    description: '手机一键启动，告别传统钥匙'
  },
  {
    icon: 'i-lucide-map',
    title: '实时定位轨迹查询',
    description: '实时查看车辆位置，历史轨迹一目了然'
  },
  {
    icon: 'i-lucide-shield',
    title: '智能防盗',
    description: '多重防盗保护，车辆安全有保障'
  },
  {
    icon: 'i-lucide-users',
    title: '车主授权家庭共享',
    description: '支持家庭成员共享使用，权限管理灵活'
  },
  {
    icon: 'i-lucide-search',
    title: '一键寻车',
    description: '快速定位车辆位置，找车不再困难'
  },
  {
    icon: 'i-lucide-lock',
    title: '远程设防撤防',
    description: '远程控制车辆状态，安全便捷'
  },
  {
    icon: 'i-lucide-gauge',
    title: '速度检测',
    description: '实时监测行驶速度，安全驾驶提醒'
  }
]

// 管理平台功能
const managementFeatures = [
  {
    icon: 'i-lucide-monitor',
    title: '实时车辆监控',
    description: '全方位监控车辆状态，数据实时更新'
  },
  {
    icon: 'i-lucide-bell',
    title: '智能异常报警',
    description: '异常情况自动报警，及时处理问题'
  },
  {
    icon: 'i-lucide-remote',
    title: '远程车辆控制',
    description: '远程控制车辆功能，管理更高效'
  },
  {
    icon: 'i-lucide-database',
    title: '用户数据查看',
    description: '详细用户数据分析，支持决策制定'
  },
  {
    icon: 'i-lucide-cog',
    title: '智能服务设置',
    description: '灵活配置服务参数，满足不同需求'
  },
  {
    icon: 'i-lucide-user-check',
    title: '权限管理',
    description: '多级权限管理，确保系统安全'
  }
]
</script>

<template>
  <div class="bg-gray-50 dark:bg-gray-900">
    <!-- Hero Section - 创特科技倾心打造 -->
    <section class="py-16 md:py-20 bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <!-- 电动车图片 -->
          <div class="relative">
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
              <img
                  alt="智能电动车"
                  class="w-full h-64 md:h-80 object-cover rounded-lg"
                  src="https://picsum.photos/600/400?random=electric-scooter"
              >
            </div>
          </div>

          <!-- 文字内容 -->
          <div class="text-center lg:text-left">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
              创特科技倾心打造
            </h1>
            <div class="text-2xl md:text-3xl font-semibold text-red-600 dark:text-red-400 mb-4">
              APP+智能中控+数据采集+云储存
            </div>
            <p class="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
              电动车智能改造，建立智慧出行生态圈
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 智慧电动车解决方案三部分 -->
    <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 font-bold text-gray-900 dark:text-white mb-4">
            智慧电动车解决方案
          </h2>
          <p class="text-xl text-gray-600 dark:text-gray-300">
            从传统电动车到智能出行生态的完整解决方案
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 传统电动车 -->
          <div class="text-center bg-gray-50 dark:bg-gray-700 rounded-2xl p-8">
            <div class="mb-6">
              <img
                  alt="传统电动车"
                  class="w-full h-48 object-cover rounded-lg mx-auto"
                  src="https://picsum.photos/300/200?random=traditional-scooter"
              >
            </div>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              传统电动车
            </h3>
            <p class="text-gray-600 dark:text-gray-300">
              基础出行工具，功能单一，缺乏智能化
            </p>
          </div>

          <!-- 智能中控 -->
          <div class="text-center bg-gray-50 dark:bg-gray-700 rounded-2xl p-8">
            <div class="mb-6">
              <img
                  alt="智能中控"
                  class="w-full h-48 object-cover rounded-lg mx-auto"
                  src="https://picsum.photos/300/200?random=smart-controller"
              >
            </div>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              智能中控
            </h3>
            <p class="text-gray-600 dark:text-gray-300">
              核心控制单元，实现车辆智能化升级
            </p>
          </div>

          <!-- 系统软件 -->
          <div class="text-center bg-gray-50 dark:bg-gray-700 rounded-2xl p-8">
            <div class="mb-6">
              <img
                  alt="系统软件"
                  class="w-full h-48 object-cover rounded-lg mx-auto"
                  src="https://picsum.photos/300/200?random=system-software"
              >
            </div>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              系统软件
            </h3>
            <p class="text-gray-600 dark:text-gray-300">
              管理平台和用户端应用，完整生态闭环
            </p>
          </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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <!-- 图片区域 -->
          <div class="relative flex justify-center items-center min-h-[400px]">
            <div class="relative">
              <img
                  alt="电动车智能控制器"
                  class="max-w-full h-auto rounded-lg shadow-xl"
                  src="https://picsum.photos/500/400?random=scooter-controller"
              >
              <!-- 信号效果 -->
              <div class="absolute inset-0 flex justify-center items-center">
                <div class="absolute w-48 h-48 rounded-full border border-red-300 animate-ping-slow"/>
                <div class="absolute w-64 h-64 rounded-full border border-red-300 animate-ping-slow delay-100"/>
                <div class="absolute w-80 h-80 rounded-full border border-red-300 animate-ping-slow delay-200"/>
                <!-- 核心组件 -->
                <div
                    class="absolute w-16 h-16 bg-red-600 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-lg">
                  芯
                </div>
              </div>
            </div>
          </div>

          <!-- 文字内容 -->
          <div>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
              一个配件实现车辆智能化
            </h2>
            <p class="text-lg text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
              为车厂量身打造，对电动车隐蔽加装智能控制器，增加智能防盗功能。智能控制器是系统核心，具备车辆定位信息采集、数据双向传输等功能，通过联动电动车控制系统和BMS电池系统实现各应用功能。
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div
                  v-for="feature in controllerFeatures"
                  :key="feature.title"
                  class="flex items-start p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm"
              >
                <UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3 flex-shrink-0 mt-1"/>
                <div>
                  <h3 class="font-semibold text-gray-900 dark:text-white mb-1">{{ feature.title }}</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-300">{{ feature.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 快速定制能力 -->
    <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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <!-- 文字内容 -->
          <div>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
              快速定制能力实现品牌运营
            </h2>
            <p class="text-lg text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
              独立APP/小程序快速定制，15个工作日完成独立应用上线，一键管理品牌信息。
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div
                  v-for="service in customizationServices"
                  :key="service.title"
                  class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <UIcon :name="service.icon" class="w-6 h-6 text-green-600 dark:text-green-400 mr-3 flex-shrink-0 mt-1"/>
                <div>
                  <h3 class="font-semibold text-gray-900 dark:text-white mb-1">{{ service.title }}</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-300">{{ service.description }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 图片区域 -->
          <div class="relative">
            <div class="grid grid-cols-2 gap-4">
              <img
                  alt="电动车前部"
                  class="w-full h-48 object-cover rounded-lg shadow-lg"
                  src="https://picsum.photos/300/200?random=scooter-front"
              >
              <img
                  alt="电动车后部"
                  class="w-full h-48 object-cover rounded-lg shadow-lg"
                  src="https://picsum.photos/300/200?random=scooter-rear"
              >
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 智能电动车小程序/APP 和 管理平台 -->
    <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 font-bold text-gray-900 dark:text-white mb-4">
            完整解决方案
          </h2>
          <p class="text-xl text-gray-600 dark:text-gray-300">
            用户端与管理端双平台，构建完整智能出行生态
          </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
          <!-- 用户端 - 小程序/APP -->
          <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
            <div class="text-center mb-8">
              <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                智能电动车
                <span class="text-red-600 dark:text-red-400">小程序/APP</span>
              </h3>
            </div>

            <!-- 手机界面模拟 -->
            <div class="relative mx-auto w-64 h-96 bg-black rounded-3xl p-2 mb-8">
              <div class="w-full h-full bg-white rounded-2xl overflow-hidden">
                <div class="h-8 bg-gray-100 flex items-center justify-center">
                  <div class="w-16 h-1 bg-gray-300 rounded-full"/>
                </div>
                <div class="p-4 h-full bg-gradient-to-b from-red-50 to-white">
                  <div class="text-right mb-4">
                    <UButton color="gray" size="xs" variant="outline">登录</UButton>
                  </div>
                  <div class="text-center">
                    <div class="w-32 h-32 mx-auto mb-4 bg-red-500 rounded-lg flex items-center justify-center">
                      <UIcon class="w-16 h-16 text-white" name="i-lucide-zap"/>
                    </div>
                    <h4 class="text-lg font-semibold text-gray-900">智能电动车</h4>
                  </div>
                </div>
              </div>
            </div>

            <!-- 功能列表 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div
                  v-for="feature in userFeatures"
                  :key="feature.title"
                  class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <UIcon :name="feature.icon" class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0"/>
                <span class="text-sm text-gray-700 dark:text-gray-200">{{ feature.title }}</span>
              </div>
            </div>
          </div>

          <!-- 管理端 - 管理平台 -->
          <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
            <div class="text-center mb-8">
              <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                智能电动车
                <span class="text-red-600 dark:text-red-400">管理平台</span>
              </h3>
            </div>

            <!-- 电脑界面模拟 -->
            <div class="relative mx-auto w-80 h-48 bg-gray-200 rounded-lg p-2 mb-8">
              <div class="w-full h-full bg-white rounded shadow-inner overflow-hidden">
                <!-- 侧边栏 -->
                <div class="flex h-full">
                  <div class="w-20 bg-gray-100 p-2">
                    <div class="space-y-2">
                      <div class="w-6 h-6 bg-blue-500 rounded mb-1"/>
                      <div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
                      <div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
                      <div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
                      <div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
                      <div class="w-6 h-6 bg-gray-300 rounded"/>
                    </div>
                  </div>
                  <!-- 主内容区 -->
                  <div class="flex-1 p-3">
                    <div class="h-4 bg-gray-200 rounded mb-2"/>
                    <div class="h-4 bg-gray-200 rounded mb-2 w-3/4"/>
                    <div class="space-y-1">
                      <div class="h-3 bg-gray-100 rounded"/>
                      <div class="h-3 bg-gray-100 rounded"/>
                      <div class="h-3 bg-gray-100 rounded w-5/6"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 功能列表 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div
                  v-for="feature in managementFeatures"
                  :key="feature.title"
                  class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <UIcon :name="feature.icon" class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0"/>
                <span class="text-sm text-gray-700 dark:text-gray-200">{{ feature.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* 自定义动画效果 */
@keyframes ping-slow {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.animate-ping-slow {
  animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-ping-slow.delay-100 {
  animation-delay: 0.1s;
}

.animate-ping-slow.delay-200 {
  animation-delay: 0.2s;
}

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