import type { Metadata } from "next";

import Link from "next/link";

export const metadata: Metadata = {

  title: "Docket - The public record of the U.S. government",

  description:

    "Docket is a neutral, sourced record of official federal government activity: bills, votes, spending, and more. Every fact links to its official .gov source.",

};

export const revalidate = 3600;

const SECTIONS = [

  {

    href: "/bills",

    kicker: "Legislation",

    title: "Bills",

    desc: "Laws and legislation in progress. Status, sponsor, what changed between versions, and the official record.",

  },

  {

    href: "/votes",

    kicker: "Roll Calls",

    title: "Votes",

    desc: "House and Senate roll-call votes. See how every member voted, by name.",

  },

  {

    href: "/laws",

    kicker: "Enacted",

    title: "Laws",

    desc: "Bills that have become law. Each Public Law links to the bill it came from and the official record.",

  },

  {

    href: "/members",

    kicker: "Congress",

    title: "Representatives",

    desc: "Every member of Congress. Party, state, vote record, and bills sponsored.",

  },

  {

    href: "/spending",

    kicker: "Fiscal",

    title: "Spending",

    desc: "Federal awards and contracts from USAspending.gov. Where the dollars go.",

  },

  {

    href: "/states",

    kicker: "Regional",

    title: "States",

    desc: "Bills, members, and federal activity organized by your state.",

  },

  {

    href: "/register",

    kicker: "Live Feed",

    title: "What's happening",

    desc: "A chronological feed of government actions: bills passed, votes taken, dollars awarded. No editorial weighting.",

  },

] as const;

const MORE_LINKS = [

  { href: "/calendar", label: "Calendar" },

  { href: "/schedule", label: "Schedule" },

  { href: "/executive", label: "Executive orders" },

  { href: "/categories", label: "Browse by topic" },

  { href: "/search", label: "Search everything" },

] as const;

