<template>
  <div>
    <!-- 页面标题 -->
    <HeroBanner 
      :title="$t('solutions.hero.title')" 
      :subtitle="$t('solutions.hero.subtitle')"
    />

    <!-- 解决方案分类 -->
    <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">{{ $t('solutions.categories.title') }}</h2>
          <p class="text-xl text-gray-600 leading-relaxed">{{ $t('solutions.categories.subtitle') }}</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">{{ $t(category.titleKey) }}</h3>
            <p class="text-gray-600 leading-relaxed mb-6">{{ $t(category.descriptionKey) }}</p>
            <a :href="'#' + category.id" class="inline-flex items-center text-secondary hover:text-secondary/90">
              {{ $t('solutions.categories.viewDetails') }}
              <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">{{ $t(solution.titleKey) }}</h2>
              <p class="text-gray-600 leading-relaxed mb-6">{{ $t(solution.descriptionKey) }}</p>
              <div class="mb-8">
                <h4 class="text-lg font-semibold mb-4">{{ $t('solutions.solutionDetails.advantages') }}</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">{{ $t(benefit) }}</span>
                  </li>
                </ul>
              </div>
              <div class="mb-8">
                <h4 class="text-lg font-semibold mb-4">{{ $t('solutions.solutionDetails.industries') }}</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">
                    {{ $t(industry) }}
                  </span>
                </div>
              </div>
              <a href="#contact" class="btn-primary">{{ $t('solutions.solutionDetails.inquiry') }}</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">{{ $t('solutions.implementation.title') }}</h2>
          <p class="text-xl text-gray-600 leading-relaxed">{{ $t('solutions.implementation.subtitle') }}</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">{{ $t(step.titleKey) }}</h3>
                <p class="text-gray-600">{{ $t(step.descriptionKey) }}</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">{{ $t('solutions.cases.title') }}</h2>
          <p class="text-xl text-gray-600 leading-relaxed">{{ $t('solutions.cases.subtitle') }}</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">{{ $t(case_item.titleKey) }}</h3>
                <span class="px-3 py-1 bg-secondary/10 text-secondary text-sm rounded-full">{{ $t(case_item.industryKey) }}</span>
              </div>
              <p class="text-gray-600 mb-6">{{ $t(case_item.descriptionKey) }}</p>
              <NuxtLink to="/cases" class="inline-flex items-center text-secondary hover:text-secondary/90">
                {{ $t('solutions.cases.viewDetails') }}
                <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">{{ $t('solutions.contact.title') }}</h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">{{ $t('solutions.contact.subtitle') }}</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">
          {{ $t('solutions.contact.button') }}
          <i class="fas fa-arrow-right ml-2"></i>
        </NuxtLink>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// 解决方案分类
const solutionCategories = [
  {
    id: 'web-hosting',
    icon: 'fas fa-globe',
    titleKey: 'solutions.solutionItems.webHosting.title',
    descriptionKey: 'solutions.solutionItems.webHosting.description'
  },
  {
    id: 'cloud-migration',
    icon: 'fas fa-cloud-upload-alt',
    titleKey: 'solutions.solutionItems.cloudMigration.title',
    descriptionKey: 'solutions.solutionItems.cloudMigration.description'
  },
  {
    id: 'disaster-recovery',
    icon: 'fas fa-shield-alt',
    titleKey: 'solutions.solutionItems.disasterRecovery.title',
    descriptionKey: 'solutions.solutionItems.disasterRecovery.description'
  },
  {
    id: 'big-data',
    icon: 'fas fa-chart-pie',
    titleKey: 'solutions.solutionItems.bigData.title',
    descriptionKey: 'solutions.solutionItems.bigData.description'
  },
  {
    id: 'microservices',
    icon: 'fas fa-cubes',
    titleKey: 'solutions.solutionItems.microservices.title',
    descriptionKey: 'solutions.solutionItems.microservices.description'
  },
  {
    id: 'ai-ml',
    icon: 'fas fa-brain',
    titleKey: 'solutions.solutionItems.aiMl.title',
    descriptionKey: 'solutions.solutionItems.aiMl.description'
  }
];

