import { createFileRoute } from "@tanstack/react-router";
import { ChapterNext } from "@/components/chapter-next";
import { GrantLetter } from "@/components/grant-letter";
import { OutlineLink } from "@/components/outline-button";
import { buyers, grants, patreonUrl, taglines } from "@/lib/content";

export const Route = createFileRoute("/grants")({ component: Grants });

function Grants() {
  return (
    <article>
      <section className="relative flex min-h-[80dvh] items-end overflow-hidden">
        <img
          src="/images/page-habitat.jpg"
          alt=""
          className="kenburns absolute inset-0 h-full w-full object-cover"
        />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 max-w-3xl px-6 pb-20 pt-32 sm:px-12 lg:px-20">
          <p className="font-display text-kicker uppercase tracking-wide">
            07  ·  Grants
          </p>
          <h1 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
            Fund the window. Restore craft. Train builders.
          </h1>
          <p className="mt-5 max-w-xl text-body text-fg/90">{taglines.federal}</p>
        </div>
      </section>

      <section id="overview" className="bg-bg px-6 py-20 sm:px-12 lg:px-20">
        <p className="font-display text-kicker uppercase tracking-wide text-muted">
          Who this letter is for
        </p>
        <h2 className="mt-2 max-w-3xl font-display text-hero font-semibold uppercase">
          Federal science. Labs. Astronomers. Physicists. Index capital.
        </h2>
        <p className="mt-5 max-w-2xl text-sm leading-body text-muted">
          Consciousness is a flicker. One planet is one candle. Luxury that
          trains no builder is waste. We are asking for a single pilot to teach
          the clock, restore craft, train world builders, harvest energy
          literacy, cool thinking machines in harsh rooms, and keep humans as
          authors of ends. BlackRock, Vanguard, and State Street already buy
          power, chips, and cooling. Astronomers already know the map. We teach
          that map. We do not sell a cruise ticket to Proxima.
        </p>
        <div className="mt-12 grid gap-10 lg:grid-cols-2">
          {buyers.map((a) => (
            <div key={a.name} className="border-t border-line pt-6">
              <p className="font-display text-xs uppercase tracking-wide text-muted">
                {a.kicker}
              </p>
              <h3 className="mt-2 font-display text-xl font-semibold uppercase">
                {a.name}
              </h3>
              <p className="mt-3 text-sm leading-body text-muted">{a.body}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="bg-bg px-6 pb-20 sm:px-12 lg:px-20">
        <p className="font-display text-sm uppercase tracking-wide text-muted">
          Legitimate doors · one pilot, not five frontiers
        </p>
        <div className="mt-8 overflow-x-auto">
          <table className="w-full min-w-[720px] border-y border-line text-left">
            <thead>
              <tr className="border-b border-line">
                <th className="py-4 pr-6 font-display text-xs font-medium uppercase tracking-wide text-muted">
                  Door
                </th>
                <th className="py-4 pr-6 font-display text-xs font-medium uppercase tracking-wide text-muted">
                  Program
                </th>
                <th className="py-4 font-display text-xs font-medium uppercase tracking-wide text-muted">
                  What we deliver
                </th>
              </tr>
            </thead>
            <tbody>
              {grants.map((row) => (
                <tr key={row.program} className="border-b border-line align-top">
                  <td className="py-5 pr-6 font-display text-sm uppercase tracking-wide">
                    {row.door}
                  </td>
                  <td className="py-5 pr-6 font-display text-sm font-semibold uppercase tracking-wide">
                    {row.program}
                  </td>
                  <td className="py-5 text-sm text-muted">{row.deliver}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="mt-8 max-w-2xl text-sm text-muted">
          Defense, health, energy, space, and general science still dominate
          federal R&D. Applied AI, embodied AI, biomanufacturing, and human
          space habitation are named in current priority language. We will not
          ask those doors to fund a city charter, a weapons catalog, a child
          combat league, or a genetic door. Sequence: EIN + 501(c)(3)
          determination letter first.
        </p>
        <div className="mt-10 flex flex-wrap gap-3">
          <OutlineLink to="/contact">Grant inquiry</OutlineLink>
          <OutlineLink to={patreonUrl}>Donate</OutlineLink>
        </div>
      </section>

      <section className="bg-bg px-6 pb-8 sm:px-12 lg:px-20">
        <p className="font-display text-kicker uppercase tracking-wide text-muted">
          Inquiry letter
        </p>
        <h2 className="mt-2 font-display text-hero font-semibold uppercase">
          One letter. The federal one-liner.
        </h2>
        <p className="mt-4 max-w-xl text-sm text-muted">
          Choose a door. Copy a letter that matches this charter. Do not lead
          with a fortune. Do not pretend the candle is already a sun.
        </p>
        <div className="mt-10">
          <GrantLetter />
        </div>
      </section>

      <ChapterNext current="/grants" />
    </article>
  );
}