import { I18N_NAV } from '@/config/i18nNav';
import { type Locale, localizedUri } from '@/config/i18nRoutes';

const RIGHTS: Record<Locale, string> = {
  fr: 'Tous droits réservés.',
  en: 'All rights reserved.',
  es: 'Todos los derechos reservados.',
};

const Footer = ({ locale = 'fr' }: { locale?: Locale }) => {
  const { footer } = I18N_NAV[locale];
  const homeHref = localizedUri(locale, '/');

  return (
    <footer className="bg-navy text-white pt-16 pb-24 lg:pb-8">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-10 mb-12">
          <div className="lg:col-span-1">
            <a href={homeHref}>
              <img src="/logo-covalba.svg" alt="Covalba" className="h-8 mb-4 brightness-0 invert" />
            </a>
            <p className="text-sm text-white/60 leading-relaxed">{footer.tagline}</p>
          </div>

          {footer.columns.map((col) => (
            <div key={col.titre}>
              <h2 className="font-bold text-sm mb-4">{col.titre}</h2>
              <ul className="space-y-2.5">
                {col.links.map((link) => (
                  <li key={link.name}>
                    <a href={link.href} className="text-sm text-white/50 hover:text-white transition-colors">
                      {link.name}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="border-t border-white/10 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-white/40">© 2026 Covalba. {RIGHTS[locale]}</p>
          <a href="#" className="text-xs text-white/40 hover:text-white transition-colors">
            {footer.legal}
          </a>
        </div>
      </div>
    </footer>
  );
};

export default Footer;