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

import { helloWorldCitations, reproduce, trainingResult } from '@/content/evidence';
import { iconFor } from '@/content/icons';
import { featuredDemo, lineup, routes } from '@/content/lineup';
import { PROPOSAL_NOTICE } from '@/content/verticals';
import * as s from '@/content/styles';
import { pageTitle, useSeo } from '@/lib/seo';

/**
 * The four boxes. This is the definition the whole site rests on, so it is
 * written once, here, in the order a person who has never heard the words
 * "reinforcement learning" can read it: what the job is, what you are allowed
 * to do, who marks it, what the mark is.
 */
const ANATOMY: readonly { label: string; body: string }[] = [
  {
    label: 'A task',
    body: 'One unit of work with a beginning and an end. Guess a five-letter word in six tries.',
  },
  {
    label: 'Legal moves',
    body: 'What the player is allowed to do. Any word on the list, once, five letters.',
  },
  {
    label: 'A grader',
    body: 'Code that marks the attempt. It runs the same way every time and there is nobody to appeal to.',
  },
  {
    label: 'A score that moves',
    body: 'One number per attempt. Train against it and it goes up, or it does not and you found that out cheaply.',
  },
];

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. Real verifiers environments, real recorded rollouts, and a reward you can change to see the ranking flip.',
    canonical: routes.home,
    ogImage: '/og/home.png',
  });

  const Featured = featuredDemo;

  return (
    <main>
      {/* ── The thesis ─────────────────────────────────────────────────── */}
      <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. A model attempts the work. The grader scores it
          and cannot be argued with. Then you train against that score and watch the number move —
          or watch it not move, which you found out in an afternoon instead of a quarter.
        </p>

        <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:items-center">
          {Featured ? (
            <Link className={s.btnPrimary} to={routes.demo(Featured.slug)}>
              <Play aria-hidden="true" className="size-4" />
              Play the environment
            </Link>
          ) : null}
          <Link className={s.btnSecondary} to={routes.honesty}>
            What we measured, and what we didn’t
          </Link>
        </div>
      </section>

      {/* ── The credential, before anything else we say ────────────────── */}
      <section className={`${s.shell} ${s.section}`}>
        <div className="card p-5 sm:p-7">
          <p className={s.eyebrow}>Why a word game</p>
          <h2 className={`${s.h2} mt-2`}>We didn’t pick a game. We picked theirs.</h2>
          <p className={`${s.prose} mt-3 max-w-3xl`}>
            Wordle is Prime Intellect’s own hello-world. It is one of five basic end-to-end examples
            in their trainer, a shipped environment in their library, and the environment their
            official tutorial optimises prompts against. A demo of their idea should start where
            they start.
          </p>
          <ul className="mt-5 grid gap-3 sm:grid-cols-3">
            {helloWorldCitations.map((c) => (
              <li key={c.href}>
                <a
                  aria-label={c.label}
                  className={`${s.cardLink} h-full bg-surface-2`}
                  href={c.href}
                  rel="noreferrer noopener"
                  target="_blank"
                >
                  <span className={`${s.h3} inline-flex items-start gap-1.5`}>
                    <span className="font-mono text-[0.8125rem] leading-6">{c.label}</span>
                    <ArrowUpRight aria-hidden="true" className="mt-1 size-4 shrink-0 text-muted" />
                  </span>
                  <span className={`${s.prose} mt-2 text-sm`}>{c.claim}</span>
                  <span className="sr-only">(opens in a new tab)</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* ── What an environment is, in four boxes ──────────────────────── */}
      <section className={`${s.shell} pb-12 sm:pb-16`}>
        <h2 className={s.h2}>Four parts. That is the whole of it.</h2>
        <ol className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {ANATOMY.map((box, i) => (
            <li className="card flex flex-col p-5" key={box.label}>
              <span className="nums text-xs font-semibold text-brand">0{i + 1}</span>
              <h3 className={`${s.h3} mt-2`}>{box.label}</h3>
              <p className={`${s.prose} mt-2 text-sm`}>{box.body}</p>
            </li>
          ))}
        </ol>
      </section>

      {/* ── The one measured number ────────────────────────────────────── */}
      <section className={`${s.shell} pb-12 sm:pb-16`}>
        <div className="card overflow-hidden">
          <div className="grid gap-6 p-5 sm:p-7 lg:grid-cols-[minmax(0,22rem)_minmax(0,1fr)] lg:gap-10">
            <div>
              <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-2 text-sm`}>
                {trainingResult.model} {trainingResult.metric} on this task, before and after
                training.
              </p>
            </div>
            <div className="flex flex-col justify-center">
              <p className={s.prose}>
                Out of the box, a 1.7-billion-parameter model never once guesses the word. After an{' '}
                {trainingResult.method}, it wins about six games in ten. Measured on{' '}
                {trainingResult.evalDescription}. 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.{' '}
                <Link className={s.link} to={routes.honesty}>
                  Why that matters
                </Link>
                .
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ── The live demo ──────────────────────────────────────────────── */}
      {Featured ? (
        <section className={`${s.shell} pb-12 sm:pb-16`}>
          <p className={s.eyebrow}>The live one</p>
          <h2 className={`${s.h2} mt-2`}>Play it, then change what counts as good.</h2>
          <p className={`${s.prose} mt-3 max-w-2xl`}>
            The demo runs the same environment the repository ships. You can play a board yourself,
            watch a recorded model play the same board, read the Python that scored it, and then
            move the reward weights and watch the ranking of two recorded runs change under you.
          </p>
          <Link
            aria-label={`Open the ${Featured.title} demo`}
            className={`${s.cardLink} mt-6 sm:p-7`}
            to={routes.demo(Featured.slug)}
          >
            <span className="flex flex-wrap items-center gap-2">
              <span className={`${s.pill} border-positive/30 bg-positive/10 text-positive`}>
                Live
              </span>
              <span className="text-xs text-muted">For the {Featured.persona}</span>
            </span>
            <span className="mt-3 text-xl font-bold tracking-tight text-fg sm:text-2xl">
              {Featured.title}
            </span>
            <span className={`${s.prose} mt-2`}>{Featured.tagline}</span>
            <span className="mt-4 flex flex-wrap items-center justify-between gap-3">
              <span className="text-sm text-muted">
                Reward: <span className="text-fg">{Featured.rewardLine}</span>
              </span>
              <span className="inline-flex items-center gap-1.5 text-sm font-semibold text-accent-fg">
                Open the demo
                <ArrowRight
                  aria-hidden="true"
                  className="size-4 transition-transform duration-2 ease-enter group-hover:translate-x-0.5"
                />
              </span>
            </span>
          </Link>
          <div className="mt-4 grid gap-3 sm:grid-cols-2">
            <div>
              <p className="text-xs font-semibold uppercase tracking-wider text-muted">
                Or skip the browser
              </p>
              <pre className={`${s.codeBlock} mt-2`}>
                <code>
                  {reproduce.clone}
                  {'\n'}
                  {reproduce.install}
                  {'\n'}
                  {reproduce.evaluate}
                </code>
              </pre>
            </div>
            <p className={`${s.prose} self-end text-sm`}>
              Three commands and you have the environment on your own machine, scoring your own
              model. Nothing on this page needs our servers to be up.
            </p>
          </div>
        </section>
      ) : null}

      {/* ── The lineup ─────────────────────────────────────────────────── */}
      <section className={`${s.shell} pb-16 sm:pb-24`}>
        <div className="flex flex-wrap items-end justify-between gap-3">
          <div>
            <p className={s.eyebrow}>The lineup</p>
            <h2 className={`${s.h2} mt-2`}>Twelve of these, ranked.</h2>
          </div>
          <span className={s.proposalPill}>{PROPOSAL_NOTICE}</span>
        </div>
        <p className={`${s.prose} mt-3 max-w-2xl`}>
          Each one is a task an environment could run, a reward in a number your board already
          reads, and the counterweight that stops that reward being farmed the crude way. They are
          our proposals. Nobody’s roadmap, nobody’s customer list.
        </p>

        <ul className="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {lineup.map((v) => {
            const Icon = iconFor(v.icon);
            return (
              <li key={v.slug}>
                <Link
                  aria-label={v.title}
                  className={`${s.cardLink} h-full`}
                  to={routes.vertical(v.slug)}
                >
                  <span className="flex items-start justify-between gap-3">
                    <Icon aria-hidden="true" className="size-5 shrink-0 text-brand" />
                    <span className="nums text-xs font-semibold text-muted">
                      {String(v.rank).padStart(2, '0')}
                    </span>
                  </span>
                  <span className={`${s.h3} mt-3`}>{v.title}</span>
                  <span className={`${s.prose} mt-1.5 text-sm`}>{v.reward}</span>
                  {!v.plannedForV1 ? (
                    <span className="mt-3 text-xs text-muted">Not in the first set</span>
                  ) : null}
                </Link>
              </li>
            );
          })}
        </ul>

        <div className="mt-8 flex flex-col gap-3 sm:flex-row">
          <Link className={s.btnSecondary} to={routes.gallery}>
            See what is built
          </Link>
          <Link className={s.btnSecondary} to={routes.honesty}>
            Read the honesty page first
          </Link>
        </div>
      </section>
    </main>
  );
}
