"use client";
'use strict';

var React = require('react');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var jsxRuntime = require('react/jsx-runtime');
var img = require('@page-speed/img');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);

// components/blocks/comparison/comparison-ai-models.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var svgCache = /* @__PURE__ */ new Map();
function DynamicIcon({
  name,
  size = 28,
  color,
  className,
  alt
}) {
  const [svgContent, setSvgContent] = React__namespace.useState(null);
  const [isLoading, setIsLoading] = React__namespace.useState(true);
  const [error, setError] = React__namespace.useState(null);
  const { url, iconName } = React__namespace.useMemo(() => {
    const separator = name.includes("/") ? "/" : ":";
    const [prefix, iconName2] = name.split(separator);
    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
    return {
      url: baseUrl,
      iconName: iconName2
    };
  }, [name, size]);
  React__namespace.useEffect(() => {
    let isMounted = true;
    const fetchSvg = async () => {
      const cached = svgCache.get(url);
      if (cached) {
        if (isMounted) {
          setSvgContent(cached);
          setIsLoading(false);
        }
        return;
      }
      try {
        setIsLoading(true);
        setError(null);
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Failed to fetch icon: ${response.status}`);
        }
        let svg = await response.text();
        svg = processSvgForCurrentColor(svg);
        svgCache.set(url, svg);
        if (isMounted) {
          setSvgContent(svg);
          setIsLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          setError(err instanceof Error ? err.message : "Failed to load icon");
          setIsLoading(false);
        }
      }
    };
    fetchSvg();
    return () => {
      isMounted = false;
    };
  }, [url]);
  if (isLoading) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        "aria-hidden": "true"
      }
    );
  }
  if (error || !svgContent) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        role: "img",
        "aria-label": alt || iconName
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    "span",
    {
      className: cn("inline-flex items-center justify-center", className),
      style: {
        width: size,
        height: size,
        color: color || "inherit"
      },
      role: "img",
      "aria-label": alt || iconName,
      dangerouslySetInnerHTML: { __html: svgContent }
    }
  );
}
function processSvgForCurrentColor(svg) {
  let processed = svg;
  processed = processed.replace(
    /stroke=["'](#000000|#000|black)["']/gi,
    'stroke="currentColor"'
  );
  processed = processed.replace(
    /fill=["'](#000000|#000|black)["']/gi,
    'fill="currentColor"'
  );
  return processed;
}
function Table({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-slot": "table-container",
      className: "relative w-full overflow-x-auto",
      children: /* @__PURE__ */ jsxRuntime.jsx(
        "table",
        {
          "data-slot": "table",
          className: cn("w-full caption-bottom text-sm", className),
          ...props
        }
      )
    }
  );
}
function TableHeader({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "thead",
    {
      "data-slot": "table-header",
      className: cn("[&_tr]:border-b", className),
      ...props
    }
  );
}
function TableBody({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "tbody",
    {
      "data-slot": "table-body",
      className: cn("[&_tr:last-child]:border-0", className),
      ...props
    }
  );
}
function TableRow({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "tr",
    {
      "data-slot": "table-row",
      className: cn(
        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
        className
      ),
      ...props
    }
  );
}
function TableHead({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "th",
    {
      "data-slot": "table-head",
      className: cn(
        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      ),
      ...props
    }
  );
}
function TableCell({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "td",
    {
      "data-slot": "table-cell",
      className: cn(
        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      ),
      ...props
    }
  );
}

// lib/blockBrandedIconsAndPlaceholders.ts
var blockBrandedIconsAndPlaceholders = {
  openaiIcon: "https://cdn.ing/assets/files/record/286236/w11q4i7pq5v2xbaysb4glfeqiel9",
  claudeIcon: "https://cdn.ing/assets/files/record/286237/id772bsaby7c6wq1nk3ox7ywbgkp",
  geminiIcon: "https://cdn.ing/assets/files/record/286238/kozl1uiskp6sqq1k5ku69s23lw27"};
var defaultModels = {
  modelA: {
    name: "GPT-4o",
    icon: blockBrandedIconsAndPlaceholders.openaiIcon,
    iconAlt: "OpenAI",
    summary: [
      "Response latency: 1.2s (best)",
      "Code accuracy: 94% (neutral)",
      "Reasoning score: 91/100 (neutral)",
      "Input cost: $3.50/1M tokens (worst)",
      "Rate limit: 50K RPM (neutral)"
    ],
    hoverColor: "red"
  },
  modelB: {
    name: "Claude 3.5",
    icon: blockBrandedIconsAndPlaceholders.claudeIcon,
    iconAlt: "Claude",
    summary: [
      "Response latency: 1.8s (neutral)",
      "Code accuracy: 95% (best)",
      "Reasoning score: 92/100 (best)",
      "Input cost: $3.00/1M tokens (neutral)",
      "Rate limit: 40K RPM (worst)"
    ],
    hoverColor: "blue"
  },
  modelC: {
    name: "Gemini Pro 1.5",
    icon: blockBrandedIconsAndPlaceholders.geminiIcon,
    iconAlt: "Gemini",
    summary: [
      "Context window: 2M tokens (best)",
      "Input cost: $1.25/1M tokens (best)",
      "Output cost: $5.00/1M tokens (best)",
      "Rate limit: 60K RPM (best)",
      "Free tier: Generous (best)"
    ],
    hoverColor: "green"
  }
};
var defaultComparisonData = [
  {
    metric: "Context Window",
    modelA: { value: "128K tokens", status: "worst" },
    modelB: { value: "200K tokens", status: "neutral" },
    modelC: { value: "2M tokens", status: "best" }
  },
  {
    metric: "Response Speed",
    modelA: { value: "1.2 sec", status: "best" },
    modelB: { value: "1.8 sec", status: "neutral" },
    modelC: { value: "2.2 sec", status: "worst" }
  },
  {
    metric: "Code Generation",
    modelA: { value: "94%", status: "neutral" },
    modelB: { value: "95%", status: "best" },
    modelC: { value: "88%", status: "worst" }
  },
  {
    metric: "Reasoning Score",
    modelA: { value: "91/100", status: "neutral" },
    modelB: { value: "92/100", status: "best" },
    modelC: { value: "86/100", status: "worst" }
  },
  {
    metric: "Input Tokens",
    modelA: { value: "$3.50/1M", status: "worst" },
    modelB: { value: "$3.00/1M", status: "neutral" },
    modelC: { value: "$1.25/1M", status: "best" }
  },
  {
    metric: "Output Tokens",
    modelA: { value: "$14.00/1M", status: "neutral" },
    modelB: { value: "$15.00/1M", status: "worst" },
    modelC: { value: "$5.00/1M", status: "best" }
  },
  {
    metric: "Rate Limit",
    modelA: { value: "50K RPM", status: "neutral" },
    modelB: { value: "40K RPM", status: "worst" },
    modelC: { value: "60K RPM", status: "best" }
  },
  {
    metric: "Free Tier",
    modelA: { value: "Very Limited", status: "worst" },
    modelB: { value: "Limited", status: "neutral" },
    modelC: { value: "Generous", status: "best" }
  }
];
function ComparisonAiModels({
  heading,
  description,
  models = defaultModels,
  comparisonData = defaultComparisonData,
  tableSlot,
  analysisSlot,
  className,
  containerClassName,
  headingClassName,
  descriptionClassName,
  tableWrapperClassName,
  tableClassName,
  analysisClassName,
  optixFlowConfig
}) {
  const [hoveredModel, setHoveredModel] = React.useState(null);
  const renderStatusIcon = (status) => {
    if (status === "best") {
      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-green-600" });
    }
    if (status === "worst") {
      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-x", size: 16, className: "text-red-600" });
    }
    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/minus", size: 16, className: "text-muted-foreground" });
  };
  const getCellClassName = (status, modelKey) => {
    const baseClass = "cursor-pointer py-4 text-center font-medium transition-all duration-300";
    let statusClass = "";
    if (status === "best") {
      statusClass = "bg-green-50 text-green-600 dark:bg-green-950/20";
    } else if (status === "worst") {
      statusClass = "bg-red-50 text-red-600 dark:bg-red-950/20";
    } else {
      statusClass = "bg-muted/50 text-foreground";
    }
    let hoverClass = "";
    if (hoveredModel === modelKey) {
      if (modelKey === "modelA") hoverClass = "bg-red-50/80 dark:bg-red-950/30";
      else if (modelKey === "modelB") hoverClass = "bg-blue-50/80 dark:bg-blue-950/30";
      else if (modelKey === "modelC") hoverClass = "bg-green-50/80 dark:bg-green-950/30";
    }
    return cn(baseClass, statusClass, hoverClass);
  };
  const getSummaryCardClassName = (modelKey) => {
    const baseClass = "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300";
    if (hoveredModel === modelKey) {
      if (modelKey === "modelA") return cn(baseClass, "bg-red-50/20 shadow-lg ring-2 ring-red-500/50 dark:bg-red-950/10");
      if (modelKey === "modelB") return cn(baseClass, "bg-blue-50/20 shadow-lg ring-2 ring-blue-500/50 dark:bg-blue-950/10");
      if (modelKey === "modelC") return cn(baseClass, "bg-green-50/20 shadow-lg ring-2 ring-green-500/50 dark:bg-green-950/10");
    }
    return baseClass;
  };
  const renderTable = () => {
    if (tableSlot) return tableSlot;
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden border border-border/50 bg-background/50 backdrop-blur-sm", tableWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: tableClassName, children: [
      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-border/50", children: [
        /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-foreground", children: "Metric" }),
        Object.entries(models).map(([key, model]) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "text-center font-semibold text-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
          model.icon && /* @__PURE__ */ jsxRuntime.jsx(
            img.Img,
            {
              src: model.icon,
              alt: model.iconAlt || model.name,
              className: "h-4 w-4",
              optixFlowConfig
            }
          ),
          model.name
        ] }) }, key))
      ] }) }),
      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: comparisonData.map((row, index) => /* @__PURE__ */ jsxRuntime.jsxs(
        TableRow,
        {
          className: "border-border/30 transition-colors hover:bg-muted/30",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "py-4 font-medium text-foreground", children: row.metric }),
            /* @__PURE__ */ jsxRuntime.jsx(
              TableCell,
              {
                className: getCellClassName(row.modelA.status, "modelA"),
                onMouseEnter: () => setHoveredModel("modelA"),
                onMouseLeave: () => setHoveredModel(null),
                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
                  renderStatusIcon(row.modelA.status),
                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: row.modelA.value })
                ] })
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(
              TableCell,
              {
                className: getCellClassName(row.modelB.status, "modelB"),
                onMouseEnter: () => setHoveredModel("modelB"),
                onMouseLeave: () => setHoveredModel(null),
                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
                  renderStatusIcon(row.modelB.status),
                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: row.modelB.value })
                ] })
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(
              TableCell,
              {
                className: getCellClassName(row.modelC.status, "modelC"),
                onMouseEnter: () => setHoveredModel("modelC"),
                onMouseLeave: () => setHoveredModel(null),
                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
                  renderStatusIcon(row.modelC.status),
                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: row.modelC.value })
                ] })
              }
            )
          ]
        },
        index
      )) })
    ] }) });
  };
  const renderAnalysis = () => {
    if (analysisSlot) return analysisSlot;
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative mt-8 border border-border/50 bg-muted/20 p-6", analysisClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-4 font-mono text-sm font-semibold tracking-wider text-foreground uppercase", children: "Technical Analysis" }),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 font-mono text-xs text-muted-foreground", children: [
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-2 md:grid-cols-3", children: Object.entries(models).map(([key, model]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getSummaryCardClassName(key), children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 font-medium text-foreground", children: model.name }),
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: model.summary.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
            "\u2022 ",
            item
          ] }, idx)) })
        ] }, key)) }),
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 rounded border border-border/30 bg-background/50 p-3", children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 font-medium text-foreground", children: "Performance Summary" }),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
              "\u2022 ",
              models.modelA.name,
              ": Fastest response times with strong code generation"
            ] }),
            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
              "\u2022 ",
              models.modelB.name,
              ": Excellent reasoning capabilities and balanced performance"
            ] }),
            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
              "\u2022 ",
              models.modelC.name,
              ": Best value proposition with competitive pricing"
            ] })
          ] })
        ] })
      ] })
    ] }) });
  };
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
    (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 text-center", children: [
      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-muted-foreground md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden p-8", children: [
      renderTable(),
      renderAnalysis()
    ] })
  ] }) });
}

exports.ComparisonAiModels = ComparisonAiModels;
//# sourceMappingURL=comparison-ai-models.cjs.map
//# sourceMappingURL=comparison-ai-models.cjs.map