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 className="max-w-3xl text-white/65 text-xs sm:text-sm leading-relaxed text-left">
          <h2 className="text-white/75 font-semibold mb-2">Disclaimer</h2>
          <p>
            The Belgian Bitcoin Embassy provides information for educational purposes only and
            does not offer financial, investment, or legal advice. Bitcoin and other
            cryptocurrencies are subject to high volatility and potential risks. Always conduct
            your own research and consult a qualified professional before making any financial
            decisions. The Embassy is not responsible for any losses or damages resulting from the
            use of this information.
          </p>
          <p className="mt-3">
            Cryptocurrencies may be subject to regulatory changes; ensure compliance with local
            laws. Remember to practice safe security measures, including the use of secure wallets
            and private key protection.
          </p>
        </div>
      </div>
    </footer>
  );
}
