import type { Metadata } from "next";
import Link from "next/link";

import { MarkdownPreview } from "@/components/editor/markdown-preview";
import { Button } from "@/components/ui/button";
import { breadcrumbLd, buildMetadata } from "@/lib/seo";

export const metadata: Metadata = buildMetadata({
  title: "Markdown Guide — Syntax & GitHub Flavored Markdown",
  description:
    "A practical Markdown syntax guide covering headings, lists, links, images, code, tables, task lists, and GitHub Flavored Markdown extensions.",
  path: "/guide",
  keywords: [
    "markdown guide",
    "markdown syntax",
    "github flavored markdown",
    "markdown cheat sheet",
    "markdown tutorial",
  ],
});

const GUIDE = `# Markdown guide

Markdown is a lightweight markup language for formatting plain text. This guide is the only page you'll need to bookmark — it covers core syntax, GitHub Flavored Markdown, and the extras our editor adds on top (math, diagrams, emoji shortcodes).

## Headings

\`\`\`md
# H1
## H2
### H3
\`\`\`

## Emphasis

\`\`\`md
**bold** _italic_ ~~strikethrough~~ \`inline code\`
\`\`\`

## Lists

\`\`\`md
- Bullet
- Bullet

1. First
2. Second

- [x] Done
- [ ] To do
\`\`\`

## Links and images

\`\`\`md
[Markdown Viewer](https://trymarkdownviewer.com)
![Alt](https://example.com/img.png)
\`\`\`

## Code blocks (with syntax highlighting)

\`\`\`md
\\\`\\\`\\\`ts
const greet = (name: string) => \`Hello, \${name}!\`;
\\\`\\\`\\\`
\`\`\`

## Tables (GFM)

\`\`\`md
| Feature      | Status |
| ------------ | :----: |
| Live preview |   ✅   |
\`\`\`

## Math (KaTeX)

Inline math uses single \`$\`; block math uses double \`$$\`.

\`\`\`md
Inline: $a^2 + b^2 = c^2$

Block:

$$
\\int_{-\\infty}^{\\infty} e^{-x^2}\\,dx = \\sqrt{\\pi}
$$
\`\`\`

KaTeX styles load lazily — only the first time math is detected in a document.

## Diagrams (Mermaid)

Mermaid renders flowcharts, sequence diagrams, class diagrams, and more from a fenced code block:

\`\`\`md
\\\`\\\`\\\`mermaid
flowchart LR
  Idea --> Draft --> Review --> Publish
\\\`\\\`\\\`
\`\`\`

The Mermaid runtime is fetched on demand — documents without diagrams pay zero overhead.

## Emoji shortcodes

\`\`\`md
:smile: :rocket: :tada: :heart: :100: :coffee:
\`\`\`

Supports the ~250 most common shortcodes — see the [Markdown cheat sheet](/blog/markdown-cheat-sheet) for the full list.

## Footnotes

\`\`\`md
Text with a footnote.[^1]

[^1]: Footnote body — rendered at the bottom of the document.
\`\`\`

## Blockquotes

\`\`\`md
> A blockquote.
\`\`\`

## Horizontal rule

\`\`\`md
---
\`\`\`

## GFM extensions at a glance

- **Task lists** — \`- [ ] item\` / \`- [x] item\`
- **Autolinks** — bare URLs become clickable
- **Footnotes** — \`text[^1]\` and \`[^1]: explanation\`
- **Strikethrough** — \`~~text~~\`
- **Tables** — pipe-and-dash with alignment

## Editor power features

These aren't Markdown syntax — they're things you can do inside the [Markdown Viewer editor](/editor):

- **Find & replace** with regex — \`Ctrl/⌘ + F\`
- **Beautify** to normalize whitespace and lists — \`Ctrl/⌘ + Shift + F\`
- **Focus mode** hides every UI chrome — \`Ctrl/⌘ + .\`
- **Outline** sidebar to jump between headings
- **Auto-generated TOC** insertion
- **Readability stats** — Flesch score, sentence length, top words
- **Smart paste** — rich HTML on the clipboard auto-converts to Markdown
- **One-click export** to PDF, HTML, or \`.md\` (PDF downloads directly, no print dialog)

## Common gotchas

- Leave a blank line before a list, table, or fenced code block.
- Use two trailing spaces or a blank line to create a line break inside a paragraph.
- Pipes (\`|\`) inside table cells need to be escaped as \`\\|\`.
- Most renderers sanitize raw HTML for security — we do too.

## Need a converter or other tool?

Browse the full [tools index](/tools) — HTML to Markdown, Markdown to PDF, a visual table generator, and more.

## Practice it

Open the [editor](/editor) and paste any snippet above to see it rendered live.
`;

export default function GuidePage() {
  return (
    <div className="container max-w-3xl py-12 sm:py-16">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: breadcrumbLd([
            { name: "Home", url: "/" },
            { name: "Markdown Guide", url: "/guide" },
          ]),
        }}
      />
      <header className="mb-8">
        <p className="text-sm font-medium uppercase tracking-wider text-primary">Guide</p>
        <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          The Markdown syntax guide
        </h1>
        <p className="mt-3 text-muted-foreground">
          A printable cheat sheet covering everything from headings to GitHub Flavored Markdown.
        </p>
        <div className="mt-4 flex gap-2">
          <Button asChild>
            <Link href="/editor">Try it in the editor</Link>
          </Button>
          <Button asChild variant="outline">
            <Link href="/blog/markdown-cheat-sheet">Open the cheat sheet</Link>
          </Button>
        </div>
      </header>

      <MarkdownPreview source={GUIDE} />
    </div>
  );
}