import { createFileRoute } from "@tanstack/react-router";
import { ChapterNext } from "@/components/chapter-next";
import { OutlineLink } from "@/components/outline-button";
import { StatsRow } from "@/components/stats-row";
import { arms, buyers } from "@/lib/content";

export const Route = createFileRoute("/arms")({ component: Arms });

function Arms() {
  return (
    <article>
      <section className="relative flex min-h-dvh items-end overflow-hidden">
        <img
          src="/images/page-ops.jpg"
          alt=""
          className="kenburns absolute inset-0 h-full w-full object-cover"
          fetchPriority="high"
        />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 max-w-3xl px-6 pb-28 pt-32 sm:px-12 lg:px-20 lg:pb-36">
          <p className="font-display text-kicker uppercase tracking-wide">Arms</p>
          <h1 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
            Foundation owns the mission. Companies donate up.
          </h1>
          <p className="mt-5 max-w-xl text-body text-fg/90">
            Operating arms stay private so an index cannot board the house. They
            earn, then donate up. Public-good chapters — Backup, Mind, University —
            are what federal and lab partners actually buy.
          </p>
        </div>
      </section>
      <StatsRow
        id="overview"
        stats={[
          { value: "7", label: "Arms" },
          { value: "1", label: "Charter" },
          { value: "DONATE UP", label: "Companies" },
          { value: "PUBLIC GOOD", label: "Grants" },
        ]}
      />
      <section className="bg-bg px-6 py-20 sm:px-12 lg:px-20">
        <div className="grid gap-px bg-line sm:grid-cols-2">
          {arms.map((arm) => (
            <a
              key={arm.name}
              href={arm.href}
              className="bg-bg px-6 py-10 transition-colors duration-[var(--motion-fast)] hover:bg-fg/5"
            >
              <p className="font-display text-xs uppercase tracking-wide text-muted">
                {arm.kicker}
              </p>
              <h2 className="mt-2 font-display text-3xl font-semibold uppercase">
                {arm.name}
              </h2>
              <p className="mt-4 max-w-md text-sm text-muted">{arm.body}</p>
            </a>
          ))}
        </div>
      </section>
      <section className="relative min-h-[70dvh]">
        <img src="/images/page-filament.jpg" alt="" className="absolute inset-0 h-full w-full object-cover" />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 flex min-h-[70dvh] items-end px-6 py-16 sm:px-12 lg:px-20">
          <div className="max-w-xl">
            <p className="font-display text-kicker uppercase tracking-wide">
              Living systems
            </p>
            <h2 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
              Hive, mycelium, loop. Licensed. No garage pathogens.
            </h2>
            <p className="mt-5 text-body text-fg/90">
              Distributed life as an analog for distributed machines. Closed-loop
              habitat literacy for sea, ice, and space. Partners hold the licenses.
              The house does not run virus work.
            </p>
          </div>
        </div>
      </section>
      <section 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 is for
        </p>
        <div className="mt-10 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>
        <div className="mt-12 flex flex-wrap gap-3">
          <OutlineLink to="/build">Build</OutlineLink>
          <OutlineLink to="/grants">Grant doors</OutlineLink>
          <OutlineLink to="/contact">Inquire</OutlineLink>
        </div>
      </section>
      <ChapterNext current="/build" />
    </article>
  );
}