/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: components/Footer.tsx
 * Description: Site footer with tagline, navigation, and contact information (light theme)
 */

import Link from "next/link";
import Logo from "@/components/Logo";
import ManageCookiesButton from "@/components/ManageCookiesButton";
import type { Locale, Messages } from "@/lib/i18n";

export default function Footer({
  locale,
  messages,
}: {
  locale: Locale;
  messages: Messages;
}) {
  const { nav, footer } = messages;
  const links = [
    { href: `/${locale}/about`, label: nav.about },
    { href: `/${locale}/founders`, label: nav.founders },
    { href: `/${locale}/services`, label: nav.services },
    { href: `/${locale}/security`, label: nav.security },
    { href: `/${locale}/industries`, label: nav.industries },
    { href: `/${locale}/apps`, label: nav.apps },
    { href: `/${locale}/contact`, label: nav.contact },
  ];

  return (
    <footer className="border-t border-line bg-paper-2">
      <div className="mx-auto grid w-full max-w-6xl gap-10 px-5 py-16 sm:px-8 md:grid-cols-4">
        <div className="md:col-span-1">
          <Logo />
          <p className="mt-5 max-w-xs text-sm leading-relaxed text-ink-faint">
            {footer.tagline}
          </p>
        </div>
        <nav aria-label="Footer">
          <h2 className="font-mono text-xs uppercase tracking-[0.25em] text-ink-faint">
            {footer.navTitle}
          </h2>
          <ul className="mt-4 grid grid-cols-2 gap-2.5">
            {links.map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  className="text-sm text-ink-soft transition-colors hover:text-accent"
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
        <div>
          <h2 className="font-mono text-xs uppercase tracking-[0.25em] text-ink-faint">
            {footer.legalTitle}
          </h2>
          <ul className="mt-4 grid gap-2.5">
            <li>
              <Link
                href={`/${locale}/terms`}
                className="text-sm text-ink-soft transition-colors hover:text-accent"
              >
                {footer.terms}
              </Link>
            </li>
            <li>
              <Link
                href={`/${locale}/privacy`}
                className="text-sm text-ink-soft transition-colors hover:text-accent"
              >
                {footer.privacy}
              </Link>
            </li>
            <li>
              <ManageCookiesButton
                label={footer.cookies}
                className="text-left text-sm text-ink-soft transition-colors hover:text-accent"
              />
            </li>
          </ul>
        </div>
        <div>
          <h2 className="font-mono text-xs uppercase tracking-[0.25em] text-ink-faint">
            {footer.contactTitle}
          </h2>
          <a
            href="mailto:contact@spboucher.ai"
            className="mt-4 inline-block text-sm font-medium text-accent hover:text-accent-strong"
          >
            contact@spboucher.ai
          </a>
        </div>
      </div>
      <div className="border-t border-line">
        <p className="mx-auto w-full max-w-6xl px-5 py-5 text-xs text-ink-faint sm:px-8">
          © 2026 Hilmacorp.ai — {footer.rights}
        </p>
      </div>
    </footer>
  );
}