// @bun
// src/components/docs/getting-started/DeveloperToolsPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight, Code2, Cpu, Layers, Terminal } from "lucide-react";
import { CodeBlock, InstallCommand } from "@contractspec/lib.design-system";
import { jsx, jsxs } from "react/jsx-runtime";
function DeveloperToolsPage() {
  const tools = [
    {
      name: "CLI",
      href: "/docs/getting-started/tools/cli",
      description: "Command-line interface for spec creation, building, validation, and CI/CD integration.",
      icon: Terminal,
      status: "available",
      highlights: [
        "AI-powered code generation",
        "Multiple agent modes",
        "SARIF/JSON output"
      ]
    },
    {
      name: "VS Code Extension",
      href: "/docs/getting-started/tools/vscode",
      description: "Real-time validation, scaffolding, and navigation directly in your editor.",
      icon: Code2,
      status: "available",
      highlights: [
        "Specs Explorer sidebar",
        "Watch mode",
        "Interactive walkthroughs"
      ]
    },
    {
      name: "ContractSpec Studio",
      href: "https://www.contractspec.studio",
      description: "AI-powered product decision engine that turns product signals into spec-first deliverables.",
      icon: Layers,
      status: "available",
      highlights: [
        "Evidence-to-decision loop",
        "Compiled spec diffs and task packs",
        "Exports to Linear, Jira, Notion, and GitHub"
      ]
    },
    {
      name: "JetBrains Plugin",
      href: "#",
      description: "Full ContractSpec support for IntelliJ, WebStorm, and other JetBrains IDEs.",
      icon: Cpu,
      status: "coming-soon",
      highlights: [
        "Code navigation",
        "Inline validation",
        "Refactoring support"
      ]
    }
  ];
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "Developer Tools"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground text-lg",
            children: "ContractSpec provides a suite of tools to help you build, validate, and manage your specifications across different environments."
          })
        ]
      }),
      /* @__PURE__ */ jsx("div", {
        className: "grid gap-6 md:grid-cols-2",
        children: tools.map((tool) => {
          const IconComponent = tool.icon;
          const isComingSoon = tool.status === "coming-soon";
          return /* @__PURE__ */ jsxs("div", {
            className: `card-subtle relative space-y-4 p-6 ${isComingSoon ? "opacity-75" : ""}`,
            children: [
              isComingSoon && /* @__PURE__ */ jsx("span", {
                className: "absolute -top-2 right-4 rounded-full bg-violet-500/20 px-2 py-0.5 text-xs font-medium text-violet-400",
                children: "Coming Soon"
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "flex items-center gap-3",
                children: [
                  /* @__PURE__ */ jsx("div", {
                    className: "flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10",
                    children: /* @__PURE__ */ jsx(IconComponent, {
                      className: "h-5 w-5 text-violet-400"
                    })
                  }),
                  /* @__PURE__ */ jsx("h3", {
                    className: "text-lg font-bold",
                    children: tool.name
                  })
                ]
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground text-sm",
                children: tool.description
              }),
              /* @__PURE__ */ jsx("ul", {
                className: "space-y-1",
                children: tool.highlights.map((highlight) => /* @__PURE__ */ jsxs("li", {
                  className: "text-muted-foreground flex items-center gap-2 text-sm",
                  children: [
                    /* @__PURE__ */ jsx("span", {
                      className: "text-violet-400",
                      children: "-"
                    }),
                    highlight
                  ]
                }, highlight))
              }),
              !isComingSoon && /* @__PURE__ */ jsxs(Link, {
                href: tool.href,
                className: "btn-ghost inline-flex items-center gap-1 text-sm",
                children: [
                  "Learn more ",
                  /* @__PURE__ */ jsx(ChevronRight, {
                    size: 14
                  })
                ]
              })
            ]
          }, tool.name);
        })
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "card-subtle space-y-4 p-6",
        children: [
          /* @__PURE__ */ jsx("h3", {
            className: "font-bold",
            children: "Quick Install"
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsxs("div", {
                children: [
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground mb-2 text-xs font-medium",
                    children: "CLI"
                  }),
                  /* @__PURE__ */ jsx(InstallCommand, {
                    package: "contractspec",
                    dev: true
                  })
                ]
              }),
              /* @__PURE__ */ jsxs("div", {
                children: [
                  /* @__PURE__ */ jsx("p", {
                    className: "text-muted-foreground mb-2 text-xs font-medium",
                    children: "VS Code Extension"
                  }),
                  /* @__PURE__ */ jsx(CodeBlock, {
                    language: "bash",
                    code: "code --install-extension lssm.vscode-contractspec"
                  })
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/getting-started/tools/cli",
            className: "btn-primary",
            children: [
              "Get Started with CLI ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/getting-started/tools/vscode",
            className: "btn-ghost",
            children: "VS Code Extension"
          })
        ]
      })
    ]
  });
}
export {
  DeveloperToolsPage
};
