import Link from "next/link";
import { Logo } from "@/components/logo";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const columns = [
  {
    title: "Product",
    links: [
      { href: "/platform", label: "Platform" },
      { href: "/fabric", label: "Fabric" },
      { href: "/solutions", label: "Solutions" },
      { href: "/pricing", label: "Pricing" },
      { href: "/request-access", label: "Request access" },
    ],
  },
  {
    title: "Company",
    links: [
      { href: "/about", label: "About" },
      { href: "/customers", label: "Customers" },
      { href: "/careers", label: "Careers" },
      { href: "/insights", label: "Insights" },
    ],
  },
  {
    title: "Trust",
    links: [
      { href: "/trust", label: "Trust center" },
      { href: "/privacy", label: "Privacy" },
      { href: "/terms", label: "Terms" },
      { href: "/pricing", label: "Sovereign" },
    ],
  },
];

export function SiteFooter() {
  return (
    <footer className="relative border-t border-white/10 bg-background/40 backdrop-blur-xl">
      <div className="mx-auto grid max-w-6xl gap-12 px-5 py-16 sm:px-8 md:grid-cols-5">
        <div className="md:col-span-2">
          <Logo />
          <p className="mt-4 max-w-sm text-sm leading-relaxed text-muted-foreground">
            The agentic cloud for enterprise outcomes. Space-aware,
            entanglement-ready, hyperautomation-compliant — and surprisingly
            serious about Dogecoin.
          </p>
          <Link
            href="/request-access"
            className={cn(
              buttonVariants({ variant: "outline" }),
              "mt-6 h-9 px-3.5"
            )}
          >
            Request access
          </Link>
        </div>
        {columns.map((col) => (
          <div key={col.title}>
            <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
              {col.title}
            </p>
            <ul className="mt-4 space-y-2.5">
              {col.links.map((link) => (
                <li key={link.href + link.label}>
                  <Link
                    href={link.href}
                    className="text-sm text-foreground/85 transition-colors hover:text-primary"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="border-t border-white/10">
        <div className="mx-auto flex max-w-6xl flex-col gap-3 px-5 py-6 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:px-8">
          <p>
            © {new Date().getFullYear()} The Agentic Cloud, Inc. All rights
            reserved.
          </p>
          <p className="flex flex-wrap gap-x-4 gap-y-1">
            <span>SOC 2 Type II</span>
            <span>ISO 27001</span>
            <span>FedRAMP High</span>
            <span>SLSA L3</span>
            <span>GDPR · CCPA · COPPA</span>
          </p>
        </div>
      </div>
    </footer>
  );
}