<script lang="ts" setup>
/**
 * 软件应用开发页面
 * 基于玉犀科技官网的软件应用开发内容
 */

// 页面SEO配置
useSeoMeta({
  title: '软件应用开发 - 玉犀科技',
  description: '玉犀科技提供微信开发、APP开发、小程序开发等软件应用开发服务，专业的移动应用解决方案',
  keywords: '微信开发,APP开发,小程序开发,移动应用,软件开发,玉犀科技',
  robots: 'index, follow'
})

// 软件开发服务数据
const softwareServices = ref([
  {
    id: 'wechat',
    title: '微信开发',
    subtitle: '定制开发可使您的微信公众平台更突出价值',
    description: '针对企业需求提供专业微信公众平台开发服务，包括公众号开发、小程序开发、企业微信开发等，帮助企业实现数字化转型。',
    features: [
      '公众号开发',
      '小程序开发',
      '企业微信开发',
      '微信支付集成',
      '用户管理系统',
      '数据分析统计'
    ],
    technologies: ['Vue.js', 'React', 'Node.js', '微信API'],
    image: 'https://picsum.photos/800/600?random=wechat-dev',
    link: '/yuxi/software-development/wechat'
  },
  {
    id: 'app',
    title: 'APP开发',
    subtitle: '小程序是一种新的开放能力，可以在微信内被便捷地获取和传播，同时具有出色的使用体验',
    description: '提供高效的APP开发、手机APP制作与APP管理等服务，支持iOS和Android双平台开发，为用户提供优质的移动应用体验。',
    features: [
      'iOS原生开发',
      'Android原生开发',
      '跨平台开发',
      'UI/UX设计',
      '应用商店发布',
      '版本更新管理'
    ],
    technologies: ['Swift', 'Kotlin', 'Flutter', 'React Native'],
    image: 'https://picsum.photos/800/600?random=app-dev',
    link: '/yuxi/software-development/app'
  },
  {
    id: 'miniprogram',
    title: '小程序开发',
    subtitle: '提供高效的APP开发、手机APP制作与APP管理等服务',
    description: '无需安装APP，就可以带来更流畅快速的体验。小程序开发服务包括微信小程序、支付宝小程序、百度小程序等多平台支持。',
    features: [
      '微信小程序',
      '支付宝小程序',
      '百度小程序',
      '字节跳动小程序',
      'QQ小程序',
      '快应用开发'
    ],
    technologies: ['微信小程序框架', 'uni-app', 'Taro', '原生开发'],
    image: 'https://picsum.photos/800/600?random=miniprogram-dev',
    link: '/yuxi/software-development/miniprogram'
  }
])

// 开发流程
const developmentProcess = ref([
  {
    step: 1,
    title: '需求分析',
    description: '深入了解客户需求，制定详细的开发方案',
    icon: 'i-lucide-search'
  },
  {
    step: 2,
    title: 'UI设计',
    description: '专业的UI/UX设计，打造优秀的用户体验',
    icon: 'i-lucide-palette'
  },
  {
    step: 3,
    title: '开发实现',
    description: '采用先进技术栈，高质量代码实现',
    icon: 'i-lucide-code'
  },
  {
    step: 4,
    title: '测试验收',
    description: '全面测试，确保产品质量和稳定性',
    icon: 'i-lucide-check-circle'
  },
  {
    step: 5,
    title: '上线发布',
    description: '协助应用商店发布，确保顺利上线',
    icon: 'i-lucide-upload'
  },
  {
    step: 6,
    title: '运维支持',
    description: '提供持续的技术支持和维护服务',
    icon: 'i-lucide-settings'
  }
])

// 技术栈
const techStack = ref([
  {
    category: '前端技术',
    technologies: ['Vue.js', 'React', 'Angular', 'TypeScript', 'JavaScript', 'HTML5', 'CSS3']
  },
  {
    category: '移动开发',
    technologies: ['iOS (Swift)', 'Android (Kotlin)', 'Flutter', 'React Native', 'uni-app', 'Taro']
  },
  {
    category: '后端技术',
    technologies: ['Node.js', 'Python', 'Java', 'PHP', 'Go', 'MySQL', 'MongoDB']
  },
  {
    category: '云服务',
    technologies: ['阿里云', '腾讯云', 'AWS', '微信云开发', '小程序云函数']
  }
])

