// @ts-nocheck
export function VerticalSliceEvaluationPage() {
  return (
    <div className="mx-auto max-w-content">
      <h1>Vertical Slice Evaluation</h1>
      <p style={{ color: "var(--fg-dim)", maxWidth: 720 }}>
        Current assessment of how the standalone game app lines up against the
        MVP Loop Slice demo and core single-player roadmap, including implementation gaps
        and the recommended next work.
      </p>
      <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4 border-l-[3px] border-l-accent" style={{ marginTop: "var(--sp-5)" }}>
        <h3>Source Document</h3>
        <p style={{ color: "var(--fg-dim)" }}>
          Open the markdown evaluation for the full matrix, gap breakdown,
          phase readiness notes, and priority work list.
        </p>
        <a className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-border bg-surface-raised px-4 py-2 font-body text-[0.8rem] font-medium text-fg transition-all duration-150 hover:border-border-light hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-55 border-accent bg-accent font-semibold text-bg hover:bg-accent-hover" href="/docs/vertical-slice-evaluation.md" target="_blank" rel="noreferrer">
          Open vertical-slice-evaluation.md
        </a>
      </div>
    </div>
  );
}
