import { Link } from 'react-router-dom';
import { ArrowUpRight, GitBranch } from 'lucide-react';

import { Separator } from '@/components/ui/separator';
import { PIG_URL, REPO_URL, repoFile } from '@/components/site/links';
import { Wordmark } from '@/components/site/Wordmark';
import * as s from '@/content/styles';

const navLink =
  'tap inline-flex items-center gap-2 py-1 text-ui text-fg underline-offset-4 transition-colors duration-1 ease-enter hover:text-accent-fg hover:underline';

/**
 * The footer. The wordmark and the thesis on the left, the three destinations
 * every page must reach on the right, then the three legal lines verbatim.
 *
 * The reproducibility and licence lines are set in the mono label style: they
 * are statements about the repository, the kind of thing a machine reads. The
 * NYT line is a sentence, so it stays in the sans. No line implying Prime
 * Intellect endorsement is added here; that is a business-owner copy decision.
 */
export function SiteFooter() {
  return (
    <footer className="mt-12 border-t border-border bg-surface sm:mt-16">
      <div className={`${s.shell} pb-[max(2rem,var(--safe-bottom))] pt-8`}>
        <div className="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
          <div className="flex flex-col gap-2">
            <Link to="/" className="tap inline-flex w-fit items-center rounded-md" aria-label="PIG demo, home">
              <Wordmark />
            </Link>
            <p className="max-w-[38ch] text-small text-muted">
              An environment is an eval you can take the gradient of.
            </p>
          </div>

          <nav aria-label="Footer" className="flex flex-col gap-1">
            <a className={navLink} href={REPO_URL} target="_blank" rel="noreferrer noopener">
              <GitBranch aria-hidden="true" className="size-4 text-border-strong" />
              Source on Gitea
            </a>
            <Link className={navLink} to="/honesty">
              What we are not claiming
            </Link>
            <a className={navLink} href={PIG_URL} target="_blank" rel="noreferrer noopener">
              primeintellectgrowth.com
              <ArrowUpRight aria-hidden="true" className="size-4 text-border-strong" />
            </a>
          </nav>
        </div>

        <Separator className="my-6" />

        <div className="flex flex-col gap-2">
          {/* Mono 11, but NOT uppercase: these are sentences about the
              repository, and a forty-word sentence in small caps is unreadable. */}
          <p className="font-mono text-label normal-case tracking-normal text-muted">
            Every number on this site is reproducible from the repository: the environments, the
            recorded rollouts and the command that produced them all ship with the source.
          </p>
          <p className="font-mono text-label normal-case tracking-normal text-muted">
            Licensed{' '}
            <a
              className="underline underline-offset-2 transition-colors duration-1 ease-enter hover:text-accent-fg"
              href={repoFile('LICENSE')}
              target="_blank"
              rel="noreferrer noopener"
            >
              Apache-2.0
            </a>
            .
          </p>
          {/*
            Stated plainly and kept in the footer of every page, verbatim. The
            word game demo is an independent implementation of a public game
            mechanic; the trademark belongs to someone else and this site must
            never read as if it were theirs.
          */}
          <p className="text-caption text-muted">
            Not affiliated with, endorsed by, or connected to The New York Times Company. Wordle is
            their trademark.
          </p>
        </div>
      </div>
    </footer>
  );
}
