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 bg-surface-container-lowest pt-8 sm:pt-12 pb-[max(2rem,env(safe-area-inset-bottom))] sm:pb-[max(3rem,env(safe-area-inset-bottom))]">
      <div className="flex flex-col items-center justify-center gap-6 w-full px-4 sm:px-8 text-center">
        <Link
          href="/"
          className="text-base sm:text-lg font-black text-primary-container px-2 leading-tight"
        >
          Belgian Bitcoin Embassy
        </Link>

        <nav
          aria-label="Footer navigation"
          className="flex flex-wrap justify-center gap-x-4 gap-y-2 sm:gap-x-8 sm:gap-y-3 md:gap-x-12"
        >
          {LINKS.map((link) => (
            <Link
              key={link.label}
              href={link.href}
              className="text-white opacity-50 hover:opacity-100 transition-opacity text-xs sm:text-sm tracking-widest uppercase inline-flex min-h-[44px] items-center px-1.5"
            >
              {link.label}
            </Link>
          ))}
        </nav>

        <p className="text-white opacity-50 text-xs sm:text-sm tracking-widest uppercase max-w-[min(100%,22rem)] sm:max-w-md leading-relaxed text-balance">
          &copy; Belgian Bitcoin Embassy.
        </p>
      </div>
    </footer>
  );
}
