<template>
  <footer class="bg-gray-900 text-gray-400 px-6 py-12 mt-auto">
    <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <h4 class="text-white text-sm font-semibold mb-4 uppercase tracking-wider">Product</h4>
        <ul class="space-y-2 text-sm">
          <li><NuxtLink to="/" class="hover:text-white transition-colors text-gray-400">Home</NuxtLink></li>
          <li><NuxtLink to="/pricing" class="hover:text-white transition-colors text-gray-400">Pricing</NuxtLink></li>
          <li><a href="#" class="hover:text-white transition-colors text-gray-400">FAQ</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-white text-sm font-semibold mb-4 uppercase tracking-wider">Legal</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-white transition-colors text-gray-400">Privacy policy</a></li>
          <li><a href="#" class="hover:text-white transition-colors text-gray-400">Terms &amp; conditions</a></li>
          <li><a href="#" class="hover:text-white transition-colors text-gray-400">Security</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-white text-sm font-semibold mb-4 uppercase tracking-wider">Company</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-white transition-colors text-gray-400">About</a></li>
          <li><a href="#" class="hover:text-white transition-colors text-gray-400">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="max-w-6xl mx-auto mt-8 pt-6 border-t border-gray-800 text-xs text-gray-600">
      &copy; IDconvert 2026
    </div>
  </footer>
</template>
