import type { Metadata } from "next";
import { ToolLanding } from "@/components/marketing/tool-landing";
import { buildMetadata } from "@/lib/seo";

const PATH = "/tools/markdown-previewer";

export const metadata: Metadata = buildMetadata({
  title: "Markdown Previewer — Live Preview for Any Markdown",
  description:
    "Paste Markdown and see it rendered instantly. Supports GitHub Flavored Markdown, syntax highlighting, and exports a clean HTML or PDF copy.",
  path: PATH,
  keywords: [
    "markdown previewer",
    "markdown preview",
    "online markdown preview",
    "live markdown preview",
    "markdown live preview",
  ],
});

export default function Page() {
  return (
    <ToolLanding
      eyebrow="Markdown Previewer"
      title="Paste Markdown. See the rendered result instantly."
      description="A live Markdown previewer that supports GitHub Flavored Markdown, syntax highlighting, tables, and task lists. Drop in a .md file or paste your text — we render it on the spot."
      path={PATH}
      bullets={[
        "GitHub Flavored Markdown preview that matches GitHub's render",
        "Syntax highlighting for 150+ languages",
        "Drag and drop .md files to preview them instantly",
        "Export the clean HTML or print to PDF",
      ]}
      sample={`## README preview\n\n> A live previewer is the fastest way to QA your Markdown.\n\n| Feature      | Status |\n| ------------ | :----: |\n| Tables       |   ✅   |\n| Task lists   |   ✅   |\n| Highlighting |   ✅   |\n\n- [x] Drop the file\n- [x] Preview it\n- [ ] Ship it\n`}
      body={`## What does a Markdown previewer do?

A Markdown previewer takes plain text written in Markdown and renders it as HTML so you can verify the formatting before publishing. Markdown Viewer's previewer mirrors **GitHub Flavored Markdown** so what you see in the preview matches how the document will appear on GitHub, GitLab, and most documentation sites.

## Two ways to use the previewer

1. **Paste**: copy any Markdown text and paste it into the editor.
2. **Drop**: drag a \`.md\` or \`.markdown\` file from your file manager directly onto the editor.

Either way, the preview renders instantly in the right pane. Toggle between **Editor**, **Split**, or **Preview** view from the top bar.

## What the previewer renders

- Headings, paragraphs, blockquotes
- Ordered, unordered, and task lists
- Fenced code blocks with language-aware highlighting
- Tables with alignment
- Inline images and external links
- Footnotes, strikethrough, and autolinks

## Sanitization and safety

Markdown Viewer sanitizes raw HTML inside Markdown using \`rehype-sanitize\` with a curated allowlist, so opening a third-party document is safe by default.
`}
      faq={[
        {
          question: "How accurate is the Markdown preview?",
          answer:
            "We use react-markdown with the same GitHub Flavored Markdown plugins (remark-gfm) and a curated rehype pipeline, so the rendered output closely matches GitHub.",
        },
        {
          question: "Can I preview a .md file from my computer?",
          answer:
            "Yes. Drag the file onto the editor, or use the toolbar's Import action to load it as a new draft.",
        },
        {
          question: "Does the previewer support code highlighting?",
          answer:
            "Yes — code blocks are highlighted by highlight.js via rehype-highlight. Add a language hint after the opening fence (e.g. ```ts).",
        },
        {
          question: "Can I share a preview link?",
          answer:
            "Yes. Click Share in the editor toolbar to copy a self-contained URL that opens the same document on any device.",
        },
      ]}
    />
  );
}