<template>
  <div>
    <!-- 页面标题 -->
    <HeroBanner 
      title="解决方案" 
      subtitle="针对不同行业和业务场景的专业AWS云服务解决方案"
    />

    <!-- 解决方案分类 -->
    <section class="py-20">
      <div class="container">
        <div class="max-w-4xl mx-auto text-center mb-16">
          <h2 class="text-4xl font-bold text-[#333333] mb-4">AWS云解决方案</h2>
          <p class="text-xl text-gray-600 leading-relaxed">基于AWS云服务，为不同行业提供专业解决方案</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
          <div v-for="(category, index) in solutionCategories" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
            <div class="w-20 h-20 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i :class="['text-secondary text-3xl', category.icon]"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4">{{ category.title }}</h3>
            <p class="text-gray-600 leading-relaxed mb-6">{{ category.description }}</p>
            <a :href="'#' + category.id" class="inline-flex items-center text-secondary hover:text-secondary/90">
              查看详情
              <i class="fas fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- 解决方案详情 -->
    <div class="space-y-16">
      <section v-for="(solution, index) in solutions" :key="index" :id="solution.id" class="py-20" :class="index % 2 === 0 ? 'bg-gray-50' : 'bg-white'">
        <div class="container">
          <div class="grid md:grid-cols-2 gap-12 items-center">
            <div :class="index % 2 === 1 ? 'md:order-1' : ''">
              <div class="bg-gradient-to-br from-secondary/20 to-secondary/10 h-80 rounded-lg flex items-center justify-center">
                <i :class="['text-8xl text-secondary', solution.icon]"></i>
              </div>
            </div>
            <div>
              <h2 class="text-4xl font-bold text-[#333333] mb-6">{{ solution.title }}</h2>
              <p class="text-gray-600 leading-relaxed mb-6">{{ solution.description }}</p>
              <div class="mb-8">
                <h4 class="text-lg font-semibold mb-4">解决方案优势</h4>
                <ul class="space-y-3">
                  <li v-for="(benefit, idx) in solution.benefits" :key="idx" class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                    <span class="text-gray-600">{{ benefit }}</span>
                  </li>
                </ul>
              </div>
              <div class="mb-8">
                <h4 class="text-lg font-semibold mb-4">适用行业</h4>
                <div class="flex flex-wrap gap-2">
                  <span v-for="(industry, idx) in solution.industries" :key="idx" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm">
                    {{ industry }}
                  </span>
                </div>
              </div>
              <a href="#contact" class="btn-primary">咨询方案</a>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 实施流程 -->
    <section class="py-20 bg-gray-50">
      <div class="container">
        <div class="max-w-4xl mx-auto text-center mb-16">
          <h2 class="text-4xl font-bold text-[#333333] mb-4">解决方案实施流程</h2>
          <p class="text-xl text-gray-600 leading-relaxed">专业、高效的项目实施流程，确保方案平稳落地</p>
        </div>
        
        <div class="relative">
          <!-- 流程连接线 -->
          <div class="absolute left-1/2 top-8 bottom-8 w-1 bg-secondary/20 -translate-x-1/2 hidden md:block"></div>
          
          <div class="space-y-12">
            <div v-for="(step, index) in implementationSteps" :key="index" class="flex flex-col md:flex-row md:items-center relative">
              <!-- 步骤编号 -->
              <div class="md:absolute md:left-1/2 md:-translate-x-1/2 z-10 w-12 h-12 bg-white rounded-full border-4 border-secondary flex items-center justify-center font-bold text-secondary mb-4 md:mb-0 mx-auto md:mx-0">
                {{ index + 1 }}
              </div>
              
              <!-- 步骤内容 -->
              <div :class="[
                'bg-white p-6 rounded-lg shadow-md w-full md:w-5/12',
                index % 2 === 0 ? 'md:mr-auto' : 'md:ml-auto'
              ]">
                <h3 class="text-xl font-semibold mb-2">{{ step.title }}</h3>
                <p class="text-gray-600">{{ step.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 客户案例展示 -->
    <section class="py-20">
      <div class="container">
        <div class="max-w-4xl mx-auto text-center mb-16">
          <h2 class="text-4xl font-bold text-[#333333] mb-4">客户成功案例</h2>
          <p class="text-xl text-gray-600 leading-relaxed">我们的解决方案已成功应用于众多行业</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
          <div v-for="(case_item, index) in caseStudies" :key="index" class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <div class="h-48 bg-gray-200"></div>
            <div class="p-6">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold">{{ case_item.title }}</h3>
                <span class="px-3 py-1 bg-secondary/10 text-secondary text-sm rounded-full">{{ case_item.industry }}</span>
              </div>
              <p class="text-gray-600 mb-6">{{ case_item.description }}</p>
              <NuxtLink to="/cases" class="inline-flex items-center text-secondary hover:text-secondary/90">
                查看详情
                <i class="fas fa-arrow-right ml-2"></i>
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-16 bg-primary text-white">
      <div class="container text-center">
        <h2 class="text-4xl font-bold mb-6">需要定制化解决方案?</h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">联系我们的解决方案专家，获取专业的AWS云服务解决方案建议</p>
        <NuxtLink to="/contact" class="inline-flex items-center bg-white text-black px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors duration-300 text-lg font-semibold">
          联系解决方案专家
          <i class="fas fa-arrow-right ml-2"></i>
        </NuxtLink>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
// 解决方案分类
const solutionCategories = [
  {
    id: 'web-hosting',
    icon: 'fas fa-globe',
    title: '网站托管',
    description: '高性能、高可用的网站托管解决方案，适用于各类网站和Web应用'
  },
  {
    id: 'cloud-migration',
    icon: 'fas fa-cloud-upload-alt',
    title: '企业上云',
    description: '安全、平稳的企业IT系统云迁移方案，最小化业务中断风险'
  },
  {
    id: 'disaster-recovery',
    icon: 'fas fa-shield-alt',
    title: '灾备方案',
    description: '构建可靠的灾难恢复系统，保障业务连续性和数据安全'
  },
  {
    id: 'big-data',
    icon: 'fas fa-chart-pie',
    title: '大数据分析',
    description: '基于AWS大数据服务的数据处理和分析解决方案'
  },
  {
    id: 'microservices',
    icon: 'fas fa-cubes',
    title: '微服务架构',
    description: '基于容器和无服务器技术的现代应用架构解决方案'
  },
  {
    id: 'ai-ml',
    icon: 'fas fa-brain',
    title: 'AI/机器学习',
    description: '利用AWS AI/ML服务快速构建智能应用的解决方案'
  }
];

// 解决方案详情
const solutions = [
  {
    id: 'web-hosting',
    icon: 'fas fa-globe',
    title: '网站托管解决方案',
    description: '基于AWS云服务的高性能、高可用、安全的网站托管解决方案，适用于企业官网、电子商务网站、内容管理系统等各类Web应用。利用AWS全球基础设施和CDN服务，为全球用户提供低延迟的访问体验。',
    benefits: [
      '高可用性架构，99.99%服务可用性保障',
      '自动扩展能力，应对流量峰值',
      'CDN加速，全球用户低延迟访问',
      '完善的安全防护，包括WAF、DDoS防护等',
      '按需付费，降低运营成本'
    ],
    industries: ['电子商务', '媒体', '教育', '企业服务']
  },
  {
    id: 'cloud-migration',
    icon: 'fas fa-cloud-upload-alt',
    title: '企业上云解决方案',
    description: '为传统IT基础设施提供安全、可靠的云迁移路径，帮助企业实现从本地数据中心到AWS云的平稳过渡。我们的解决方案涵盖评估、规划、迁移和优化的全过程，最大限度地减少业务中断和迁移风险。',
    benefits: [
      '专业的迁移评估和规划服务',
      '多种迁移策略：重新托管、重新平台化、重构等',
      '数据安全迁移，确保零数据丢失',
      '迁移过程中的业务连续性保障',
      '迁移后的性能优化和成本控制'
    ],
    industries: ['金融', '制造', '零售', '医疗', '政府']
  },
  {
    id: 'disaster-recovery',
    icon: 'fas fa-shield-alt',
    title: '灾备解决方案',
    description: '基于AWS云服务构建可靠的灾难恢复系统，帮助企业应对各种灾难情况下的业务连续性挑战。我们提供从灾备规划到实施、测试和运维的一站式服务，保障企业数据安全和业务连续性。',
    benefits: [
      '多区域架构，提供地理级别的灾难恢复能力',
      '灵活的恢复点目标(RPO)和恢复时间目标(RTO)选项',
      '自动化的灾难恢复流程，减少人为错误',
      '定期的灾备演练和测试服务',
      '成本优化的灾备架构设计'
    ],
    industries: ['金融', '医疗', '能源', '电信', '政府']
  },
  {
    id: 'big-data',
    icon: 'fas fa-chart-pie',
    title: '大数据分析解决方案',
    description: '利用AWS丰富的大数据服务，构建高效、可扩展的数据处理和分析平台。我们的解决方案可以帮助企业从海量数据中提取价值，支持数据仓库、实时分析、机器学习等多种大数据应用场景。',
    benefits: [
      '高性能的数据处理能力，处理PB级数据',
      '灵活的存储选项，优化成本和性能',
      '实时数据处理和分析能力',
      '与机器学习服务的无缝集成',
      '可视化的数据分析工具'
    ],
    industries: ['金融', '零售', '医疗', '制造', '物流']
  }
];

// 实施流程
const implementationSteps = [
  {
    title: '需求分析',
    description: '深入了解客户业务需求和技术环境，确定解决方案目标和范围'
  },
  {
    title: '方案设计',
    description: '基于需求分析，设计适合的AWS云服务解决方案架构和实施计划'
  },
  {
    title: '方案实施',
    description: '按照实施计划，部署和配置AWS云服务资源，构建解决方案'
  },
  {
    title: '测试验证',
    description: '对实施的解决方案进行全面测试，确保功能、性能和安全满足要求'
  },
  {
    title: '上线部署',
    description: '解决方案正式上线，确保业务平稳过渡和系统稳定运行'
  },
  {
    title: '运维支持',
    description: '提供持续的技术支持和运维服务，保障解决方案长期稳定运行'
  }
];

// 客户案例
const caseStudies = [
  {
    title: '某电商平台',
    industry: '电子商务',
    description: '通过AWS云服务解决方案，成功应对销售高峰，提升了网站性能和用户体验，同时降低了运营成本。'
  },
  {
    title: '某金融机构',
    industry: '金融',
    description: '采用AWS灾备解决方案，构建了高可用的业务连续性系统，满足了金融行业严格的监管要求。'
  },
  {
    title: '某制造企业',
    industry: '制造',
    description: '通过企业上云解决方案，成功将IT系统迁移至AWS云平台，提高了系统灵活性，降低了IT维护成本。'
  }
];
</script>