import Link from "next/link";
import { DISCLAIMER } from "@/lib/site";
import { Wordmark } from "./logo";

const COLS: Array<{ title: string; links: Array<[string, string]> }> = [
  { title: "Markets", links: [["/stocks", "Stocks"], ["/etfs", "ETFs"], ["/indices", "Indices"], ["/crypto", "Crypto"], ["/forex", "Forex"], ["/rates", "Rates"], ["/commodities", "Commodities"]] },
  { title: "Atlas", links: [["/live", "Live feed"], ["/exchanges", "Exchanges"], ["/countries", "Countries"], ["/events", "Events"], ["/halts", "Halts"], ["/filings", "Filings"], ["/compare", "Compare"]] },
  { title: "Data", links: [["/sources", "Sources"], ["/coverage", "Source coverage"], ["/connectors", "Connectors"], ["/data-health", "Data health"], ["/status", "Status"], ["/methodology", "Methodology"], ["/licensing", "Data rights"], ["/developers", "Developers"]] },
];

export function SiteFooter() {
  return (
    <footer className="rule-t mt-12 bg-surface">
      <div className="mx-auto grid grid-cols-1 [&>*]:min-w-0 max-w-[1440px] gap-8 px-4 py-10 sm:px-5 md:grid-cols-[1.4fr_repeat(3,1fr)]">
        <div>
          <Wordmark />
          <p className="mt-3 max-w-sm text-xs leading-relaxed text-ink-3">{DISCLAIMER}</p>
          <p className="mt-3 text-xs text-ink-3">
            Prices may be delayed or end-of-day depending on the source; every quote carries its data status and provenance. See <Link href="/methodology" className="text-accent hover:underline">methodology</Link>.
          </p>
        </div>
        {COLS.map((c) => (
          <div key={c.title}>
            <h3 className="mb-2 text-[11px] font-medium uppercase tracking-wide text-ink-3">{c.title}</h3>
            <ul className="space-y-1.5 text-sm">
              {c.links.map(([href, label]) => (
                <li key={href}>
                  <Link href={href} className="text-ink-2 hover:text-ink">
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="rule-t">
        <div className="mx-auto flex max-w-[1440px] flex-wrap items-center justify-between gap-2 px-4 py-3 text-[11px] text-ink-3 sm:px-5">
          <span>© {new Date().getUTCFullYear()} Market Atlas · The live map of global markets.</span>
          <span>Data attributions: Coinbase, Kraken, Binance, OKX, Cboe (15-min delayed), ECB, Bank of Canada, U.S. Treasury, SEC EDGAR, Nasdaq Trader, HF Market Data.</span>
        </div>
      </div>
    </footer>
  );
}