<script lang="ts" setup>
/**
 * 物联网解决方案页面
 * 基于玉犀科技官网的物联网解决方案内容
 */

// 页面SEO配置
useSeoMeta({
  title: '物联网解决方案 - 玉犀科技',
  description: '玉犀科技提供物联网应用定制、物联网智能硬件、物联网IOT云平台等物联网解决方案',
  keywords: '物联网,智能硬件,IOT云平台,物联网应用定制,物联网解决方案',
  robots: 'index, follow'
})

// 物联网解决方案数据
const iotSolutions = ref([
  {
    id: 'application-customization',
    title: '物联网应用定制',
    subtitle: '规范化的开发流程，实现产品快速落地',
    description: '根据客户具体需求，提供定制化的物联网应用开发服务。从需求分析到系统设计，从开发实现到部署上线，全程专业服务。',
    features: [
      '需求分析评估',
      '系统架构设计',
      '定制化开发',
      '系统集成测试',
      '部署上线支持',
      '运维维护服务'
    ],
    technologies: ['IoT协议', '云平台', '大数据', 'AI算法'],
    image: 'https://picsum.photos/800/600?random=iot-customization',
    link: '/yuxi/iot-solutions/application-customization'
  },
  {
    id: 'smart-hardware',
    title: '物联网智能硬件',
    subtitle: '支持定制，满足各类硬件场景需求',
    description: '提供专业的物联网智能硬件解决方案，包括传感器、控制器、通信模块等。支持多种通信协议，满足不同场景的硬件需求。',
    features: [
      '智能传感器',
      '通信控制器',
      '边缘计算设备',
      '数据采集终端',
      '无线通信模块',
      '电源管理系统'
    ],
    technologies: ['LoRa', 'NB-IoT', 'WiFi', '蓝牙', '4G/5G'],
    image: 'https://picsum.photos/800/600?random=smart-hardware',
    link: '/yuxi/iot-solutions/smart-hardware'
  },
  {
    id: 'iot-cloud-platform',
    title: '物联网IOT云平台',
    subtitle: '灵活、可靠、安全，有效降低成本',
    description: '基于云计算的物联网平台，提供设备管理、数据存储、分析处理、应用开发等一站式服务。支持大规模设备接入，提供稳定可靠的服务。',
    features: [
      '设备管理',
      '数据存储',
      '实时监控',
      '数据分析',
      '应用开发',
      '安全防护'
    ],
    technologies: ['云计算', '大数据', 'AI', '区块链'],
    image: 'https://picsum.photos/800/600?random=iot-cloud',
    link: '/yuxi/iot-solutions/iot-cloud-platform'
  }
])

// 物联网应用场景
const iotScenarios = ref([
  {
    id: 'smart-city',
    title: '智慧城市',
    description: '城市基础设施智能化管理，提升城市运营效率',
    icon: 'i-lucide-building-2',
    applications: ['智能交通', '环境监测', '公共安全', '能源管理']
  },
  {
    id: 'smart-factory',
    title: '智慧工厂',
    description: '工业4.0智能制造，提升生产效率和质量',
    icon: 'i-lucide-factory',
    applications: ['设备监控', '生产管理', '质量控制', '供应链管理']
  },
  {
    id: 'smart-agriculture',
    title: '智慧农业',
    description: '精准农业管理，提高农作物产量和质量',
    icon: 'i-lucide-sprout',
    applications: ['环境监测', '精准灌溉', '病虫害防治', '产量预测']
  },
  {
    id: 'smart-healthcare',
    title: '智慧医疗',
    description: '医疗设备智能化，提升医疗服务水平',
    icon: 'i-lucide-heart-pulse',
    applications: ['远程监护', '设备管理', '数据采集', '健康分析']
  }
])

