import Link from "next/link";
import { siteConfig } from "@/lib/site-config";
import { trademarkList } from "@/lib/vpn-data";

/**
 * Section links are absolute (`/#picks`) so they still work from the legal pages,
 * where those sections don't exist.
 */
const links = [
  { label: "Top picks", href: "/#picks" },
  { label: "Compare", href: "/#compare" },
  { label: "FAQ", href: "/#faq" },
  { label: "Privacy Policy", href: "/privacy-policy" },
  { label: "Terms", href: "/terms" },
  { label: "Disclaimer", href: "/disclaimer" },
  { label: "Contact", href: "/contact" },
];

export function GuideFooter() {
  return (
    <footer className="bg-[#020E2E] text-[0.84rem] text-[#8BA3DB]">
      <div className="mx-auto w-full max-w-[1080px] px-5 pb-8 pt-10 text-center md:px-7">
        <div className="mx-auto mb-6 max-w-[720px] rounded-[12px] border border-white/[0.12] bg-white/[0.05] p-4 text-[0.8rem] leading-relaxed text-[#C3D0EA]">
          Advertising disclosure: this site is operated by {siteConfig.operator}, the makers of{" "}
          {siteConfig.appName}. We may earn a commission when you sign up through some links on
          this page, at no extra cost to you. {siteConfig.appName} is our own product; we
          disclose that and rank it by the same criteria as every other VPN here. Rankings
          reflect our honest assessment.{" "}
          <Link href="/disclaimer" className="font-semibold text-[#BCD0FF] hover:text-white">
            Read the full disclosure
          </Link>
          .
        </div>

        <div className="mb-4 flex flex-wrap justify-center gap-x-4 gap-y-2 font-semibold sm:gap-x-5">
          {links.map((link) => (
            <Link
              key={link.label}
              href={link.href}
              className="text-[#A5BDFF] transition-colors duration-200 hover:text-white"
            >
              {link.label}
            </Link>
          ))}
        </div>

        <div className="text-[#6B82B3]">
          © {new Date().getFullYear()} {siteConfig.operator}. All rights reserved.
        </div>

        <div className="mx-auto mt-2 max-w-[640px] text-[0.72rem] leading-relaxed text-[#4A6491]">
          Mac and macOS are trademarks of Apple Inc., registered in the U.S. and other countries.
          This site is not affiliated with, endorsed by, or sponsored by Apple Inc.{" "}
          {trademarkList} are trademarks of their respective owners; app icons are shown for
          identification and are used under fair use. This site is not affiliated with or
          endorsed by any of them.
        </div>
      </div>
    </footer>
  );
}