<script lang="ts" setup>
// 创特App开发事业部数据
const appDevelopmentDivision = {
  title: '创特App开发事业部',
  subtitle: '帮助企业快速实现移动化',
  description: '专业的移动应用开发团队，为企业提供全方位的移动化解决方案'
}

// APP开发核心价值
const coreValues = [
  {
    id: 1,
    icon: 'i-lucide-smartphone',
    title: '成熟的应用框架',
    description: '丰富的应用模板，1000+移动应用开发，14款工具打造完整工作流，轻松完成复杂的业务应用'
  },
  {
    id: 2,
    icon: 'i-lucide-globe',
    title: '全场景的移动技术',
    description: '全球最大的HTML5移动技术与服务提供商，从内容制作到上线发布，从商业实践到运营分析，实现完整的生态链支持和服务'
  },
  {
    id: 3,
    icon: 'i-lucide-message-circle',
    title: '一次开发，多端适配',
    description: '涵盖企业web app、独立app、微信服务号、微信企业号、其他轻应用，一次开发多端运行'
  },
  {
    id: 4,
    icon: 'i-lucide-zap',
    title: '极致的应用体验',
    description: '媲美游戏的炫酷界面，性能极致优化，操控顺畅流利，响应式设计，多屏完美自适应'
  },
  {
    id: 5,
    icon: 'i-lucide-briefcase',
    title: '一站式移动办公门户',
    description: '单点登录，任务推送，业务处理和流程协作的多业务协同和应用集成环境，个性化定制，无需改变用户原有使用习惯'
  },
  {
    id: 6,
    icon: 'i-lucide-workflow',
    title: '强大的工作流',
    description: '支持多业务整合集成，全面的流程定义和扩展，多实例和流程模型让开发快捷高效'
  },
  {
    id: 7,
    icon: 'i-lucide-package',
    title: '海量扩展资源',
    description: '门户主题、风格样式、UI组件、后端服务组件、模板、多语言均可任意引入和定制扩展'
  },
  {
    id: 8,
    icon: 'i-lucide-code',
    title: '主流技术标准',
    description: '支持云端一体开发部署，HTML5国际技术标准，主流可靠，更可扩展业务逻辑和规则'
  }
]

// 企业服务能力
const enterpriseServices = [
  {
    id: 1,
    title: '战略咨询',
    icon: 'i-lucide-lightbulb',
    description: '专业的移动化战略规划与咨询服务'
  },
  {
    id: 2,
    title: '定制开发',
    icon: 'i-lucide-settings',
    description: '根据企业需求定制专属移动应用'
  },
  {
    id: 3,
    title: '运维服务',
    icon: 'i-lucide-server',
    description: '7×24小时专业运维保障服务'
  },
  {
    id: 4,
    title: '运营分发',
    icon: 'i-lucide-share',
    description: '多渠道应用分发与运营推广服务'
  },
  {
    id: 5,
    title: '商业分析',
    icon: 'i-lucide-bar-chart',
    description: '数据驱动的商业分析与决策支持'
  },
  {
    id: 6,
    title: '管理后台',
    icon: 'i-lucide-monitor',
    description: '功能完善的管理后台系统'
  }
]

// 技术特性
const technicalProperties = [
  {
    id: 1,
    title: '跨平台多适配',
    description: '支持iOS、Android、Web等多平台统一开发'
  },
  {
    id: 2,
    title: '全通讯能力服务',
    description: '集成多种通讯方式，保障信息传递畅通'
  },
  {
    id: 3,
    title: '统一业务流程平台',
    description: '标准化业务流程，提升工作效率'
  },
  {
    id: 4,
    title: '数据安全策略',
    description: '多层次安全防护，保障数据安全'
  },
  {
    id: 5,
    title: '完备的管控体系',
    description: '完善的权限管理和系统监控'
  },
  {
    id: 6,
    title: '云端一体，随需而用',
    description: '云原生架构，弹性扩展，按需使用'
  }
]

