import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { H as i, C as s, a as l, T as a, K as r, ax as o, c as n } from "../index-sdOMz8GW.js";
import { BrainCircuit as c, Wrench as d, BookOpen as m, MessageSquare as h, Radio as u, ShieldCheck as p, CheckCheck as g, Code as x, Wand2 as f } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const k = () => /* @__PURE__ */ t("div", { className: "flex flex-col gap-8", children: [
  /* @__PURE__ */ e(
    i,
    {
      title: "Overview",
      description: "The tucu-ui MCP Server implements the Model Context Protocol to give AI agents full access to the component library — catalog, code generation, design tokens, and best practices.",
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-violet-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
    }
  ),
  /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(l, { title: "What is MCP?", children: [
    /* @__PURE__ */ t(a, { className: "text-sm text-foreground/70 mb-4", children: [
      "The ",
      /* @__PURE__ */ e("strong", { children: "Model Context Protocol (MCP)" }),
      " is an open standard that lets AI assistants connect to external tools and data sources. Instead of relying on training data alone, agents can query live APIs for accurate, up-to-date information about your component library."
    ] }),
    /* @__PURE__ */ t(a, { className: "text-sm text-foreground/70", children: [
      "With",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: "@e-burgos/tucu-ui-mcp" }),
      ", your AI assistant knows every component, prop, variant, token, and pattern — producing correct, type-safe code on the first try without hallucinated prop names or invalid variants."
    ] })
  ] }) }),
  /* @__PURE__ */ t("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: [
    /* @__PURE__ */ e(s, { className: "text-center", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-3", children: [
      /* @__PURE__ */ e("div", { className: "w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-blue-500" }) }),
      /* @__PURE__ */ e(r, { variant: "soft", className: "bg-blue-500/10 text-blue-500", children: "7 Tools" }),
      /* @__PURE__ */ e(a, { className: "text-sm font-semibold", children: "Tools" }),
      /* @__PURE__ */ e(a, { className: "text-xs text-foreground/60", children: "Generate components, forms, pages, charts. Search icons. List & inspect the full catalog." })
    ] }) }),
    /* @__PURE__ */ e(s, { className: "text-center", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-3", children: [
      /* @__PURE__ */ e("div", { className: "w-12 h-12 bg-emerald-500/10 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-emerald-500" }) }),
      /* @__PURE__ */ e(
        r,
        {
          variant: "soft",
          className: "bg-emerald-500/10 text-emerald-500",
          children: "12 Resources"
        }
      ),
      /* @__PURE__ */ e(a, { className: "text-sm font-semibold", children: "Resources" }),
      /* @__PURE__ */ e(a, { className: "text-xs text-foreground/60", children: "Static knowledge: catalog, tokens, forms, routing, layouts, charts, icons, and more." })
    ] }) }),
    /* @__PURE__ */ e(s, { className: "text-center", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-3", children: [
      /* @__PURE__ */ e("div", { className: "w-12 h-12 bg-amber-500/10 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-amber-500" }) }),
      /* @__PURE__ */ e(r, { variant: "soft", className: "bg-amber-500/10 text-amber-500", children: "8 Prompts" }),
      /* @__PURE__ */ e(a, { className: "text-sm font-semibold", children: "Prompts" }),
      /* @__PURE__ */ e(a, { className: "text-xs text-foreground/60", children: "Pre-built workflows: create components, debug variants, migrate, audit accessibility." })
    ] }) }),
    /* @__PURE__ */ e(s, { className: "text-center", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-3", children: [
      /* @__PURE__ */ e("div", { className: "w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-purple-500" }) }),
      /* @__PURE__ */ e(r, { variant: "soft", className: "bg-purple-500/10 text-purple-500", children: "2 Transports" }),
      /* @__PURE__ */ e(a, { className: "text-sm font-semibold", children: "Transports" }),
      /* @__PURE__ */ e(a, { className: "text-xs text-foreground/60", children: "stdio for local IDEs, HTTP+SSE for remote/cloud agents. Both fully supported." })
    ] }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-6", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Why use it?" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Eliminate guesswork — your AI assistant generates correct code on the first try"
        }
      )
    ] }),
    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ e(
        o,
        {
          layout: "horizontal",
          icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
          title: "No hallucinated props",
          description: "Agents query live metadata, not stale training data",
          iconBgClassName: "from-emerald-500 to-green-500"
        }
      ),
      /* @__PURE__ */ e(
        o,
        {
          layout: "horizontal",
          icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
          title: "Correct variants",
          description: 'Only valid values like "solid", "ghost", "transparent"',
          iconBgClassName: "from-blue-500 to-cyan-500"
        }
      ),
      /* @__PURE__ */ e(
        o,
        {
          layout: "horizontal",
          icon: /* @__PURE__ */ e(x, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
          title: "Type-safe output",
          description: "Generated code passes TypeScript strict mode",
          iconBgClassName: "from-violet-500 to-purple-500"
        }
      ),
      /* @__PURE__ */ e(
        o,
        {
          layout: "horizontal",
          icon: /* @__PURE__ */ e(f, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
          title: "Full code generation",
          description: "Forms with Zod, pages with layouts, themed charts",
          iconBgClassName: "from-amber-500 to-orange-500"
        }
      )
    ] })
  ] }),
  /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(l, { title: "Quick Example", children: [
    /* @__PURE__ */ e(a, { className: "text-sm text-foreground/70 mb-3", children: "Ask your AI assistant to generate a form — the MCP server handles the rest:" }),
    /* @__PURE__ */ e(
      n,
      {
        code: `// Agent calls: generate_form tool
// Input: { pattern: "login", withValidation: true }
// Output: complete TSX with Zod schema + react-hook-form

import { z } from 'zod';
import { Form, InputText, Button } from '@e-burgos/tucu-ui';

const loginSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Min 8 characters'),
});

export function LoginForm() {
  return (
    <Form schema={loginSchema} onSubmit={(data) => console.log(data)}>
      <InputText name="email" label="Email" placeholder="you@example.com" />
      <InputText name="password" label="Password" type="password" />
      <Button type="submit" variant="solid">Sign In</Button>
    </Form>
  );
}`
      }
    )
  ] }) })
] });
export {
  k as default
};