// 技术架构
const iotArchitecture = ref([
  {
    layer: '感知层',
    description: '传感器、RFID、摄像头等数据采集设备',
    components: ['传感器', 'RFID标签', '摄像头', 'GPS定位'],
    icon: 'i-lucide-scan',
    color: 'bg-blue-100 text-blue-600'
  },
  {
    layer: '网络层',
    description: '通信网络，数据传输和路由',
    components: ['WiFi', '4G/5G', 'LoRa', 'NB-IoT'],
    icon: 'i-lucide-network',
    color: 'bg-green-100 text-green-600'
  },
  {
    layer: '平台层',
    description: '云计算平台，数据处理和存储',
    components: ['云服务器', '数据库', '消息队列', 'API网关'],
    icon: 'i-lucide-cloud',
    color: 'bg-purple-100 text-purple-600'
  },
  {
    layer: '应用层',
    description: '业务应用，用户界面和服务',
    components: ['Web应用', '移动APP', '管理后台', '数据分析'],
    icon: 'i-lucide-smartphone',
    color: 'bg-orange-100 text-orange-600'
  }
])

// 核心优势
const coreAdvantages = ref([
  {
    title: '技术领先',
    description: '采用最新的物联网技术，确保系统的先进性和可靠性',
    icon: 'i-lucide-zap'
  },
  {
    title: '安全可靠',
    description: '多重安全防护机制，保障数据和设备安全',
    icon: 'i-lucide-shield-check'
  },
  {
    title: '易于扩展',
    description: '模块化设计，支持系统灵活扩展和升级',
    icon: 'i-lucide-expand'
  },
  {
    title: '成本优化',
    description: '合理的架构设计，有效降低开发和运维成本',
    icon: 'i-lucide-trending-down'
  }
])