// 统计数据
const statistics = [
  {
    id: 1,
    number: '1000+',
    label: '1000+移动应用开发',
    description: '丰富的移动应用开发经验'
  },
  {
    id: 2,
    number: '300+',
    label: '服务于300+企业',
    description: '为众多企业提供专业服务'
  },
  {
    id: 3,
    number: '40+',
    label: '40+移动战略合作伙伴',
    description: '广泛的合作伙伴网络'
  },
  {
    id: 4,
    number: '100',
    label: 'TOP100开发合作商',
    description: '行业领先的开发服务商'
  }
]

// 设备展示数据
const deviceShowcase = [
  {
    id: 1,
    type: 'desktop',
    title: '桌面应用',
    image: 'https://picsum.photos/400/300?random=desktop',
    description: '企业级桌面应用解决方案'
  },
  {
    id: 2,
    type: 'mobile',
    title: '移动应用',
    image: 'https://picsum.photos/400/300?random=mobile',
    description: '原生移动应用开发'
  },
  {
    id: 3,
    type: 'tablet',
    title: '平板应用',
    image: 'https://picsum.photos/400/300?random=tablet',
    description: '平板设备优化应用'
  },
  {
    id: 4,
    type: 'watch',
    title: '智能手表',
    image: 'https://picsum.photos/400/300?random=watch',
    description: '可穿戴设备应用开发'
  }
]
</script>

