// @ts-nocheck
export function GapAnalysisPage() {
  return (
    <div className="mx-auto max-w-content">
      <h1>Gap Analysis</h1>
      <p style={{ color: "var(--fg-dim)", maxWidth: 720 }}>
        The repository includes the current gap analysis as a markdown source document.
        It is available here as part of the documentation set.
      </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 file to review the latest cross-reference of design docs,
          interactive demos, roadmap readiness, and unresolved implementation gaps.
        </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/gap-analysis.md" target="_blank" rel="noreferrer">
          Open gap-analysis.md
        </a>
      </div>
    </div>
  );
}
