import { LEGAL_PAGES } from "~/lib/legal";
import { FEATURE_PAGES } from "~/lib/marketing/features";
import { LICENSE_NAME, SOURCE_URL } from "~/lib/marketing/site";
import { Logo } from "~/ui/Logo";
import { ExternalLink, TextLink } from "~/ui/TextLink";

const RESOURCES = [
  { to: "/features", label: "All features" },
  { to: "/self-host", label: "Self-host" },
  { to: "/explore", label: "Explore" },
  { to: "/abuse", label: "Report abuse" },
] as const;

const COLUMN_TITLE = "label-small mb-3 text-kumo-subtle";

export function SiteFooter() {
  return (
    <footer className="border-t border-kumo-hairline bg-kumo-canvas/60">
      <div className="mx-auto grid max-w-7xl gap-10 px-4 py-12 md:grid-cols-[1.5fr_1fr_1fr_1fr] md:px-6">
        <div className="space-y-3">
          <Logo />
          <p className="max-w-xs text-sm text-kumo-subtle">
            Open-source Git hosting with code review, CI/CD and site hosting.
          </p>
        </div>
        <nav aria-label="Product">
          <h2 className={COLUMN_TITLE}>Product</h2>
          <ul className="space-y-2 text-sm">
            {FEATURE_PAGES.map((page) => (
              <li key={page.slug}>
                <TextLink to="/features/$slug" params={{ slug: page.slug }} tone="subtle" className="text-kumo-subtle">
                  {page.nav}
                </TextLink>
              </li>
            ))}
          </ul>
        </nav>
        <nav aria-label="Resources">
          <h2 className={COLUMN_TITLE}>Resources</h2>
          <ul className="space-y-2 text-sm">
            {RESOURCES.map((item) => (
              <li key={item.to}>
                <TextLink to={item.to} tone="subtle" className="text-kumo-subtle">
                  {item.label}
                </TextLink>
              </li>
            ))}
            <li>
              <ExternalLink href={SOURCE_URL} tone="subtle" className="text-kumo-subtle" rel="noreferrer">
                Source code
              </ExternalLink>
            </li>
          </ul>
        </nav>
        <nav aria-label="Legal">
          <h2 className={COLUMN_TITLE}>Legal</h2>
          <ul className="space-y-2 text-sm">
            {LEGAL_PAGES.map((item) => (
              <li key={item.to}>
                <TextLink to={item.to} tone="subtle" className="text-kumo-subtle">
                  {item.label}
                </TextLink>
              </li>
            ))}
          </ul>
        </nav>
      </div>
      <div className="border-t border-kumo-hairline">
        <p className="mx-auto flex max-w-7xl flex-wrap justify-between gap-2 px-4 py-4 text-xs text-kumo-inactive md:px-6">
          <span>Open source under {LICENSE_NAME}.</span>
          <span>Runs on Cloudflare's global network.</span>
        </p>
      </div>
    </footer>
  );
}