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

import {
  EnvironmentGrid,
  FeaturedEnvironment,
  builtEnvironments,
  writtenEnvironments,
} from '@/components/site/EnvironmentPicker';
import { helloWorldCitations, trainingResult } from '@/content/evidence';
import { routes } from '@/content/lineup';
import { PROPOSAL_NOTICE } from '@/content/verticals';
import * as s from '@/content/styles';
import { pageTitle, useSeo } from '@/lib/seo';

/**
 * The landing page: a line of thesis, then the picker.
 *
 * The page used to open with the argument and bury the demos below it. That is
 * an essay, and an executive who has read the first sentence has already
 * decided whether to click something. So the picker is the primary object here
 * and everything that used to lead — the credential, the measured number — sits
 * underneath it as support for a visitor who wants it before they click.
 *
 * Counts in the copy are derived from the registry and the lineup, never typed.
 * A hard-coded "eleven" on a site whose whole argument is that its claims are
 * checkable goes stale the first time a demo ships.
 */
export default function Home() {
  // The head is set here as well as baked by `scripts/prerender.mjs`, and the
  // two are not redundant: prerender covers the crawler that fetches the
  // document, this covers the visitor who arrives on another route and clicks
  // through without ever fetching a new one. Prerender prefers whatever the
  // app set, so this is also the single source for the baked tags.
  useSeo({
    title: pageTitle(),
    description:
      'Interactive demos of reinforcement-learning environments for executives. Play the environment, watch a recorded model play the same board, then move the reward and watch the ranking change.',
    canonical: routes.home,
    ogImage: '/og/home.png',
  });

  const [featured, ...otherBuilt] = builtEnvironments;
  const builtCount = builtEnvironments.length;
  const writtenCount = writtenEnvironments.length;

  // Written out rather than interpolated inline so the zero and the singular
  // both read as English. Both numbers come from the data — `VERTICALS` has
  // twelve entries and none of them is keyed `reference`, so the one live demo
  // suppresses no proposal and the lineup reads one and twelve today. It will
  // not stay that way, and the sentence has to survive the day it changes.
  const builtSentence =
    builtCount === 1
      ? 'One environment is built and playable in this tab.'
      : `${builtCount} environments are built and playable in this tab.`;
  const writtenSentence =
    writtenCount === 1
      ? 'One more is a written specification:'
      : `The other ${writtenCount} are written specifications:`;

  return (
    <main>
      {/* ── The thesis, in two sentences ───────────────────────────────── */}
      <section className={`${s.shell} pt-10 sm:pt-16`}>
        <p className={s.eyebrow}>Environments, demonstrated</p>
        <h1 className={`${s.h1} mt-3 max-w-4xl`}>
          An environment is an eval you can take the gradient of.
        </h1>
        <p className={`${s.lede} mt-5 max-w-2xl`}>
          You write down what good means, in code, and then you train against that number and watch
          it move — or watch it sit still, which you found out in an afternoon instead of a quarter.
        </p>
      </section>

      {/* ── The picker: the built one ──────────────────────────────────── */}
      <section aria-labelledby="pick" className={`${s.shell} mt-10 sm:mt-14`}>
        <h2 className={s.h2} id="pick">
          Pick one. You are playing it in a click.
        </h2>
        <p className={`${s.prose} mt-3 max-w-3xl`}>
          {builtSentence}{' '}
          {writtenCount === 0 ? null : (
            <>
              {writtenSentence} the task, the grader, the counterweight that stops the grader being
              farmed, and the command that evaluates it. Nothing here is a coming-soon card.
            </>
          )}
        </p>

        {featured ? <FeaturedEnvironment className="mt-6" entry={featured} /> : null}
        {otherBuilt.length > 0 ? <EnvironmentGrid className="mt-4" entries={otherBuilt} /> : null}
      </section>

      {/* ── The picker: the written ones ───────────────────────────────── */}
      {/* Dropped entirely rather than rendered as "The 0 we have written": the
          day every proposal becomes a demo, this section should disappear. */}
      {writtenCount === 0 ? null : (
      <section aria-labelledby="written" className={`${s.shell} mt-10 sm:mt-14`}>
        <div className="flex flex-wrap items-end justify-between gap-3">
          <h2 className={s.h2} id="written">
            The {writtenCount} we have written but not built.
          </h2>
          <span className={s.proposalPill}>{PROPOSAL_NOTICE}</span>
        </div>
        <p className={`${s.prose} mt-3 max-w-3xl`}>
          Each one is a task an environment could run, a reward stated in a number your board already
          reads, and the counterweight that stops that reward being maximised the crude way. Every
          card opens the whole argument, including where it stops being honest.
        </p>

        <EnvironmentGrid className="mt-6" entries={writtenEnvironments} />

        <Link className={`${s.btnSecondary} mt-6`} to={routes.gallery}>
          Filter the lineup by industry
          <ArrowRight aria-hidden="true" className="size-4" />
        </Link>
      </section>
      )}

      {/* ── The support: why this game, and the one measured number ────── */}
      <section aria-labelledby="evidence" className={`${s.shell} ${s.section}`}>
        <h2 className="sr-only" id="evidence">
          Why this environment, and what has been measured on it
        </h2>
        <div className="grid gap-4 lg:grid-cols-2">
          <div className="card p-5 sm:p-7">
            <p className={s.eyebrow}>Why a word game</p>
            <h3 className="mt-2 text-xl font-bold tracking-tight text-fg sm:text-2xl">
              We didn’t pick a game. We picked theirs.
            </h3>
            <p className={`${s.prose} mt-3`}>
              Wordle is Prime Intellect’s own hello-world: a basic example in their trainer, a
              shipped environment in their library, and the environment their official tutorial
              optimises prompts against.
            </p>
            <ul className="mt-4 space-y-2">
              {helloWorldCitations.map((c) => (
                <li key={c.href}>
                  <a
                    className="tap flex items-start gap-2 rounded-md py-1 text-sm text-muted transition-colors duration-1 ease-enter hover:text-fg"
                    href={c.href}
                    rel="noreferrer noopener"
                    target="_blank"
                  >
                    <ArrowUpRight aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-brand" />
                    <span>
                      <span className="font-mono text-[0.8125rem] text-fg">{c.label}</span>
                      <span className="block">{c.claim}</span>
                      <span className="sr-only">(opens in a new tab)</span>
                    </span>
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div className="card p-5 sm:p-7">
            <p className={s.eyebrow}>Published by Prime Intellect</p>
            <p className="nums mt-3 flex flex-wrap items-baseline gap-x-3 gap-y-1">
              <span className="text-4xl font-extrabold tracking-tight text-muted sm:text-5xl">
                {trainingResult.before}
              </span>
              <ArrowRight aria-hidden="true" className="size-6 shrink-0 text-muted" />
              <span className="text-4xl font-extrabold tracking-tight text-positive sm:text-5xl">
                {trainingResult.after}
              </span>
            </p>
            <p className={`${s.prose} mt-3`}>
              {trainingResult.model} {trainingResult.metric} on this task, before and after training.
              Out of the box it never once guesses the word; after an {trainingResult.method}, it
              wins about six games in ten. Measured on {trainingResult.evalDescription}, and both
              checkpoints are public, so the claim is checkable rather than quotable.
            </p>
            <p className="mt-4 flex flex-wrap gap-2">
              <a
                className={s.pill}
                href={trainingResult.source.href}
                rel="noreferrer noopener"
                target="_blank"
              >
                The write-up
                <ArrowUpRight aria-hidden="true" className="size-3.5" />
              </a>
              {trainingResult.checkpoints.map((c) => (
                <a
                  className={s.pill}
                  href={c.href}
                  key={c.href}
                  rel="noreferrer noopener"
                  target="_blank"
                >
                  <span className="font-mono">{c.label.replace('PrimeIntellect/', '')}</span>
                  <ArrowUpRight aria-hidden="true" className="size-3.5" />
                </a>
              ))}
            </p>
            {/*
              The same write-up publishes average-reward figures for these runs.
              They are deliberately not on this page — see /honesty.
            */}
            <p className="mt-3 text-xs text-muted">
              We quote the win rate only. The reward numbers in that write-up span versions of the
              environment and were never re-measured together.
            </p>
          </div>
        </div>

        <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center">
          <Link className={s.btnSecondary} to={routes.honesty}>
            What we measured, and what we didn’t
          </Link>
          <p className="text-sm text-muted">
            Every number on this site, with the one that is ours and the ones that are not.
          </p>
        </div>
      </section>
    </main>
  );
}