export default function HomePage() {

  return (

    <div

      style={{

        background: "var(--dk-hero-glow)",

      }}

    >

      {}

      <section

        aria-label="Introduction"

        style={{

          maxWidth: "860px",

          margin: "0 auto",

          padding: "clamp(56px, 10vw, 120px) 24px clamp(48px, 8vw, 96px)",

        }}

      >

        {}

        <p

          className="label"

          style={{

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

            marginBottom: "28px",

            display: "flex",

            alignItems: "center",

            gap: "10px",

          }}

        >

          <span

            aria-hidden="true"

            style={{

              width: "6px",

              height: "6px",

              borderRadius: "50%",

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

              boxShadow: "0 0 0 3px rgba(224,165,59,0.18)",

              display: "inline-block",

              flexShrink: 0,

            }}

          />

          Docket · Federal Record

        </p>

        {}

        <h1

          className="font-display text-paper"

          style={{

            fontSize: "clamp(2.8rem, 9vw, 5.5rem)",

            fontWeight: 900,

            lineHeight: 1.0,

            letterSpacing: "-0.01em",

            wordSpacing: "0.06em",

            textTransform: "uppercase",

            maxWidth: "16ch",

            marginBottom: "32px",

          }}

        >

          The Public Record of the U.S. Government

        </h1>

        {}

        <p

          className="font-prose"

          style={{

            fontStyle: "italic",

            fontSize: "clamp(1.0625rem, 2vw, 1.25rem)",

            lineHeight: 1.55,

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

            maxWidth: "48ch",

            marginBottom: "40px",

          }}

        >

          Bills, votes, and dollars straight from official government sources.

          No spin. No opinion. Every fact links to its{" "}

          <span style={{ whiteSpace: "nowrap" }}>

            official{" "}

            <span className="font-mono not-italic" style={{ fontSize: "0.9em" }}>

              .gov

            </span>

          </span>{" "}

          source.

        </p>

        {}

        <div style={{ display: "flex", flexWrap: "wrap", gap: "12px" }}>

          <Link

            href="/search"

            className="focus-ring no-underline"

            style={{

              display: "inline-flex",

              alignItems: "center",

              gap: "9px",

              height: "48px",

              padding: "0 22px",

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

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

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

              fontSize: "12.5px",

              fontWeight: 700,

              letterSpacing: "0.1em",

              textTransform: "uppercase",

              borderRadius: "9px",

              border: "1px solid transparent",

              transition: "background 0.2s, transform 0.15s",

              boxShadow: "0 8px 22px -8px rgba(224,165,59,0.45)",

            }}

          >

            <SearchIcon />

            Search everything

          </Link>

          <Link

            href="/bills"

            className="focus-ring no-underline"

            style={{

              display: "inline-flex",

              alignItems: "center",

              height: "48px",

              padding: "0 22px",

              background: "transparent",

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

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

              fontSize: "12.5px",

              fontWeight: 400,

              letterSpacing: "0.1em",

              textTransform: "uppercase",

              borderRadius: "9px",

              border: "1px solid var(--dk-line)",

              transition: "border-color 0.2s, background 0.2s",

            }}

          >

            Browse bills

          </Link>

        </div>

      </section>

      {}

      <section

        aria-label="Browse sections"

        style={{

          maxWidth: "860px",

          margin: "0 auto",

          padding: "0 24px clamp(40px, 8vw, 80px)",

        }}

      >

        {}

        <p

          className="label"

          style={{ color: "var(--dk-ash)", marginBottom: "28px" }}

        >

          What you can do here

        </p>

        <div

          style={{

            display: "grid",

            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",

            gap: "16px",

          }}

        >

          {SECTIONS.map((s) => (

            <Link

              key={s.href}

              href={s.href}

              className="focus-ring no-underline"

              style={{

                display: "block",

                border: "1px solid var(--dk-line)",

                borderRadius: "10px",

                background: "var(--dk-surface)",

                padding: "28px 24px",

                transition: "border-color 0.2s, background 0.2s",

              }}

            >

              {}

              <p

                className="label"

                style={{ color: "var(--dk-signal)", marginBottom: "10px", fontSize: "12px", letterSpacing: "0.14em" }}

              >

                {s.kicker}

              </p>

              {}

              <p

                className="font-display text-paper"

                style={{

                  fontSize: "1.375rem",

                  fontWeight: 800,

                  letterSpacing: "-0.02em",

                  textTransform: "uppercase",

                  lineHeight: 1.05,

                  marginBottom: "12px",

                }}

              >

                {s.title}

              </p>

              {}

              <p

                className="font-prose"

                style={{

                  fontSize: "1rem",

                  lineHeight: 1.55,

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

                }}

              >

                {s.desc}

              </p>

            </Link>

          ))}

        </div>

      </section>

      {}

      <section

        aria-label="More sections"

        style={{

          maxWidth: "860px",

          margin: "0 auto",

          padding: "0 24px clamp(32px, 6vw, 56px)",

          borderTop: "1px solid var(--dk-line)",

        }}

      >

        <p

          className="label"

          style={{ color: "var(--dk-ash-2)", marginBottom: "20px", marginTop: "32px" }}

        >

          More

        </p>

        <ul

          style={{ display: "flex", flexWrap: "wrap", gap: "10px", listStyle: "none", padding: 0, margin: 0 }}

        >

          {MORE_LINKS.map((l) => (

            <li key={l.href}>

              <Link

                href={l.href}

                className="focus-ring no-underline"

                style={{

                  display: "inline-flex",

                  alignItems: "center",

                  minHeight: "44px",

                  padding: "0 16px",

                  border: "1px solid var(--dk-line)",

                  borderRadius: "8px",

                  background: "var(--dk-surface)",

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

                  fontSize: "12px",

                  letterSpacing: "0.1em",

                  textTransform: "uppercase",

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

                  transition: "border-color 0.2s, color 0.2s",

                }}

              >

                {l.label}

              </Link>

            </li>

          ))}

        </ul>

      </section>

      {}

      <section

        aria-label="How to cite this site"

        style={{

          maxWidth: "860px",

          margin: "0 auto",

          padding: "0 24px clamp(24px, 5vw, 40px)",

        }}

      >

        <div

          style={{

            border: "1px solid var(--dk-line)",

            borderRadius: "10px",

            background: "var(--dk-surface)",

            padding: "clamp(24px, 4vw, 40px)",

          }}

        >

          {}

          <p className="label" style={{ color: "var(--dk-signal)", marginBottom: "20px", fontSize: "12px", letterSpacing: "0.14em" }}>

            Citations

          </p>

          <h2

            className="font-display text-paper"

            style={{

              fontSize: "clamp(1.5rem, 3.5vw, 2rem)",

              fontWeight: 900,

              letterSpacing: "-0.02em",

              textTransform: "uppercase",

              lineHeight: 1.0,

              marginBottom: "20px",

            }}

          >

            How to cite this site

          </h2>

          <p

            className="font-prose"

            style={{

              fontSize: "1.0625rem",

              lineHeight: 1.6,

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

              maxWidth: "56ch",

            }}

          >

            On any bill, vote, or member page, scroll to the bottom and use the{" "}

            <strong style={{ color: "var(--dk-paper)" }}>Cite this record</strong>{" "}

            panel. It fills in the author, date, title, permalink, and the official

            government source automatically - in APA, MLA, or Chicago format.

          </p>

          <div

            style={{

              marginTop: "24px",

              borderTop: "1px solid var(--dk-line)",

              paddingTop: "20px",

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

              fontSize: "13px",

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

              fontStyle: "italic",

            }}

          >

            <span style={{ color: "var(--dk-ash-2)", fontStyle: "normal", fontSize: "12px", letterSpacing: "0.08em", textTransform: "uppercase" }}>Example APA · </span>

            <span style={{ fontStyle: "normal" }}>

              Docket. (2025). H.R. 22 - [Title]. usdocket.org. Retrieved from https://congress.gov/...

            </span>

          </div>

        </div>

      </section>

      {}

      <section

        aria-label="About this site"

        style={{

          maxWidth: "860px",

          margin: "0 auto",

          padding: "clamp(16px, 3vw, 24px) 24px clamp(56px, 10vw, 96px)",

        }}

      >

        <div

          style={{

            border: "1px solid var(--dk-line)",

            borderRadius: "10px",

            background: "var(--dk-surface)",

            padding: "clamp(24px, 4vw, 36px)",

          }}

        >

          <p className="label" style={{ color: "var(--dk-ash-2)", marginBottom: "16px", fontSize: "12px", letterSpacing: "0.14em" }}>

            About this site

          </p>

          <p

            className="font-prose"

            style={{

              fontSize: "1rem",

              lineHeight: 1.6,

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

              maxWidth: "62ch",

            }}

          >

            Docket is neutral by design. It does not editorialize, rank by political

            popularity, or surface opinion. The feed is ordered by action date and

            dollar magnitude only - the same factors as the official record. Party

            colors appear only in desaturated, equal-weight tones. No comment

            section. No ads. All source links open the official .gov record directly.

          </p>

          <div

            style={{

              marginTop: "20px",

              display: "flex",

              flexWrap: "wrap",

              gap: "20px",

            }}

          >

            <Link

              href="/how-we-pick"

              className="focus-ring label underline underline-offset-4"

              style={{ color: "var(--dk-signal)", fontSize: "12px", letterSpacing: "0.1em" }}

            >

              How we pick what to show

            </Link>

            <Link

              href="/who-pays"

              className="focus-ring label underline underline-offset-4"

              style={{ color: "var(--dk-signal)", fontSize: "12px", letterSpacing: "0.1em" }}

            >

              Who pays for this

            </Link>

          </div>

        </div>

      </section>

    </div>

  );

}

function SearchIcon() {

  return (

    <svg

      aria-hidden="true"

      width="16"

      height="16"

      viewBox="0 0 16 16"

      fill="none"

      stroke="currentColor"

      strokeWidth="1.75"

      strokeLinecap="round"

      strokeLinejoin="round"

      style={{ flexShrink: 0 }}

    >

      <circle cx="6.5" cy="6.5" r="4.5" />

      <line x1="10.5" y1="10.5" x2="14" y2="14" />

    </svg>

  );

}