<template>
  <footer class="bg-gray-900 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <img src="/logo.svg" alt="ClueFlare" class="h-8 w-8">
            <span class="text-xl font-bold">ClueFlare</span>
          </div>
          <p class="text-gray-400">{{ t('footer.description') }}</p>
        </div>
        
        <div>
          <h4 class="font-semibold mb-4">Services</h4>
          <ul class="space-y-2 text-gray-400">
            <li>AWS Proxy</li>
            <li>Alibaba Cloud</li>
            <li>Tencent Cloud</li>
            <li>DigitalOcean</li>
          </ul>
        </div>
        
        <div>
          <h4 class="font-semibold mb-4">Company</h4>
          <ul class="space-y-2 text-gray-400">
            <li><NuxtLink :to="localePath('/about')" class="hover:text-white transition-colors">About Us</NuxtLink></li>
            <li><NuxtLink :to="localePath('/blog')" class="hover:text-white transition-colors">Blog</NuxtLink></li>
            <li><NuxtLink :to="localePath('/contact')" class="hover:text-white transition-colors">Contact</NuxtLink></li>
            <li><a href="/sitemap_index.xml" class="hover:text-white transition-colors" target="_blank">Sitemap</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="font-semibold mb-4">{{ t('contact.title') }}</h4>
          <div class="space-y-2 text-gray-400">
            <p>{{ t('contact.telegram') }}: {{ t('contact.username') }}</p>
            <p>{{ t('contact.whatsapp') }}: {{ t('contact.phone') }}</p>
          </div>
        </div>
      </div>
      
      <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
        <p>&copy; 2024 ClueFlare. {{ t('footer.rights') }}</p>
      </div>
    </div>
  </footer>
</template>

<script setup>
const { t } = useI18n()
const localePath = useLocalePath()
</script>


