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

import { HtmlToMarkdownConverter } from "@/components/tools/html-to-markdown-converter";
import { Button } from "@/components/ui/button";
import { breadcrumbLd, buildMetadata, faqLd } from "@/lib/seo";
import { MarkdownPreview } from "@/components/editor/markdown-preview";

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

export const metadata: Metadata = buildMetadata({
  title: "HTML to Markdown Converter — Free, Online, Instant",
  description:
    "Paste HTML and get clean Markdown back. Supports GitHub Flavored Markdown, tables, code blocks, task lists, and images. No signup, no upload — everything runs in your browser.",
  path: PATH,
  keywords: [
    "html to markdown",
    "html to markdown converter",
    "convert html to markdown",
    "html2md",
    "html to md",
    "rich text to markdown",
  ],
});

const FAQ = [
  {
    question: "How does HTML to Markdown conversion work?",
    answer:
      "We use turndown — a battle-tested, open-source HTML-to-Markdown library — together with the GitHub Flavored Markdown plugin. The HTML is parsed in your browser, mapped to Markdown equivalents (headings, lists, links, tables, code blocks), and returned as clean text.",
  },
  {
    question: "Is my HTML uploaded to a server?",
    answer:
      "No. The conversion runs entirely in your browser. We never send your HTML to our servers, which makes the tool safe for confidential documents.",
  },
  {
    question: "Will my code blocks keep syntax highlighting?",
    answer:
      "Yes. If your HTML uses a `<pre><code class=\"language-xxx\">` pattern (the convention used by Prism, highlight.js, and most CMS systems), we preserve the language hint in the Markdown fence.",
  },
  {
    question: "What about tables, task lists, and strikethrough?",
    answer:
      "All supported via the GFM plugin. Pasted HTML tables become Markdown tables, ~~strikethrough~~ HTML becomes Markdown strikethrough, and HTML `<input type=\"checkbox\">` elements become Markdown task list items.",
  },
  {
    question: "Can I batch convert multiple HTML files?",
    answer:
      "This page is designed for single-document workflows. For batch conversion, you can install turndown as an npm package and pipe documents through Node.js — the conversion logic is identical.",
  },
  {
    question: "Does it work with HTML copied from Notion, Google Docs, or Microsoft Word?",
    answer:
      "Yes. Use the Paste HTML button to capture the rich HTML on your clipboard. Some tools include vendor-specific markup that we strip silently — you'll see clean Markdown in the output.",
  },
];

const FAQ_BODY = `## How to convert HTML to Markdown

1. **Paste** your HTML in the left pane, or click **Paste HTML** to read rich text directly from your clipboard.
2. The converter renders the **Markdown output** on the right in real time.
3. **Copy** or **download** the result as a \`.md\` file.

You can also import a \`.html\` file from disk by clicking **Import .html**.

## What gets converted

| HTML                                  | Markdown                                  |
| ------------------------------------- | ----------------------------------------- |
| \`<h1>…</h1>\`                         | \`# Heading\`                              |
| \`<strong>…</strong>\` / \`<b>\`        | \`**bold**\`                               |
| \`<em>…</em>\` / \`<i>\`                | \`_italic_\`                               |
| \`<a href="url">text</a>\`             | \`[text](url)\`                            |
| \`<ul><li>…</li></ul>\`                | \`- bullet\`                               |
| \`<ol><li>…</li></ol>\`                | \`1. ordered\`                             |
| \`<pre><code class="language-ts">…\`   | <code>\`\`\`ts</code> …                     |
| \`<table>…\` (GFM)                     | Markdown table with alignment             |
| \`<blockquote>…</blockquote>\`         | \`> quote\`                                |
| \`<img src="…" alt="…">\`              | \`![alt](src)\`                            |
| \`<del>…</del>\` / \`<s>\`              | \`~~strikethrough~~\`                      |
| \`<input type="checkbox" checked>\`    | \`- [x]\` task item                        |

## Why convert HTML to Markdown?

There are three common reasons people land on this page:

- **Migrating a CMS** — moving from WordPress, Ghost, or HubSpot to a Markdown-based site (Next.js, Astro, Hugo).
- **Cleaning up rich text** — turning an exported Google Doc, Notion page, or Word document into something a static site generator can consume.
- **Documentation pipelines** — feeding HTML scraped from a help center into a docs framework like Docusaurus or Nextra.

Markdown is portable, easy to diff, and lives happily inside git — that's why almost every modern documentation pipeline standardizes on it.

## Privacy & safety

- All processing happens **in your browser** using [turndown](https://github.com/mixmark-io/turndown) with the [GFM plugin](https://github.com/mixmark-io/turndown-plugin-gfm).
- We **don't** upload, store, log, or train on your HTML.
- The output is plain Markdown — no scripts, no inline styles, no surprises.

Want a deeper look at the syntax you're about to generate? Visit the [Markdown guide](/guide) or the [Markdown cheat sheet](/blog/markdown-cheat-sheet).
`;

export default function Page() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: breadcrumbLd([
            { name: "Home", url: "/" },
            { name: "Tools", url: "/tools" },
            { name: "HTML to Markdown", url: PATH },
          ]),
        }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: faqLd(FAQ) }}
      />

      <section className="border-b">
        <div className="container max-w-5xl py-12 sm:py-16">
          <p className="text-sm font-medium uppercase tracking-wider text-primary">
            HTML to Markdown
          </p>
          <h1 className="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-5xl">
            Convert HTML to Markdown — instantly, in your browser
          </h1>
          <p className="mt-4 max-w-2xl text-pretty text-muted-foreground sm:text-lg">
            Paste HTML on the left, copy clean GitHub Flavored Markdown on the right. Supports
            tables, task lists, fenced code with syntax hints, images, and links. Nothing leaves
            your device.
          </p>
          <div className="mt-6 flex flex-wrap gap-3">
            <Button asChild>
              <Link href="/editor">Open the editor</Link>
            </Button>
            <Button asChild variant="outline">
              <Link href="/tools/markdown-to-html">Reverse: Markdown to HTML</Link>
            </Button>
          </div>
        </div>
      </section>

      <HtmlToMarkdownConverter />

      <section className="container max-w-3xl py-10">
        <MarkdownPreview source={FAQ_BODY} enableExtras={false} />
      </section>

      <section className="border-t bg-muted/30">
        <div className="container max-w-3xl py-14">
          <h2 className="text-2xl font-semibold tracking-tight">Frequently asked questions</h2>
          <dl className="mt-6 divide-y divide-border rounded-xl border bg-card">
            {FAQ.map((item) => (
              <details key={item.question} className="group px-6 py-5 [&_summary]:cursor-pointer">
                <summary className="flex items-center justify-between font-medium">
                  {item.question}
                  <span
                    aria-hidden
                    className="ml-4 inline-block transition-transform group-open:rotate-45"
                  >
                    +
                  </span>
                </summary>
                <dd className="mt-3 text-sm text-muted-foreground">{item.answer}</dd>
              </details>
            ))}
          </dl>
        </div>
      </section>
    </>
  );
}