import type { Metadata } from "next";

import Link from "next/link";

import { Card, PageHeader, SectionHeader } from "@/components/ui";

export const metadata: Metadata = {

  title: "How we pick",

  description:

    "The ranking algorithm and neutrality rules behind every item in the Docket register.",

};

export default function HowWePickPage() {

  return (

    <div

      className="mx-auto w-full max-w-[860px] px-6 sm:px-8"

      style={{

        paddingTop: "clamp(32px, 6vw, 56px)",

        paddingBottom: "clamp(48px, 8vw, 80px)",

      }}

    >

      <Link

        href="/"

        className="focus-ring tap no-underline hover:underline"

        style={{

          display: "inline-flex",

          alignItems: "center",

          gap: "8px",

          fontFamily: "var(--font-mono), ui-monospace, monospace",

          fontSize: "13px",

          letterSpacing: "0.08em",

          color: "var(--dk-signal)",

          marginBottom: "32px",

        }}

      >

        ← Home

      </Link>

      <PageHeader

        eyebrow="Trust · methodology"

        title="How we pick what to show"

        lead="Ranking is a function of official-action data only. No engagement, no coverage counts, no editorial pinning. The function is public."

      />

      {}

      <div className="mt-10">

        <SectionHeader

          eyebrow="Ranking"

          title="The four inputs"

          description="The score takes only these fields. A unit test asserts no other field is referenced."

        />

        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">

          <InputCard

            name="actionDate"

            desc="Date of the official legislative or spending action"

          />

          <InputCard

            name="dollarAmount"

            desc="Dollar magnitude of the action, where one exists"

          />

          <InputCard

            name="affectedEstimate"

            desc="People affected, per a CBO or agency estimate"

          />

          <InputCard

            name="actionType"

            desc="Introduced, reported, voted, signed, awarded, outlaid"

          />

        </div>

        <Card className="mt-4 p-5">

          <p className="label mb-2">Forbidden inputs</p>

          <ul className="grid gap-1.5 font-mono text-[12px] text-ash sm:grid-cols-2">

            <li>· news mention counts</li>

            <li>· social shares / engagement</li>

            <li>· click or view rates</li>

            <li>· “trending” signals</li>

            <li>· editorial pins</li>

            <li>· party or partisan valence</li>

          </ul>

        </Card>

      </div>

      {}

      <div className="mt-12">

        <SectionHeader

          eyebrow="Neutrality"

          title="The five rules"

          description="Encoded in the codebase as lint rules and tests, not just a style guide."

        />

        <ol className="space-y-3">

          {RULES.map((r, i) => (

            <li key={i}>

              <Card className="p-5">

                <div className="flex items-start gap-4">

                  <span

                    className="display mt-0.5 text-xl"

                    style={{ color: "var(--dk-ash)" }}

                    aria-hidden="true"

                  >

                    {String(i + 1).padStart(2, "0")}

                  </span>

                  <div>

                    <p className="font-mono text-[13px] text-paper">{r.title}</p>

                    <p className="prose-lead mt-1 text-ash">{r.body}</p>

                  </div>

                </div>

              </Card>

            </li>

          ))}

        </ol>

      </div>

      {}

      <div className="mt-12">

        <SectionHeader

          eyebrow="Visualization"

          title="How votes and parties are drawn"

        />

        <Card className="p-5">

          <ul className="space-y-2 font-mono text-[12px] text-ash">

            <li>· Party affiliation and vote splits are factual data and may be shown.</li>

            <li>· Tones are desaturated and of equal weight -no saturated red vs blue.</li>

            <li>· Default sort of member or vote lists is by vote, then alphabetical -not grouped by party.</li>

            <li>· Charts use a neutral yea / nay encoding where the question is not party.</li>

          </ul>

        </Card>

      </div>

    </div>

  );

}

function InputCard({ name, desc }: { name: string; desc: string }) {

  return (

    <Card className="p-4">

      <p className="font-mono text-[13px] text-paper">{name}</p>

      <p className="label mt-2 text-ash-2">{desc}</p>

    </Card>

  );

}

const RULES = [

  {

    title: "Government-source-only",

    body: "Every displayed fact carries a sourceUrl pointing to an allowlisted government domain. No card renders without a visible Source link.",

  },

  {

    title: "No adjectives",

    body: "Generated and display text contains no qualitative modifiers. Numbers, status, dates, and names only. A banned-words lint fails the build.",

  },

  {

    title: "Surface by official action",

    body: "Feed ranking references only action date, dollar magnitude, people affected, and action type. No engagement, coverage, or social inputs.",

  },

  {

    title: "No comment sections",

    body: "No free-text comments, reactions, ratings, or shares on bills, votes, or spending. Permitted engagement is a clarity vote on a summary, not on a bill's merit.",

  },

  {

    title: "Extraction templates for summaries",

    body: "Prose summaries, when they land, are field extraction into a fixed template -not open-ended generation. Each passes the banned-words lint and a polarization check.",

  },

];