"use client";
'use strict';

var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var React = require('react');
var jsxRuntime = require('react/jsx-runtime');
var reactSlot = require('@radix-ui/react-slot');
var classVarianceAuthority = require('class-variance-authority');
var SeparatorPrimitive = require('@radix-ui/react-separator');
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);
var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);

// lib/utils.ts
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;
}
var badgeVariants = classVarianceAuthority.cva(
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
function Badge({
  className,
  variant,
  asChild = false,
  ...props
}) {
  const Comp = asChild ? reactSlot.Slot : "span";
  return /* @__PURE__ */ jsxRuntime.jsx(
    Comp,
    {
      "data-slot": "badge",
      className: cn(badgeVariants({ variant }), className),
      ...props
    }
  );
}
function Card({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-slot": "card",
      className: cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className
      ),
      ...props
    }
  );
}
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
    }
  );
}

// lib/blockBrandedIconsAndPlaceholders.ts
var blockBrandedIconsAndPlaceholders = {
  placeholder1: "https://cdn.ing/assets/files/record/286200/io0rg4wv8jd2o792q4uouxg4d5k8"};
function FeatureBentoUtilities({
  label = "Utilities",
  title = "Utilites for every use case and platform you can think of.",
  description = "All the tools you need to get the job done. From apps to integrations, we have you covered.",
  className,
  optixFlowConfig
}) {
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("bg-gray-50 py-32 dark:bg-background", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container max-w-7xl", children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/square-dashed-mouse-pointer", size: 20 }),
      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-6 md:flex-row", children: [
      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-medium md:w-1/2", children: title }),
      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "md:w-1/2", children: description })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-11 flex flex-col gap-6 md:flex-row", children: [
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-6", children: [
        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-medium", children: "Apps" }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi laboriosam voluptatibus temporibus doloremque laudantium." })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "overflow-hidden pt-0", children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            img.Img,
            {
              src: blockBrandedIconsAndPlaceholders.placeholder1,
              alt: "Integrations",
              className: "aspect-video w-full object-cover",
              loading: "lazy",
              optixFlowConfig
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-medium", children: "Integrations" }),
            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi laboriosam voluptatibus temporibus doloremque laudantium." })
          ] })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-medium", children: "Utilities" }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi laboriosam voluptatibus temporibus doloremque laudantium." })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 flex items-center gap-2 font-medium", children: [
            "Features ",
            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkles", size: 16 })
          ] }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi laboriosam voluptatibus temporibus doloremque laudantium." })
        ] })
      ] }),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-6", children: [
        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "overflow-hidden pt-0", children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            img.Img,
            {
              src: blockBrandedIconsAndPlaceholders.placeholder1,
              alt: "Integrations",
              className: "aspect-video w-full object-cover",
              loading: "lazy",
              optixFlowConfig
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 flex items-center gap-2 font-medium", children: [
              "Integrations ",
              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkles", size: 16 })
            ] }),
            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi laboriosam voluptatibus temporibus doloremque laudantium." })
          ] })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-medium", children: "Features" }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi laboriosam voluptatibus temporibus doloremque laudantium." })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 flex items-center gap-2 font-medium", children: [
            "Features ",
            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkles", size: 16 })
          ] }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi laboriosam voluptatibus temporibus doloremque laudantium." })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-dashed bg-transparent p-6 shadow-none", children: [
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center gap-2 font-medium", children: [
            "Search",
            /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: "Coming soon" })
          ] }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi laboriosam voluptatibus temporibus doloremque laudantium." })
        ] })
      ] })
    ] })
  ] }) });
}

exports.FeatureBentoUtilities = FeatureBentoUtilities;
//# sourceMappingURL=feature-bento-utilities.cjs.map
//# sourceMappingURL=feature-bento-utilities.cjs.map