// @ts-nocheck
export function DesignDocPage() {
  return (
    <div className="mx-auto max-w-content">
      <h1>Design Doc</h1>
      <p style={{ color: "var(--fg-dim)", maxWidth: 720 }}>
        The original OOXML design document is preserved as a downloadable documentation asset.
      </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>EVE-like Multiplayer Prototype Design Doc</h3>
        <p style={{ color: "var(--fg-dim)" }}>
          This file remains available for archival reference while the Vite app hosts the
          navigable documentation pages, interactive demos, and HUD style reference.
        </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="/assets/mpg7uppn-eve_like_multiplayer_prototype_design_doc.docx"
          download
        >
          Download .docx
        </a>
      </div>
    </div>
  );
}
