import type { Metadata } from "next";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { buildMetadata } from "@/lib/seo";
import { siteConfig } from "@/lib/constants";

export const metadata: Metadata = buildMetadata({
  title: "About Markdown Viewer",
  description:
    "Learn about Markdown Viewer — a fast, privacy-friendly online Markdown editor built with Next.js, Tailwind CSS, and shadcn/ui.",
  path: "/about",
});

export default function AboutPage() {
  return (
    <div className="container max-w-3xl py-12 sm:py-16">
      <header className="mb-8">
        <p className="text-sm font-medium uppercase tracking-wider text-primary">About</p>
        <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          Built for the way you actually write Markdown
        </h1>
      </header>

      <div className="prose prose-slate max-w-none dark:prose-invert">
        <p>
          <strong>{siteConfig.name}</strong> is a free, open source Markdown editor with a live
          preview. It started as a way to share Markdown with collaborators without forcing them to
          install yet another desktop app — and grew into a full set of writer-friendly tools.
        </p>
        <h2>Principles</h2>
        <ul>
          <li>
            <strong>Fast.</strong> The home page ships under 80&nbsp;KB of JavaScript. The editor
            lazy-loads only what it needs.
          </li>
          <li>
            <strong>Private.</strong> Drafts live in your browser. We don't run analytics on your
            content, we don't sell ads, and there's nothing to log into.
          </li>
          <li>
            <strong>Open.</strong> The codebase is MIT licensed. Fork it, embed it, or use it as a
            reference for your own Next.js app.
          </li>
          <li>
            <strong>Accessible.</strong> Keyboard-first workflow, semantic HTML, color contrast that
            passes WCAG AA in both themes.
          </li>
        </ul>
        <h2>Tech stack</h2>
        <ul>
          <li>Next.js (App Router) with TypeScript</li>
          <li>Tailwind CSS and shadcn/ui</li>
          <li>react-markdown, remark-gfm, rehype-highlight, rehype-sanitize</li>
          <li>framer-motion for tasteful animations</li>
        </ul>
        <h2>Get involved</h2>
        <p>
          Found a bug, want a feature, or have a suggestion? Open an issue or pull request on{" "}
          <a href={siteConfig.social.github} target="_blank" rel="noopener noreferrer">
            GitHub
          </a>
          . We're a small team — community feedback shapes the roadmap.
        </p>
      </div>

      <div className="mt-10">
        <Button asChild>
          <Link href="/editor">Open the editor</Link>
        </Button>
      </div>
    </div>
  );
}