import { createRequire } from "node:module";
var __require = /* @__PURE__ */ createRequire(import.meta.url);

// src/components/marketing/sections/IconGridSection.tsx
import { cva } from "class-variance-authority";
import {
  MarketingCardsSection,
  MarketingIconCard
} from "@contractspec/lib.design-system";
import { Muted } from "@contractspec/lib.ui-kit-web/ui/typography";
import { jsxDEV } from "react/jsx-dev-runtime";
var itemVariants = cva("", {
  variants: {
    iconRole: {
      iconFirst: "",
      listing: "items-start",
      support: "items-start"
    }
  },
  defaultVariants: { iconRole: "iconFirst" }
});
function IconGridSection({
  eyebrow,
  title,
  subtitle,
  items,
  tone = "default",
  padding,
  columns = 3,
  iconRole = "iconFirst"
}) {
  return /* @__PURE__ */ jsxDEV(MarketingCardsSection, {
    tone,
    padding,
    eyebrow: eyebrow ? /* @__PURE__ */ jsxDEV(Muted, {
      className: "text-xs font-semibold tracking-[0.2em] uppercase",
      children: eyebrow
    }, undefined, false, undefined, this) : null,
    title,
    subtitle: subtitle ? /* @__PURE__ */ jsxDEV(Muted, {
      className: "text-lg",
      children: subtitle
    }, undefined, false, undefined, this) : null,
    columns,
    children: items.map((card) => /* @__PURE__ */ jsxDEV(MarketingIconCard, {
      icon: card.icon,
      title: card.title,
      description: card.description,
      tone: card.tone,
      iconClassName: card.iconClassName,
      variant: iconRole === "listing" ? "listing" : iconRole === "support" ? "support" : "iconFirst",
      className: itemVariants({ iconRole })
    }, card.title, false, undefined, this))
  }, undefined, false, undefined, this);
}

// src/components/marketing/sections/StepsSection.tsx
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
var steps = [
  {
    step: 1,
    title: "Pick one module",
    description: "Start with one API endpoint, one entity, one surface. No big-bang migration."
  },
  {
    step: 2,
    title: "Define the contract",
    description: "Write a spec in TypeScript. Just types and Zod schemas you already know."
  },
  {
    step: 3,
    title: "Generate & compare",
    description: "See what ContractSpec generates. Compare to your existing code. Keep what works."
  },
  {
    step: 4,
    title: "Expand gradually",
    description: "Add more contracts as you see value. No pressure. No lock-in. Your pace."
  }
];
function StepsSection() {
  return /* @__PURE__ */ jsxDEV2(IconGridSection, {
    tone: "default",
    columns: 4,
    title: "How incremental adoption works",
    padding: "comfortable",
    iconRole: "listing",
    items: steps.map((item) => ({
      icon: ({ className }) => /* @__PURE__ */ jsxDEV2("div", {
        className: `bg-primary/15 flex h-10 w-10 items-center justify-center rounded-lg ${className ?? ""}`,
        children: /* @__PURE__ */ jsxDEV2("span", {
          className: "text-primary text-sm font-semibold",
          children: item.step
        }, undefined, false, undefined, this)
      }, undefined, false, undefined, this),
      title: item.title,
      description: item.description,
      tone: "muted"
    }))
  }, undefined, false, undefined, this);
}
export {
  StepsSection
};
