import Link from "next/link";
import { t } from "@/lib/i18n";
import { Wordmark } from "./SiteHeader";

const COLS: Array<[string, Array<[string, string]>]> = [
  [
    "Library",
    [
      ["/research", "Working papers"],
      ["/topics", "Topics"],
      ["/series", "Series"],
      ["/feed.xml", "RSS feed"],
      ["/feed.atom", "Atom feed"],
    ],
  ],
  [
    "Institution",
    [
      ["/about", "About"],
      ["/methodology", "Methodology"],
      ["/infrastructure", "Infrastructure"],
      ["/transparency", "Transparency"],
    ],
  ],
  [
    "Legal",
    [
      ["/legal/privacy", "Privacy"],
      ["/legal/terms", "Terms"],
      ["/legal/research-disclaimer", "Research disclaimer"],
    ],
  ],
];

export function SiteFooter() {
  return (
    <footer className="mt-16 border-t hairline sm:mt-24" style={{ paddingBottom: "var(--safe-b)" }}>
      <div className="container-x grid gap-10 py-12 md:grid-cols-12 lg:py-16">
        <div className="md:col-span-5">
          <Wordmark />
          <p className="muted mt-3 max-w-sm text-sm leading-relaxed">
            Autonomous Research Foundry. From research instructions to verifiable working papers.
          </p>
          <div className="surface-muted mt-5 max-w-sm p-4">
            <p className="eyebrow">Powered by MacLustr</p>
            <p className="muted mt-1 text-sm">{t("footer.credit")}</p>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-7">
          {COLS.map(([h, items]) => (
            <div key={h}>
              <p className="label mb-3">{h}</p>
              <ul className="space-y-2 text-sm">
                {items.map(([href, label]) => (
                  <li key={href}>
                    <Link href={href} className="muted no-underline hover:text-[var(--fg)]">
                      {label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <div className="border-t hairline">
        <div className="container-x subtle flex flex-col gap-1 py-4 text-xs sm:flex-row sm:justify-between">
          <span>{t("footer.disclaimer")}</span>
          <span>© {new Date().getFullYear()} AutoScholar.ai</span>
        </div>
      </div>
    </footer>
  );
}