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

const PATH = "/tools/markdown-to-html";

export const metadata: Metadata = buildMetadata({
  title: "Markdown to HTML — Convert Markdown to Clean, Safe HTML",
  description:
    "Convert Markdown to HTML in your browser. Supports GitHub Flavored Markdown, syntax highlighting, sanitized output, and one-click download as a standalone HTML file.",
  path: PATH,
  keywords: [
    "markdown to html",
    "markdown html converter",
    "convert markdown to html",
    "markdown to html online",
    "md to html",
  ],
});

export default function Page() {
  return (
    <ToolLanding
      eyebrow="Markdown to HTML"
      title="Convert Markdown to clean, semantic HTML"
      description="Paste Markdown and download a sanitized, standards-compliant HTML file. Supports GitHub Flavored Markdown, code highlighting, and works entirely in your browser."
      path={PATH}
      bullets={[
        "Sanitized HTML output — safe to paste into any CMS",
        "Highlight.js-powered code blocks for 150+ languages",
        "Standalone HTML download with embedded styles",
        "No upload — your Markdown never leaves your browser",
      ]}
      sample={`## Output preview\n\nThis is **Markdown** converted to *HTML*.\n\n- Headings → <h1>…<h6>\n- **Bold** → <strong>\n- _Italic_ → <em>\n- \`Code\` → <code>\n\n\`\`\`html\n<p>Hello <strong>world</strong>!</p>\n\`\`\`\n`}
      body={`## How to convert Markdown to HTML

1. Open the [editor](/editor) and paste your Markdown.
2. Click **Export → Export HTML** in the toolbar.
3. A self-contained HTML file downloads with embedded styles — ready to paste into any site or CMS.

## What gets converted

| Markdown                | HTML element              |
| ----------------------- | ------------------------- |
| \`# Heading\`             | \`<h1>…</h1>\`              |
| \`**bold**\`              | \`<strong>…</strong>\`      |
| \`_italic_\`              | \`<em>…</em>\`              |
| \`[text](url)\`           | \`<a href="url">text</a>\`  |
| \`![alt](url)\`           | \`<img src="url" alt="…">\` |
| \`> quote\`               | \`<blockquote>…</blockquote>\` |
| \`- bullet\`              | \`<ul><li>…</li></ul>\`     |
| \`\\\`\\\`\\\` lang \\\`\\\`\\\` \`         | \`<pre><code class="language-lang">…\` |

## Safe by default

We sanitize the rendered HTML using \`rehype-sanitize\` with a careful allowlist of attributes — no inline event handlers, no \`javascript:\` URLs, no surprises. The HTML you download is safe to embed in your own pages or to ship as a static file.

## Need to do it programmatically?

If you're a developer who needs to do this in code, the pipeline that powers this tool is:

\`\`\`ts
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkRehype from "remark-rehype";
import rehypeSanitize from "rehype-sanitize";
import rehypeHighlight from "rehype-highlight";
import rehypeStringify from "rehype-stringify";

const html = String(
  await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypeSanitize)
    .use(rehypeHighlight)
    .use(rehypeStringify)
    .process(markdown)
);
\`\`\`
`}
      faq={[
        {
          question: "Is the converted HTML safe?",
          answer:
            "Yes. The output is sanitized with rehype-sanitize using an allowlist. Inline event handlers and javascript: URLs are stripped.",
        },
        {
          question: "Do you upload my Markdown to a server?",
          answer:
            "No. The conversion happens entirely in your browser, so your content never leaves your device.",
        },
        {
          question: "Does the downloaded HTML include styles?",
          answer:
            "Yes. The HTML file embeds a minimal stylesheet so it renders nicely when opened directly or pasted into a CMS.",
        },
        {
          question: "Can I convert GFM tables and task lists?",
          answer:
            "Yes. Tables, task lists, strikethrough, autolinks, and footnotes are all supported via the GitHub Flavored Markdown extension.",
        },
      ]}
    />
  );
}