// @bun
var __require = import.meta.require;

// src/components/templates/TemplatesPage.tsx
import { useMemo, useState } from "react";
import {
  Button,
  ButtonLink,
  Input,
  MarketingCard,
  MarketingCardContent,
  MarketingCardDescription,
  MarketingCardHeader,
  MarketingCardTitle,
  MarketingSection
} from "@contractspec/lib.design-system";
import { HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
import { listTemplates } from "@contractspec/module.examples";
import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
"use client";
function matchesQuery(t, query) {
  const q = query.trim().toLowerCase();
  if (!q)
    return true;
  const hay = `${t.id} ${t.name} ${t.description} ${t.tags.join(" ")}`.toLowerCase();
  return hay.includes(q);
}
function TemplatesMarketingPage() {
  const [query, setQuery] = useState("");
  const templates = useMemo(() => listTemplates(), []);
  const filtered = useMemo(() => templates.filter((t) => matchesQuery(t, query)), [templates, query]);
  return /* @__PURE__ */ jsxDEV(Fragment, {
    children: [
      /* @__PURE__ */ jsxDEV(MarketingSection, {
        tone: "default",
        children: /* @__PURE__ */ jsxDEV(VStack, {
          as: "header",
          gap: "lg",
          align: "center",
          children: [
            /* @__PURE__ */ jsxDEV(VStack, {
              gap: "sm",
              align: "center",
              children: [
                /* @__PURE__ */ jsxDEV(ButtonLink, {
                  href: "/docs",
                  variant: "ghost",
                  children: "Docs"
                }, undefined, false, undefined, this),
                /* @__PURE__ */ jsxDEV(ButtonLink, {
                  href: "/sandbox",
                  variant: "ghost",
                  children: "Open Sandbox"
                }, undefined, false, undefined, this)
              ]
            }, undefined, true, undefined, this),
            /* @__PURE__ */ jsxDEV(VStack, {
              gap: "sm",
              align: "center",
              children: /* @__PURE__ */ jsxDEV(ButtonLink, {
                href: "/templates",
                variant: "default",
                children: "Templates"
              }, undefined, false, undefined, this)
            }, undefined, false, undefined, this)
          ]
        }, undefined, true, undefined, this)
      }, undefined, false, undefined, this),
      /* @__PURE__ */ jsxDEV(MarketingSection, {
        tone: "muted",
        children: /* @__PURE__ */ jsxDEV(VStack, {
          gap: "lg",
          children: [
            /* @__PURE__ */ jsxDEV(VStack, {
              gap: "sm",
              children: /* @__PURE__ */ jsxDEV(ButtonLink, {
                href: "/templates",
                variant: "ghost",
                children: "Browse all examples"
              }, undefined, false, undefined, this)
            }, undefined, false, undefined, this),
            /* @__PURE__ */ jsxDEV(HStack, {
              gap: "md",
              align: "center",
              justify: "between",
              wrap: "wrap",
              children: /* @__PURE__ */ jsxDEV(Input, {
                "aria-label": "Search templates and examples",
                placeholder: "Search templates and examples\u2026",
                value: query,
                onChange: (e) => setQuery(e.target.value)
              }, undefined, false, undefined, this)
            }, undefined, false, undefined, this)
          ]
        }, undefined, true, undefined, this)
      }, undefined, false, undefined, this),
      /* @__PURE__ */ jsxDEV(MarketingSection, {
        tone: "default",
        children: /* @__PURE__ */ jsxDEV(VStack, {
          gap: "lg",
          children: /* @__PURE__ */ jsxDEV(HStack, {
            gap: "md",
            wrap: "wrap",
            children: filtered.map((t) => /* @__PURE__ */ jsxDEV(MarketingCard, {
              className: "w-full md:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]",
              children: [
                /* @__PURE__ */ jsxDEV(MarketingCardHeader, {
                  children: [
                    /* @__PURE__ */ jsxDEV(MarketingCardTitle, {
                      children: [
                        t.icon,
                        " ",
                        t.name
                      ]
                    }, undefined, true, undefined, this),
                    /* @__PURE__ */ jsxDEV(MarketingCardDescription, {
                      children: t.description
                    }, undefined, false, undefined, this)
                  ]
                }, undefined, true, undefined, this),
                /* @__PURE__ */ jsxDEV(MarketingCardContent, {
                  children: /* @__PURE__ */ jsxDEV(VStack, {
                    gap: "md",
                    children: [
                      /* @__PURE__ */ jsxDEV(HStack, {
                        gap: "sm",
                        wrap: "wrap",
                        children: t.tags.slice(0, 6).map((tag) => /* @__PURE__ */ jsxDEV(ButtonLink, {
                          href: `/templates?tag=${encodeURIComponent(tag)}`,
                          variant: "ghost",
                          children: tag
                        }, `${t.id}-${tag}`, false, undefined, this))
                      }, undefined, false, undefined, this),
                      /* @__PURE__ */ jsxDEV(HStack, {
                        gap: "sm",
                        justify: "between",
                        wrap: "wrap",
                        children: [
                          /* @__PURE__ */ jsxDEV(ButtonLinkToSandbox, {
                            templateId: t.id
                          }, undefined, false, undefined, this),
                          /* @__PURE__ */ jsxDEV(Button, {
                            variant: "outline",
                            onClick: () => {
                              return;
                            },
                            disabled: true,
                            children: "Install to Studio (soon)"
                          }, undefined, false, undefined, this)
                        ]
                      }, undefined, true, undefined, this)
                    ]
                  }, undefined, true, undefined, this)
                }, undefined, false, undefined, this)
              ]
            }, t.id, true, undefined, this))
          }, undefined, false, undefined, this)
        }, undefined, false, undefined, this)
      }, undefined, false, undefined, this)
    ]
  }, undefined, true, undefined, this);
}
function ButtonLinkToSandbox({ templateId }) {
  return /* @__PURE__ */ jsxDEV(ButtonLink, {
    href: `/sandbox?template=${encodeURIComponent(templateId)}`,
    variant: "default",
    children: "Preview"
  }, undefined, false, undefined, this);
}
export {
  TemplatesMarketingPage
};