// 服务优势
const serviceAdvantages = ref([
  {
    title: '专业团队',
    description: '拥有丰富的移动应用开发经验，技术实力雄厚',
    icon: 'i-lucide-users'
  },
  {
    title: '快速交付',
    description: '标准化的开发流程，确保项目按时高质量交付',
    icon: 'i-lucide-zap'
  },
  {
    title: '持续支持',
    description: '提供长期的技术支持和维护服务',
    icon: 'i-lucide-headphones'
  },
  {
    title: '成本优化',
    description: '合理的价格体系，为客户提供高性价比的服务',
    icon: 'i-lucide-dollar-sign'
  }
])

// 项目案例
const projectCases = ref([
  {
    title: '共享单车APP',
    description: '为某共享单车公司开发的移动应用，支持扫码开锁、定位导航、支付结算等功能',
    platform: 'iOS + Android',
    users: '100万+',
    image: 'https://picsum.photos/400/300?random=bike-app'
  },
  {
    title: '企业微信小程序',
    description: '为企业开发的内部管理小程序，实现员工管理、考勤打卡、审批流程等功能',
    platform: '微信小程序',
    users: '5000+',
    image: 'https://picsum.photos/400/300?random=enterprise-miniprogram'
  },
  {
    title: '电商购物APP',
    description: '完整的电商购物应用，包含商品展示、购物车、支付、订单管理等完整功能',
    platform: 'iOS + Android',
    users: '50万+',
    image: 'https://picsum.photos/400/300?random=ecommerce-app'
  }
])
</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 页面头部 -->
    <section class="bg-gradient-to-br from-purple-600 to-indigo-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-purple-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="(service, index) in softwareServices"
            :key="service.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="service.image" 
                    :alt="service.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">{{ service.title }}</h3>
                <p class="text-xl text-purple-600 font-medium mb-6">{{ service.subtitle }}</p>
                <p class="text-gray-600 mb-8 leading-relaxed">{{ service.description }}</p>
                
                <!-- 特性列表 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                  <div
                    v-for="feature in service.features"
                    :key="feature"
                    class="flex items-center text-gray-600"
                  >
                    <UIcon name="i-lucide-check-circle" class="w-5 h-5 text-purple-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 service.technologies"
                      :key="tech"
                      class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm"
                    >
                      {{ tech }}
                    </span>
                  </div>
                </div>

                <NuxtLink 
                  :to="service.link"
                  class="inline-flex items-center px-8 py-4 bg-purple-600 hover:bg-purple-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-3 gap-8">
          <div
            v-for="process in developmentProcess"
            :key="process.step"
            class="text-center group"
          >
            <div class="relative">
              <!-- 连接线 -->
              <div 
                v-if="process.step < developmentProcess.length"
                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 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-200 transition-colors">
                  <UIcon :name="process.icon" class="w-10 h-10 text-purple-600" />
                </div>
                <div class="text-2xl font-bold text-purple-600 mb-2">步骤 {{ process.step }}</div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ process.title }}</h3>
                <p class="text-gray-600">{{ process.description }}</p>
              </div>
            </div>
          </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="stack in techStack"
            :key="stack.category"
            class="bg-white rounded-xl p-6 shadow-lg"
          >
            <h3 class="text-xl font-semibold text-gray-900 mb-4 text-center">{{ stack.category }}</h3>
            <div class="space-y-2">
              <div
                v-for="tech in stack.technologies"
                :key="tech"
                class="text-center py-2 px-3 bg-gray-50 rounded-lg text-gray-700"
              >
                {{ tech }}
              </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 serviceAdvantages"
            :key="advantage.title"
            class="text-center group"
          >
            <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-200 transition-colors">
              <UIcon :name="advantage.icon" class="w-10 h-10 text-purple-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 projectCases"
            :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-purple-600 text-white px-3 py-1 rounded-full text-sm font-semibold">
                {{ caseItem.users }}
              </div>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ caseItem.title }}</h3>
              <p class="text-gray-600 mb-3">{{ caseItem.description }}</p>
              <div class="text-sm text-purple-600 font-medium">{{ caseItem.platform }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-20 bg-purple-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-purple-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-purple-600 font-semibold rounded-lg transition-colors"
          >
            联系我们
          </NuxtLink>
          <NuxtLink 
            to="/yuxi/iot-solutions"
            class="px-8 py-4 bg-purple-500 hover:bg-purple-400 text-white font-semibold rounded-lg transition-colors"
          >
            查看IoT方案
          </NuxtLink>
        </div>
      </div>
    </section>
  </div>
</template>

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

