<template>
  <footer class="bg-primary text-white py-12">
    <div class="container">
      <div class="grid md:grid-cols-4 gap-8">
        <div>
          <h5 class="text-lg font-semibold mb-4">云服务专家</h5>
          <p class="text-white/50 mb-4">专业的AWS云服务解决方案提供商，致力于帮助企业实现数字化转型</p>
          <div class="flex space-x-4">
            <a href="#" class="text-white/50 hover:text-white transition-colors">
              <i class="fab fa-weixin"></i>
            </a>
            <a href="#" class="text-white/50 hover:text-white transition-colors">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="#" class="text-white/50 hover:text-white transition-colors">
              <i class="fab fa-linkedin"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h5 class="text-lg font-semibold mb-4">AWS产品</h5>
          <ul class="space-y-2">
            <li v-for="(product, index) in products" :key="index">
              <NuxtLink :to="product.path" class="text-white/70 hover:text-white transition-colors">
                {{ product.name }}
              </NuxtLink>
            </li>
          </ul>
        </div>
        
        <div>
          <h5 class="text-lg font-semibold mb-4">解决方案</h5>
          <ul class="space-y-2">
            <li v-for="(solution, index) in solutions" :key="index">
              <NuxtLink :to="solution.path" class="text-white/70 hover:text-white transition-colors">
                {{ solution.name }}
              </NuxtLink>
            </li>
          </ul>
        </div>
        
        <div>
          <h5 class="text-lg font-semibold mb-4">联系我们</h5>
          <ul class="space-y-3">
            <li class="flex items-start">
              <i class="fas fa-map-marker-alt text-white/70 mt-1 mr-3"></i>
              <span class="text-white/70">北京市朝阳区某某大厦10层</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-phone text-white/70 mt-1 mr-3"></i>
              <span class="text-white/70">400-123-4567</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-envelope text-white/70 mt-1 mr-3"></i>
              <span class="text-white/70">contact@example.com</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="mt-12 pt-8 border-t border-white/10 text-center">
        <p class="text-white/50">&copy; {{ new Date().getFullYear() }} 云服务专家. 保留所有权利.</p>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
const products = [
  { name: 'EC2 云服务器', path: '/products' },
  { name: 'S3 对象存储', path: '/products' },
  { name: 'RDS 数据库服务', path: '/products' },
  { name: 'Lambda 无服务器', path: '/products' },
  { name: '更多产品...', path: '/products' }
];

const solutions = [
  { name: '网站托管', path: '/solutions' },
  { name: '企业上云', path: '/solutions' },
  { name: '灾备方案', path: '/solutions' },
  { name: '大数据分析', path: '/solutions' },
  { name: '微服务架构', path: '/solutions' }
];
</script> 