// 成功案例
const successCases = ref([
  {
    title: '智慧园区物联网项目',
    description: '为某大型园区部署物联网系统，实现设备统一管理，提升运营效率40%',
    result: '效率提升40%',
    image: 'https://picsum.photos/400/300?random=smart-park'
  },
  {
    title: '工业设备监控系统',
    description: '为制造企业开发设备监控系统，实现设备故障预警，减少停机时间60%',
    result: '停机减少60%',
    image: 'https://picsum.photos/400/300?random=industrial-monitoring'
  },
  {
    title: '农业物联网平台',
    description: '为农业合作社建设物联网平台，实现精准农业管理，提高产量25%',
    result: '产量提高25%',
    image: 'https://picsum.photos/400/300?random=agriculture-iot'
  }
])
</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 页面头部 -->
    <section class="bg-gradient-to-br from-indigo-600 to-purple-700 text-white py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-6xl font-bold mb-6">物联网解决方案</h1>
        <p class="text-xl md:text-2xl text-indigo-100 max-w-3xl mx-auto">
          专业的物联网解决方案提供商，助力企业数字化转型
        </p>
      </div>
    </section>

    <!-- 解决方案 -->
    <section class="py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">核心解决方案</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            提供全方位的物联网解决方案，满足不同行业和场景的需求
          </p>
        </div>

        <div class="space-y-20">
          <div
            v-for="(solution, index) in iotSolutions"
            :key="solution.id"
            class="group"
          >
            <div class="flex flex-col lg:flex-row items-center space-y-8 lg:space-y-0 lg:space-x-12"
                 :class="{ 'lg:flex-row-reverse lg:space-x-reverse': index % 2 === 1 }">
              <!-- 图片 -->
              <div class="flex-shrink-0">
                <div class="relative overflow-hidden rounded-2xl shadow-xl">
                  <img 
                    :src="solution.image" 
                    :alt="solution.title"
                    class="w-96 h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
                </div>
              </div>

              <!-- 内容 -->
              <div class="flex-1">
                <h3 class="text-3xl font-bold text-gray-900 mb-4">{{ solution.title }}</h3>
                <p class="text-xl text-indigo-600 font-medium mb-6">{{ solution.subtitle }}</p>
                <p class="text-gray-600 mb-8 leading-relaxed">{{ solution.description }}</p>
                
                <!-- 特性列表 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                  <div
                    v-for="feature in solution.features"
                    :key="feature"
                    class="flex items-center text-gray-600"
                  >
                    <UIcon name="i-lucide-check-circle" class="w-5 h-5 text-indigo-500 mr-3 flex-shrink-0" />
                    {{ feature }}
                  </div>
                </div>

                <!-- 技术栈 -->
                <div class="mb-8">
                  <h4 class="text-lg font-semibold text-gray-900 mb-3">技术栈：</h4>
                  <div class="flex flex-wrap gap-2">
                    <span
                      v-for="tech in solution.technologies"
                      :key="tech"
                      class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm"
                    >
                      {{ tech }}
                    </span>
                  </div>
                </div>

                <NuxtLink 
                  :to="solution.link"
                  class="inline-flex items-center px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition-colors"
                >
                  了解更多
                  <UIcon name="i-lucide-arrow-right" class="w-5 h-5 ml-2" />
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 应用场景 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">应用场景</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            物联网技术在各行业的广泛应用，推动数字化转型
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="scenario in iotScenarios"
            :key="scenario.id"
            class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-gray-100"
          >
            <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <UIcon :name="scenario.icon" class="w-8 h-8 text-indigo-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-3 text-center">{{ scenario.title }}</h3>
            <p class="text-gray-600 mb-4 text-center">{{ scenario.description }}</p>
            <ul class="space-y-2">
              <li
                v-for="app in scenario.applications"
                :key="app"
                class="text-sm text-gray-500 flex items-center"
              >
                <UIcon name="i-lucide-check" class="w-4 h-4 text-indigo-500 mr-2 flex-shrink-0" />
                {{ app }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术架构 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">物联网技术架构</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            四层架构设计，确保系统的稳定性和可扩展性
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="(layer, index) in iotArchitecture"
            :key="layer.layer"
            class="text-center group"
          >
            <div class="relative">
              <!-- 连接线 -->
              <div 
                v-if="index < iotArchitecture.length - 1"
                class="hidden lg:block absolute top-10 left-full w-full h-0.5 bg-gray-300 z-0"
              ></div>
              
              <div class="relative z-10">
                <div class="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform"
                     :class="layer.color">
                  <UIcon :name="layer.icon" class="w-10 h-10" />
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ layer.layer }}</h3>
                <p class="text-gray-600 mb-4">{{ layer.description }}</p>
                <div class="space-y-1">
                  <div
                    v-for="component in layer.components"
                    :key="component"
                    class="text-sm text-gray-500"
                  >
                    {{ component }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心优势 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">核心优势</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            专业的物联网解决方案，为您提供可靠的技术支撑
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="advantage in coreAdvantages"
            :key="advantage.title"
            class="text-center group"
          >
            <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-indigo-200 transition-colors">
              <UIcon :name="advantage.icon" class="w-10 h-10 text-indigo-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ advantage.title }}</h3>
            <p class="text-gray-600">{{ advantage.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 成功案例 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">成功案例</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            丰富的项目经验，为各行业客户提供优质服务
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div
            v-for="caseItem in successCases"
            :key="caseItem.title"
            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow group"
          >
            <div class="relative h-48 overflow-hidden">
              <img 
                :src="caseItem.image" 
                :alt="caseItem.title"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div class="absolute top-4 right-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-semibold">
                {{ caseItem.result }}
              </div>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ caseItem.title }}</h3>
              <p class="text-gray-600">{{ caseItem.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-20 bg-indigo-600 text-white">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-6">需要物联网解决方案？</h2>
        <p class="text-xl text-indigo-100 mb-8">
          我们的专业团队将为您提供最适合的物联网解决方案
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <NuxtLink 
            to="/yuxi/contact"
            class="px-8 py-4 bg-white hover:bg-gray-100 text-indigo-600 font-semibold rounded-lg transition-colors"
          >
            联系我们
          </NuxtLink>
          <NuxtLink 
            to="/yuxi/software-development"
            class="px-8 py-4 bg-indigo-500 hover:bg-indigo-400 text-white font-semibold rounded-lg transition-colors"
          >
            查看软件开发
          </NuxtLink>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* 自定义样式 */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}
</style>

