---
import { getTranslations, langPrefix } from '../i18n/index.js';

const { lang = 'fr' } = Astro.props;
const t = getTranslations(lang);
const prefix = langPrefix(lang);
---

<footer class="border-t border-gray-800 mt-20">
  <div class="max-w-6xl mx-auto px-6 py-12">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 mb-10">
      <!-- Brand -->
      <div>
        <a href={`${prefix}/`} class="text-xl font-bold"><span class="text-brand-400">Ilia</span>Cloud</a>
        <p class="mt-3 text-sm text-gray-500">{t.footer.brand}</p>
      </div>
      <!-- Produit -->
      <div>
        <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-300 mb-3">{t.footer.product}</h3>
        <ul class="space-y-2 text-sm text-gray-400">
          <li><a href={`${prefix}/features`} class="hover:text-white transition-colors">{t.footer.features}</a></li>
          <li><a href={`${prefix}/pricing`} class="hover:text-white transition-colors">{t.footer.pricing}</a></li>
          <li><a href={`${prefix}/security`} class="hover:text-white transition-colors">{t.footer.security}</a></li>
          <li><a href="https://app.iliacloud.com/status/iliacloud" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">{t.footer.status}</a></li>
          <li><a href={`${prefix}/roadmap`} class="hover:text-white transition-colors">{t.footer.roadmap}</a></li>
          <li><a href="https://api.iliacloud.com/api/docs" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">{t.footer.api}</a></li>
          <li><a href={`${prefix}/faq`} class="hover:text-white transition-colors">{t.footer.faq}</a></li>
        </ul>
      </div>
      <!-- Legal -->
      <div>
        <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-300 mb-3">{t.footer.legal}</h3>
        <ul class="space-y-2 text-sm text-gray-400">
          <li><a href={`${prefix}/cgu`} class="hover:text-white transition-colors">{t.footer.cgu}</a></li>
          <li><a href={`${prefix}/privacy`} class="hover:text-white transition-colors">{t.footer.privacy}</a></li>
          <li><a href={`${prefix}/legal`} class="hover:text-white transition-colors">{t.footer.legalMentions}</a></li>
        </ul>
      </div>
      <!-- Contact -->
      <div>
        <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-300 mb-3">{t.footer.contact}</h3>
        <ul class="space-y-2 text-sm text-gray-400">
          <li><a href={`${prefix}/contact`} class="hover:text-white transition-colors">{t.footer.contactUs}</a></li>
        </ul>
      </div>
    </div>
    <div class="border-t border-gray-800 pt-6 text-center text-sm text-gray-500">
      &copy; 2026 {t.footer.copyright}
    </div>
  </div>
</footer>