import { Link } from "@tanstack/react-router";

import { useI18n } from "@/lib/i18n";
import { LEGAL_LINKS } from "@/lib/legal";
import payMcx from "@/assets/pay-mcx.png.asset.json";
import payEmis from "@/assets/pay-emis.png.asset.json";
import payUnitel from "@/assets/pay-unitel.png.asset.json";
import payAfricell from "@/assets/pay-africell.png.asset.json";
import payKwik from "@/assets/pay-kwik.png.asset.json";
import payAngopay from "@/assets/pay-angopay.png.asset.json";
import payPaypal from "@/assets/pay-paypal.png.asset.json";

const PAYMENT_LOGOS: { name: string; src: string; bg?: string; wide?: boolean }[] = [
  { name: "Multicaixa Express", src: payMcx.url },
  { name: "Multicaixa / EMIS", src: payEmis.url },
  { name: "Unitel Money", src: payUnitel.url, bg: "#E30613", wide: true },
  { name: "Afrimoney", src: payAfricell.url },
  { name: "KWiK", src: payKwik.url, bg: "#141414" },
  { name: "AngoPay", src: payAngopay.url },
  { name: "PayPal", src: payPaypal.url },
];

export function Footer() {
  const { lang } = useI18n();
  const year = new Date().getFullYear();

  return (
    <footer className="mt-10 border-t border-border bg-card/70">
      <div className="mx-auto w-full max-w-6xl px-4 py-8">
        <div className="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
          <div className="max-w-sm">
            <p className="font-display text-xl font-bold text-primary">KUYA</p>
            <p className="mt-2 text-sm text-muted-foreground">
              {lang === "pt"
                ? "Mercado online de Angola. Compra e vende com segurança, em Kwanzas, em todas as províncias."
                : "Angola's online marketplace. Buy and sell safely, in Kwanza, across every province."}
            </p>
          </div>

          <nav aria-label={lang === "pt" ? "Informação legal" : "Legal information"}>
            <h2 className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
              {lang === "pt" ? "Legal e segurança" : "Legal & safety"}
            </h2>
            <ul className="mt-3 grid gap-2 sm:grid-cols-2 sm:gap-x-8">
              {LEGAL_LINKS.map((item) => (
                <li key={item.slug}>
                  <Link
                    to={`/${item.slug}` as "/termos"}
                    className="text-sm text-foreground/80 underline-offset-4 hover:text-primary hover:underline"
                  >
                    {item.label[lang]}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          <div className="text-sm text-muted-foreground">
            <h2 className="text-xs font-bold uppercase tracking-wide">
              {lang === "pt" ? "Contactos" : "Contact"}
            </h2>
            <ul className="mt-3 space-y-2">
              <li>
                <a className="hover:text-primary" href="mailto:apoio@kuya.ao">
                  apoio@kuya.ao
                </a>
              </li>
              <li>
                <a className="hover:text-primary" href="mailto:seguranca@kuya.ao">
                  seguranca@kuya.ao
                </a>
              </li>
              <li>
                <a className="hover:text-primary" href="mailto:privacidade@kuya.ao">
                  privacidade@kuya.ao
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-8">
          <h2 className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
            {lang === "pt" ? "Métodos de pagamento" : "Payment methods"}
          </h2>
          <ul className="mt-3 flex flex-wrap items-center gap-2">
            {PAYMENT_LOGOS.map(({ name, src, bg, wide }) => (
              <li
                key={name}
                title={name}
                className="flex h-9 items-center justify-center rounded-lg border border-border px-2.5 shadow-sm"
                style={{ backgroundColor: bg ?? "#FFFFFF" }}
              >
                <img
                  src={src}
                  alt={name}
                  loading="lazy"
                  className={wide ? "max-h-4 max-w-24 object-contain" : "max-h-5 max-w-16 object-contain"}
                />
              </li>
            ))}
          </ul>
        </div>

        <p className="mt-8 border-t border-border pt-4 text-xs text-muted-foreground">
          © {year} KUYA.{" "}
          {lang === "pt"
            ? "Todos os direitos reservados. O KUYA é uma plataforma de intermediação: os negócios são celebrados entre compradores e vendedores."
            : "All rights reserved. KUYA is an intermediary platform: deals are made between buyers and sellers."}
        </p>
      </div>
    </footer>
  );
}