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

const PATH = "/tools/markdown-editor-online";

export const metadata: Metadata = buildMetadata({
  title: "Markdown Editor Online — Free, Live Preview, No Signup",
  description:
    "A free online Markdown editor with live preview, GitHub Flavored Markdown, syntax highlighting, autosave, and export to HTML or PDF. Runs entirely in your browser.",
  path: PATH,
  keywords: [
    "markdown editor online",
    "online markdown editor",
    "free markdown editor",
    "markdown editor with preview",
    "browser markdown editor",
  ],
});

export default function Page() {
  return (
    <ToolLanding
      eyebrow="Markdown Editor Online"
      title="The fastest free Markdown editor — online, in your browser"
      description="Write Markdown on the left and see the live preview on the right. No signup, no install, no upload. Autosaves to your browser and exports to HTML or PDF in one click."
      path={PATH}
      bullets={[
        "Live split-screen Markdown editor with synced scrolling",
        "GitHub Flavored Markdown — tables, task lists, code highlighting",
        "Export to .md, HTML, and PDF; share previews via link",
        "Multiple drafts, autosave, and instant theme switching",
      ]}
      sample={`# Hello, Markdown\n\nA **free online** Markdown editor.\n\n- Live preview\n- Syntax highlighting\n- Export to PDF\n\n\`\`\`ts\nconst greet = (name: string) => \`Hello, \${name}!\`;\n\`\`\`\n`}
      body={`## Why use an online Markdown editor?

Online Markdown editors give you the speed of a desktop tool without the install. Open a browser tab and you're ready to write — whether you're drafting a README, a blog post, or release notes.

**Markdown Viewer** is built to be the default option:

- **No signup, no upload.** Everything happens in your browser. Your draft never leaves your device.
- **Live, accurate preview.** Powered by \`react-markdown\` with \`remark-gfm\` and \`rehype-highlight\` so what you see is what you ship.
- **Productivity tools.** Built-in formatter, linter, heading outline, and table generator.
- **Fast.** Server-rendered with Next.js and aggressive code splitting; the editor lazy-loads on demand.

## When to use Markdown Viewer

Use Markdown Viewer when you want to:

1. Draft a README without firing up a text editor and dev server.
2. Format messy Markdown copy-pasted from chat or email.
3. Preview a Markdown file someone sent you.
4. Quickly export a Markdown note to a PDF for sharing.

## Keyboard shortcuts that work everywhere

- **Ctrl/⌘ + B** — bold
- **Ctrl/⌘ + I** — italic
- **Ctrl/⌘ + K** — insert link
- **Ctrl/⌘ + /** — inline code
- **Ctrl/⌘ + Shift + F** — beautify the document
- **F11** — fullscreen mode
`}
      faq={[
        {
          question: "Is the online Markdown editor really free?",
          answer:
            "Yes. Markdown Viewer is free to use with no signup. It's also open source under the MIT license.",
        },
        {
          question: "Do you store the Markdown I write?",
          answer:
            "No. Everything runs in your browser. Your drafts are persisted to local storage and never sent to our servers.",
        },
        {
          question: "Can I use the editor offline?",
          answer:
            "After the first visit the assets are cacheable, so most workflows work offline. For guaranteed offline use, install Markdown Viewer as a PWA from your browser.",
        },
        {
          question: "Does it support GitHub Flavored Markdown?",
          answer:
            "Yes — tables, task lists, strikethrough, autolinks, footnotes, and fenced code blocks with syntax highlighting are all supported.",
        },
      ]}
    />
  );
}