gitfor/platform

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">