<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Hero Section - 创特App开发事业部 -->
    <section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
      <!-- 背景 -->
      <div
          class="absolute inset-0 bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <!-- 背景纹理 -->
        <div class="absolute inset-0 opacity-10">
          <div
              class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"/>
        </div>
      </div>

      <!-- 内容 -->
      <div class="relative z-10 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="text-white">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
              {{ appDevelopmentDivision.title }}
            </h1>
            <p class="text-2xl md:text-3xl font-semibold text-blue-200 dark:text-blue-300 mb-6">
              {{ appDevelopmentDivision.subtitle }}
            </p>
            <p class="text-lg md:text-xl text-blue-100 dark:text-blue-200 leading-relaxed">
              {{ appDevelopmentDivision.description }}
            </p>
          </div>

          <!-- 手机展示 -->
          <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-black rounded-3xl p-2 shadow-2xl">
                <div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
                  <!-- 状态栏 -->
                  <div class="h-8 bg-gray-100 dark:bg-gray-700 flex items-center justify-between px-4">
                    <div class="text-xs text-gray-600 dark:text-gray-300">4:21 PM</div>
                    <div class="flex items-center space-x-1">
                      <div class="w-4 h-2 bg-green-500 rounded-sm"/>
                      <div class="w-4 h-2 bg-yellow-500 rounded-sm"/>
                      <div class="w-4 h-2 bg-red-500 rounded-sm"/>
                    </div>
                  </div>

                  <!-- 应用界面 -->
                  <div class="p-6 h-full bg-gradient-to-b from-red-50 to-white dark:from-gray-800 dark:to-gray-700">
                    <!-- Logo区域 -->
                    <div class="text-center mb-8">
                      <div class="w-16 h-16 bg-black rounded-lg flex items-center justify-center mx-auto mb-2">
                        <span class="text-white font-bold text-2xl">K</span>
                      </div>
                      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">LOGIN</h3>
                    </div>

                    <!-- 登录表单 -->
                    <div class="space-y-4">
                      <div class="bg-gray-100 dark:bg-gray-600 rounded-lg p-3">
                        <input
                            class="w-full bg-transparent text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400"
                            placeholder="Username or Email"
                            type="text"
                        >
                      </div>
                      <div class="bg-gray-100 dark:bg-gray-600 rounded-lg p-3">
                        <input
                            class="w-full bg-transparent text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400"
                            placeholder="Password"
                            type="password"
                        >
                      </div>
                      <button
                          class="w-full bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 py-3 rounded-lg font-semibold">
                        LOGIN
                      </button>
                    </div>

                    <!-- 底部链接 -->
                    <div class="mt-6 text-center space-y-2">
                      <a class="text-sm text-gray-600 dark:text-gray-400" href="#">Forgot Password?</a>
                      <div>
                        <a class="text-sm text-gray-600 dark:text-gray-400" href="#">CREATE ACCOUNT</a>
                      </div>
                    </div>
                  </div>
                </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 class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
          <div
              v-for="value in coreValues"
              :key="value.id"
              class="group text-center p-6 bg-gray-50 dark:bg-gray-700 rounded-2xl hover:bg-white dark:hover:bg-gray-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
          >
            <!-- 图标 -->
            <div
                class="w-16 h-16 mx-auto mb-4 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center group-hover:bg-blue-100 dark:group-hover:bg-blue-900 transition-colors duration-300">
              <UIcon
                  :name="value.icon"
                  class="w-8 h-8 text-gray-600 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300"
              />
            </div>

            <!-- 标题 -->
            <h3 class="text-lg md:text-xl font-semibold text-gray-900 dark:text-white mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
              {{ value.title }}
            </h3>

            <!-- 描述 -->
            <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">
              {{ value.description }}
            </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="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>

        <!-- 设备展示 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8 mb-16">
          <div
              v-for="device in deviceShowcase"
              :key="device.id"
              class="group text-center"
          >
            <div class="relative mb-6">
              <img
                  :alt="device.title"
                  :src="device.image"
                  class="w-full h-48 object-cover rounded-2xl shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-105"
              >
              <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-2xl"/>
              <div class="absolute bottom-4 left-4 right-4">
                <h3 class="text-white font-semibold text-lg">{{ device.title }}</h3>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300">{{ device.description }}</p>
          </div>
        </div>

        <!-- 企业服务 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          <div
              v-for="service in enterpriseServices"
              :key="service.id"
              class="group bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
          >
            <div class="flex items-center mb-4">
              <div
                  class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 group-hover:bg-blue-200 dark:group-hover:bg-blue-800 transition-colors duration-300">
                <UIcon
                    :name="service.icon"
                    class="w-6 h-6 text-blue-600 dark:text-blue-400"
                />
              </div>
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
                {{ service.title }}
              </h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              {{ service.description }}
            </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 lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            技术特性
          </h2>
          <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300">
            TECHNICAL PROPERTIES
          </p>
        </div>

        <!-- 技术特性网格 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          <div
              v-for="property in technicalProperties"
              :key="property.id"
              class="group bg-gray-900 dark:bg-gray-700 text-white rounded-2xl p-6 hover:bg-gray-800 dark:hover:bg-gray-600 transition-all duration-300 hover:shadow-lg"
          >
            <h3 class="text-xl font-semibold mb-3 group-hover:text-blue-400 transition-colors duration-300">
              {{ property.title }}
            </h3>
            <p class="text-gray-300 dark:text-gray-200 leading-relaxed">
              {{ property.description }}
            </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="text-center mb-16">
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            简化IT，连接一切
          </h2>
        </div>

        <!-- 统计数据 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
              v-for="stat in statistics"
              :key="stat.id"
              class="text-center group"
          >
            <!-- 数字展示 -->
            <div class="relative mb-6">
              <div class="w-32 h-32 mx-auto relative">
                <!-- 半圆环 -->
                <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
                  <circle
                      class="text-blue-200 dark:text-blue-800"
                      cx="50"
                      cy="50"
                      fill="none"
                      r="40"
                      stroke="currentColor"
                      stroke-width="4"
                  />
                  <circle
                      class="text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300"
                      cx="50"
                      cy="50"
                      fill="none"
                      r="40"
                      stroke="currentColor"
                      stroke-dasharray="251.2"
                      stroke-dashoffset="125.6"
                      stroke-width="4"
                  />
                </svg>
                <!-- 数字 -->
                <div class="absolute inset-0 flex items-center justify-center">
                  <span
                      class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
                    {{ stat.number }}
                  </span>
                </div>
              </div>
            </div>

            <!-- 标签和描述 -->
            <h3 class="text-lg md:text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
              {{ stat.label }}
            </h3>
            <p class="text-gray-600 dark:text-gray-300">
              {{ stat.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-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}
</style>