"use client";
'use strict';

var React = require('react');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var jsxRuntime = require('react/jsx-runtime');
var SeparatorPrimitive = require('@radix-ui/react-separator');

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);
var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);

// components/blocks/comparison/comparison-legacy-modern.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 Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    SeparatorPrimitive__namespace.Root,
    {
      "data-slot": "separator",
      decorative,
      orientation,
      className: cn(
        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      ),
      ...props
    }
  );
}
var defaultLegacyFeatures = [
  { text: "One-size-fits-all project tools with generic workflows." },
  { text: "Clunky, overcomplicated, and hard to adopt." },
  { text: "Scattered data stitched together with brittle integrations." },
  { text: "Minimal automation leading to manual reporting." },
  { text: "Slow, risky migrations that disrupt delivery." },
  { text: "Aging tech with limited cloud and mobile support." },
  { text: "High price tags without measurable outcomes." },
  { text: "Surprise fees for training, support, and integrations." }
];
var defaultModernFeatures = [
  { emoji: "\u{1F9ED}", text: "Built for modern product and engineering teams." },
  { emoji: "\u{1F4A1}", text: "Opinionated defaults with a simple, modern UX." },
  { emoji: "\u{1F4CA}", text: "Unified workspace as your single source of truth." },
  { emoji: "\u26A1", text: "Automation and AI that cut busywork." },
  { emoji: "\u{1F9F0}", text: "Guided, low-risk migrations measured in weeks." },
  { emoji: "\u2601\uFE0F", text: "Cloud-native, secure, and always up to date." },
  { emoji: "\u{1F4C8}", text: "Improves velocity with a clear, provable ROI." },
  { emoji: "\u{1F4AC}", text: "Straightforward, transparent pricing." }
];
function ComparisonLegacyModern({
  heading = "Why Teams are",
  headingHighlight = "Moving to Modern Tools",
  description = "Old tools slow your team down and don't help you ship faster. Modern tools help you ship faster.",
  legacyTitle = "Legacy Features",
  legacyFeatures = defaultLegacyFeatures,
  modernTitle = "New Features",
  modernFeatures = defaultModernFeatures,
  columnsSlot,
  className,
  containerClassName,
  headingClassName,
  headingHighlightClassName,
  descriptionClassName,
  columnsGridClassName,
  legacyColumnClassName,
  modernColumnClassName
}) {
  const renderColumns = () => {
    if (columnsSlot) return columnsSlot;
    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-3xl bg-muted p-6 lg:rounded-r-none lg:p-12", legacyColumnClassName), children: [
        legacyTitle && (typeof legacyTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-medium", children: legacyTitle }) : legacyTitle),
        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-9 space-y-3", children: legacyFeatures.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              DynamicIcon,
              {
                name: "lucide/x",
                size: 16,
                className: "my-1.5 shrink-0 text-muted-foreground"
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-sm", children: feature.text })
          ] }),
          idx !== legacyFeatures.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Separator, {})
        ] }, idx)) })
      ] }),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-3xl border border-y p-6 lg:rounded-l-none lg:border-l-0 lg:p-12", modernColumnClassName), children: [
        modernTitle && (typeof modernTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-medium", children: modernTitle }) : modernTitle),
        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-9 space-y-3", children: modernFeatures.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2 text-sm", children: [
            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: feature.emoji }),
            feature.text
          ] }),
          idx !== modernFeatures.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Separator, {})
        ] }, idx)) })
      ] })
    ] });
  };
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 text-center md:gap-12", children: [
      /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: cn("text-4xl font-medium md:text-5xl lg:text-7xl", headingClassName), children: [
        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
          heading,
          " "
        ] }) : heading),
        headingHighlight && (typeof headingHighlight === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
          /* @__PURE__ */ jsxRuntime.jsx("span", { className: headingHighlightClassName, children: headingHighlight })
        ] }) : headingHighlight)
      ] }),
      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid gap-12 lg:grid-cols-2 lg:gap-0", columnsGridClassName), children: renderColumns() })
  ] }) });
}

exports.ComparisonLegacyModern = ComparisonLegacyModern;
//# sourceMappingURL=comparison-legacy-modern.cjs.map
//# sourceMappingURL=comparison-legacy-modern.cjs.map