"use client";
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import * as React from 'react';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

// lib/utils.ts
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var svgCache = /* @__PURE__ */ new Map();
function DynamicIcon({
  name,
  size = 28,
  color,
  className,
  alt
}) {
  const [svgContent, setSvgContent] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const { url, iconName } = React.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.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__ */ jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        "aria-hidden": "true"
      }
    );
  }
  if (error || !svgContent) {
    return /* @__PURE__ */ jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        role: "img",
        "aria-label": alt || iconName
      }
    );
  }
  return /* @__PURE__ */ 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;
}
var defaultItems = [
  {
    icon: "lucide/cloud",
    title: "AI-Driven Insights",
    description: "Leverage advanced AI algorithms to gain actionable insights and make data-driven decisions for your business."
  },
  {
    icon: "lucide/x-circle",
    title: "Error-Free Automation",
    description: "Eliminate manual errors with intelligent automation tools that ensure accuracy and consistency across all processes."
  },
  {
    icon: "lucide/users",
    title: "Seamless Team Collaboration",
    description: "Enhance teamwork with AI-powered collaboration tools that enable real-time communication and shared workflows."
  }
];
function TimelineAIWorkflowCards({
  className,
  heading,
  subheading = "Seamlessly integrate AI into your workflows. Automate tasks, enhance efficiency, and stay ahead.",
  items = defaultItems
}) {
  const defaultHeading = /* @__PURE__ */ jsxs(Fragment, { children: [
    "Unlock",
    " ",
    /* @__PURE__ */ jsxs("span", { className: "relative inline-block", children: [
      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "AI" }),
      /* @__PURE__ */ jsx(
        DynamicIcon,
        {
          name: "lucide/sparkles",
          size: 20,
          className: "absolute -top-2 -right-4 fill-yellow-500 stroke-none"
        }
      )
    ] }),
    /* @__PURE__ */ jsx("br", {}),
    "for your existing workflows"
  ] });
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-8 sm:gap-12 lg:grid-cols-2 lg:gap-16", children: [
    /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-24 lg:self-start", children: /* @__PURE__ */ jsxs("div", { className: "max-w-lg", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-primary sm:text-4xl lg:text-5xl", children: heading || defaultHeading }),
      /* @__PURE__ */ jsx("p", { className: "mt-12 text-base text-muted-foreground", children: subheading })
    ] }) }),
    /* @__PURE__ */ jsx("div", { className: "-mt-8 sm:-mt-12", children: items.map((item, index) => /* @__PURE__ */ jsx(
      "div",
      {
        className: "relative my-12 overflow-hidden rounded-lg bg-muted px-8 py-16 shadow-none sm:px-12 sm:py-24 lg:px-16 lg:py-32",
        children: /* @__PURE__ */ jsxs("div", { className: "gap-4 sm:gap-6", children: [
          /* @__PURE__ */ jsx("div", { className: "block shrink-0", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 48 }) }),
          /* @__PURE__ */ jsxs("div", { className: "absolute top-12 right-12 font-mono text-5xl", children: [
            "0",
            index + 1
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
            /* @__PURE__ */ jsx("h4", { className: "mb-2 text-2xl font-semibold text-primary", children: item.title }),
            /* @__PURE__ */ jsx("p", { className: "mt-6 text-xs text-muted-foreground sm:text-base", children: item.description })
          ] })
        ] })
      },
      index
    )) })
  ] }) }) });
}

export { TimelineAIWorkflowCards };
//# sourceMappingURL=timeline-ai-workflow-cards.js.map
//# sourceMappingURL=timeline-ai-workflow-cards.js.map