const artifacts = [
  {
    number: "004",
    href: "/artifacts/thoughtstore-and-jazz",
    title: "The Promise and the Engine",
    kind: "ARCHITECTURE",
    description:
      "A concrete explanation of why ThoughtStore owns persistence semantics while Jazz remains the first engine that fulfills them.",
    status: "DECISION",
  },
  {
    number: "003",
    href: "/artifacts/what-fits-in-a-lora",
    title: "What Fits in a LoRA?",
    kind: "EXPERIMENT",
    description:
      "A testable hypothesis about content topology: why repeated examples of one rule may be easier to absorb than fewer unrelated corrections.",
    status: "PROPOSED",
  },
  {
    number: "002",
    href: "/artifacts/lora-without-regret",
    title: "LoRA Without Regret",
    kind: "FIELD GUIDE",
    description:
      "A working model of low-rank adaptation: capacity, placement, optimization dynamics, and the boundary where FullFT pulls away.",
    status: "ACTIVE",
  },
  {
    number: "001",
    href: "/artifacts/tinker",
    title: "Tinker",
    kind: "FIELD GUIDE",
    description:
      "A working model of post-training, from token-weighted examples to reinforcement learning over agent trajectories.",
    status: "ACTIVE",
  },
];

export function Artifacts() {
  return (
    <main class="artifacts-page">
      <nav class="artifact-topline" aria-label="Artifacts navigation">
        <a href="/" class="artifact-home">CAMERON.STREAM</a>
        <span>UNLISTED INDEX / 2026</span>
      </nav>

      <header class="artifacts-header">
        <p class="artifact-kicker">WORKING OBJECTS</p>
        <h1>ARTIFACTS</h1>
        <p>
          Things built to think with. Notes become instruments here: small,
          specific, and usable before they are finished.
        </p>
      </header>

      <section class="artifact-index" aria-label="Artifact index">
        {artifacts.map((artifact) => (
          <a class="artifact-row" href={artifact.href}>
            <span class="artifact-number">{artifact.number}</span>
            <span class="artifact-row-body">
              <span class="artifact-row-meta">
                {artifact.kind} / {artifact.status}
              </span>
              <strong>{artifact.title}</strong>
              <span>{artifact.description}</span>
            </span>
            <span class="artifact-arrow" aria-hidden="true">↘</span>
          </a>
        ))}
      </section>

      <footer class="artifact-index-footer">
        <span>UNLISTED</span>
        <span>NO INDEXING</span>
        <span>MORE AS THEY BECOME USEFUL</span>
      </footer>
    </main>
  );
}