// src/components/docs/comparison/ComparisonInternalToolBuildersPage.tsx
import { jsx, jsxs } from "react/jsx-runtime";
function ComparisonInternalToolBuildersPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "Internal-tool builders"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Internal-tool builders let teams quickly assemble dashboards and admin panels. These platforms often provide drag-and-drop UIs and connectors to databases and APIs, but they rely on developers to write custom code for business logic and seldom enforce policies across surfaces."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Feature comparison"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "border-border/50 overflow-x-auto rounded-lg border",
            children: /* @__PURE__ */ jsxs("table", {
              className: "w-full text-left text-sm",
              children: [
                /* @__PURE__ */ jsx("thead", {
                  className: "bg-card/50",
                  children: /* @__PURE__ */ jsxs("tr", {
                    className: "border-border/50 border-b",
                    children: [
                      /* @__PURE__ */ jsx("th", {
                        className: "px-4 py-3 font-semibold",
                        children: "Feature"
                      }),
                      /* @__PURE__ */ jsx("th", {
                        className: "px-4 py-3 font-semibold",
                        children: "Retool"
                      }),
                      /* @__PURE__ */ jsx("th", {
                        className: "px-4 py-3 font-semibold",
                        children: "Appsmith"
                      }),
                      /* @__PURE__ */ jsx("th", {
                        className: "px-4 py-3 font-semibold",
                        children: "ToolJet"
                      }),
                      /* @__PURE__ */ jsx("th", {
                        className: "px-4 py-3 font-semibold",
                        children: "Budibase"
                      })
                    ]
                  })
                }),
                /* @__PURE__ */ jsxs("tbody", {
                  className: "divide-border/50 divide-y",
                  children: [
                    /* @__PURE__ */ jsxs("tr", {
                      children: [
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top font-semibold",
                          children: "UI builder"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Drag-and-drop canvas; shape UI components easily"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Visual builder with drag-and-drop widgets"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Drag-and-drop UI widgets (tables, charts, forms)"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Pre-built components and templates for mobile/desktop"
                        })
                      ]
                    }),
                    /* @__PURE__ */ jsxs("tr", {
                      children: [
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top font-semibold",
                          children: "Custom code & logic"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Full code insertion anywhere via IDE"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Logic via JavaScript or natural-language prompts in a central IDE"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Supports business logic in JavaScript or Python queries"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Custom logic via JavaScript; plugins and external embeds"
                        })
                      ]
                    }),
                    /* @__PURE__ */ jsxs("tr", {
                      children: [
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top font-semibold",
                          children: "Data connectors"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Wide support for databases and APIs (PostgreSQL, MongoDB, GraphQL, etc.)."
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Connects to LLMs and databases"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Built-in database; connects to PostgreSQL, MongoDB, APIs, GraphQL, SaaS"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Connects to external databases, REST, CSV or built-in DB"
                        })
                      ]
                    }),
                    /* @__PURE__ */ jsxs("tr", {
                      children: [
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top font-semibold",
                          children: "Open source & self-host"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Proprietary; cloud or on-prem subscription."
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Open source (Apache-2.0); self-host or cloud."
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Open source; self-host via Docker or cloud."
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "Open source; self-host via Docker/Kubernetes"
                        })
                      ]
                    }),
                    /* @__PURE__ */ jsxs("tr", {
                      children: [
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top font-semibold",
                          children: "Policy & personalisation"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "No built-in policy engine; personalisation limited to user roles."
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "No typed policy engine; customisation depends on user roles."
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "No policy engine; personalisation via user roles."
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 align-top",
                          children: "No policy engine; personalisation via RBAC & SSO"
                        })
                      ]
                    })
                  ]
                })
              ]
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-3",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "ContractSpec’s differences"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground space-y-2",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Typed specifications"
                  }),
                  " produce both the API and UI. You define capabilities, data views and workflows, and the compiler generates code, forms and screens—no manual widget wiring."
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Policy enforcement"
                  }),
                  " at run time ensures PII and ABAC rules across the entire app."
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Overlay personalisation"
                  }),
                  " allows tenants and users to change layouts safely without code."
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Unified mobile/web runtime"
                  }),
                  " means you don’t need separate builders for React Native vs web."
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Internal-tool builders are useful for quick dashboards. ContractSpec extends this by generating the whole stack from specs and enforcing policies throughout."
          })
        ]
      })
    ]
  });
}
export {
  ComparisonInternalToolBuildersPage
};