// 解决方案详情
const solutions = [
  {
    id: 'web-hosting',
    icon: 'fas fa-globe',
    titleKey: 'solutions.solutionDetails.webHosting.title',
    descriptionKey: 'solutions.solutionDetails.webHosting.description',
    benefits: [
      'solutions.solutionDetails.webHosting.benefits[0]',
      'solutions.solutionDetails.webHosting.benefits[1]',
      'solutions.solutionDetails.webHosting.benefits[2]',
      'solutions.solutionDetails.webHosting.benefits[3]',
      'solutions.solutionDetails.webHosting.benefits[4]'
    ],
    industries: [
      'solutions.solutionDetails.webHosting.industries[0]',
      'solutions.solutionDetails.webHosting.industries[1]',
      'solutions.solutionDetails.webHosting.industries[2]',
      'solutions.solutionDetails.webHosting.industries[3]'
    ]
  },
  {
    id: 'cloud-migration',
    icon: 'fas fa-cloud-upload-alt',
    titleKey: 'solutions.solutionDetails.cloudMigration.title',
    descriptionKey: 'solutions.solutionDetails.cloudMigration.description',
    benefits: [
      'solutions.solutionDetails.cloudMigration.benefits[0]',
      'solutions.solutionDetails.cloudMigration.benefits[1]',
      'solutions.solutionDetails.cloudMigration.benefits[2]',
      'solutions.solutionDetails.cloudMigration.benefits[3]',
      'solutions.solutionDetails.cloudMigration.benefits[4]'
    ],
    industries: [
      'solutions.solutionDetails.cloudMigration.industries[0]',
      'solutions.solutionDetails.cloudMigration.industries[1]',
      'solutions.solutionDetails.cloudMigration.industries[2]',
      'solutions.solutionDetails.cloudMigration.industries[3]',
      'solutions.solutionDetails.cloudMigration.industries[4]'
    ]
  },
  {
    id: 'disaster-recovery',
    icon: 'fas fa-shield-alt',
    titleKey: 'solutions.solutionDetails.disasterRecovery.title',
    descriptionKey: 'solutions.solutionDetails.disasterRecovery.description',
    benefits: [
      'solutions.solutionDetails.disasterRecovery.benefits[0]',
      'solutions.solutionDetails.disasterRecovery.benefits[1]',
      'solutions.solutionDetails.disasterRecovery.benefits[2]',
      'solutions.solutionDetails.disasterRecovery.benefits[3]',
      'solutions.solutionDetails.disasterRecovery.benefits[4]'
    ],
    industries: [
      'solutions.solutionDetails.disasterRecovery.industries[0]',
      'solutions.solutionDetails.disasterRecovery.industries[1]',
      'solutions.solutionDetails.disasterRecovery.industries[2]',
      'solutions.solutionDetails.disasterRecovery.industries[3]',
      'solutions.solutionDetails.disasterRecovery.industries[4]'
    ]
  },
  {
    id: 'big-data',
    icon: 'fas fa-chart-pie',
    titleKey: 'solutions.solutionDetails.bigData.title',
    descriptionKey: 'solutions.solutionDetails.bigData.description',
    benefits: [
      'solutions.solutionDetails.bigData.benefits[0]',
      'solutions.solutionDetails.bigData.benefits[1]',
      'solutions.solutionDetails.bigData.benefits[2]',
      'solutions.solutionDetails.bigData.benefits[3]',
      'solutions.solutionDetails.bigData.benefits[4]'
    ],
    industries: [
      'solutions.solutionDetails.bigData.industries[0]',
      'solutions.solutionDetails.bigData.industries[1]',
      'solutions.solutionDetails.bigData.industries[2]',
      'solutions.solutionDetails.bigData.industries[3]',
      'solutions.solutionDetails.bigData.industries[4]'
    ]
  }
];

// 实施流程
const implementationSteps = [
  {
    titleKey: 'solutions.implementation.steps.step1.title',
    descriptionKey: 'solutions.implementation.steps.step1.description'
  },
  {
    titleKey: 'solutions.implementation.steps.step2.title',
    descriptionKey: 'solutions.implementation.steps.step2.description'
  },
  {
    titleKey: 'solutions.implementation.steps.step3.title',
    descriptionKey: 'solutions.implementation.steps.step3.description'
  },
  {
    titleKey: 'solutions.implementation.steps.step4.title',
    descriptionKey: 'solutions.implementation.steps.step4.description'
  },
  {
    titleKey: 'solutions.implementation.steps.step5.title',
    descriptionKey: 'solutions.implementation.steps.step5.description'
  }
];

// 客户案例
const caseStudies = [
  {
    titleKey: 'solutions.cases.ecommerce.title',
    industryKey: 'solutions.cases.ecommerce.industry',
    descriptionKey: 'solutions.cases.ecommerce.description'
  },
  {
    titleKey: 'solutions.cases.finance.title',
    industryKey: 'solutions.cases.finance.industry',
    descriptionKey: 'solutions.cases.finance.description'
  },
  {
    titleKey: 'solutions.cases.manufacturing.title',
    industryKey: 'solutions.cases.manufacturing.industry',
    descriptionKey: 'solutions.cases.manufacturing.description'
  }
];
</script>