import Link from "next/link";

const LINKS = [
  { label: "FAQ", href: "/faq" },
  { label: "Community", href: "/community" },
  { label: "Privacy", href: "/privacy" },
  { label: "Terms", href: "/terms" },
  { label: "Contact", href: "/contact" },
];

export function Footer() {
  return (
    <footer className="w-full py-12 bg-surface-container-lowest">
      <div className="flex flex-col items-center justify-center space-y-6 w-full px-8 text-center">
        <Link href="/" className="text-lg font-black text-primary-container">
          Belgian Bitcoin Embassy
        </Link>

        <nav aria-label="Footer navigation" className="flex space-x-12">
          {LINKS.map((link) => (
            <Link
              key={link.label}
              href={link.href}
              className="text-white opacity-50 hover:opacity-100 transition-opacity text-sm tracking-widest uppercase"
            >
              {link.label}
            </Link>
          ))}
        </nav>

        <p className="text-white opacity-50 text-sm tracking-widest uppercase">
          &copy; Belgian Bitcoin Embassy. No counterparty risk.
        </p>
      </div>
    </footer>
  );
}