import fs from "node:fs";
import path from "node:path";
import Link from "next/link";

import { renderMarkdown } from "./renderMarkdown";

export const metadata = {
  title: "B2B-каналы для site-finder · GenDesign",
  description: "Реестр B2B-вопросов для координации с Максом",
};

export default function B2BChannelsPage() {
  const mdPath = path.join(process.cwd(), "public", "docs", "b2b-channels.md");
  const raw = fs.readFileSync(mdPath, "utf-8");

  return (
    <main
      style={{
        maxWidth: 880,
        margin: "0 auto",
        padding: "32px 24px",
        fontFamily:
          'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
        color: "#1f2937",
        lineHeight: 1.6,
      }}
    >
      <div
        style={{
          marginBottom: 24,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          paddingBottom: 16,
          borderBottom: "1px solid #e5e7eb",
        }}
      >
        <Link
          href="/"
          style={{ fontSize: 13, color: "#6b7280", textDecoration: "none" }}
        >
          ← Главная
        </Link>
        <a
          href="/docs/b2b-channels.md"
          download
          style={{
            fontSize: 13,
            color: "#1d4ed8",
            textDecoration: "none",
            padding: "6px 12px",
            border: "1px solid #1d4ed8",
            borderRadius: 6,
          }}
        >
          ↓ Скачать .md
        </a>
      </div>

      <div
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: renderMarkdown(raw) }}
        className="markdown-body"
      />

      <style
        dangerouslySetInnerHTML={{
          __html: `
            .markdown-body h1 { font-size: 28px; font-weight: 700; margin: 24px 0 16px; line-height: 1.3; }
            .markdown-body h2 { font-size: 22px; font-weight: 700; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #e5e7eb; }
            .markdown-body h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; color: #1d4ed8; }
            .markdown-body p { margin: 8px 0; }
            .markdown-body ul { margin: 8px 0; padding-left: 24px; }
            .markdown-body li { margin: 4px 0; }
            .markdown-body code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 0.92em; color: #b91c1c; }
            .markdown-body strong { font-weight: 600; }
            .markdown-body a { color: #1d4ed8; text-decoration: underline; }
          `,
        }}
      />
    </main>
  );
}
