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

// components/blocks/features/feature-capabilities-grid.tsx
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;
}
function Card({ className, ...props }) {
  return /* @__PURE__ */ 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 CardHeader({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "card-header",
      className: cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className
      ),
      ...props
    }
  );
}
function CardTitle({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "card-title",
      className: cn("leading-none font-semibold", className),
      ...props
    }
  );
}
function CardContent({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "card-content",
      className: cn("px-6", className),
      ...props
    }
  );
}
var defaultItems = [
  {
    title: "Reasoned Guidance",
    iconName: "lucide/brain",
    description: "Clarify complex decisions with OpenSite AI reasoning and proactive analysis."
  },
  {
    title: "Visual Intelligence",
    iconName: "lucide/camera",
    description: "Interpret imagery, inspections, and documentation with precision and confidence."
  },
  {
    title: "Workflow Automations",
    iconName: "lucide/plug",
    description: "Integrate operational tools and orchestrate tasks across teams and partners."
  },
  {
    title: "Structured Outputs",
    iconName: "lucide/braces",
    description: "Transform complex updates into actionable summaries and structured reports."
  },
  {
    title: "Image Generation",
    iconName: "lucide/image",
    description: "Create branded visuals and personalized assets for coverage communications."
  },
  {
    title: "Live Research",
    iconName: "lucide/search",
    badge: "New",
    description: "Access real-time market and carrier insights with trusted data sources."
  }
];
function FeatureCapabilitiesGrid({
  eyebrow = "[ CAPABILITIES ]",
  heading = "Models that adapt to your coverage strategy",
  items = defaultItems,
  itemsSlot,
  className,
  containerClassName,
  eyebrowClassName,
  headingClassName,
  gridClassName,
  cardClassName
}) {
  const renderItemIcon = (item) => {
    if (item.icon) return item.icon;
    if (item.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 });
    return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 20 });
  };
  const renderItems = () => {
    if (itemsSlot) return itemsSlot;
    if (!items || items.length === 0) return null;
    return items.map((item, index) => /* @__PURE__ */ jsxs(
      Card,
      {
        className: cn("group relative overflow-visible border-white/10 bg-white/5 p-0 transition-colors duration-300 hover:border-white/20", cardClassName, item.className),
        children: [
          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-white/10 via-white/5 to-transparent" }) }),
          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-white/0 to-white/0 transition-colors group-hover:from-white/3 group-hover:to-white/6" }),
          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0 hidden group-hover:block", children: [
            /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-white" }),
            /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-white" }),
            /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-white" }),
            /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-white" })
          ] }),
          /* @__PURE__ */ jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
            /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white", item.iconClassName), children: renderItemIcon(item) }),
            /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
              item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(CardTitle, { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title })),
              item.badge && /* @__PURE__ */ jsx("span", { className: cn("rounded-full border border-white/20 px-2 py-0.5 text-[10px] leading-none text-white/70", item.badgeClassName), children: item.badge })
            ] }) })
          ] }),
          /* @__PURE__ */ jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-white/70", item.descriptionClassName), children: item.description }),
          /* @__PURE__ */ jsx(
            motion.div,
            {
              className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-white/0",
              initial: { opacity: 0 },
              whileHover: { opacity: 1 },
              transition: { duration: 0.25 }
            }
          )
        ]
      },
      `${typeof item.title === "string" ? item.title : "item"}-${index}`
    ));
  };
  return /* @__PURE__ */ jsx("section", { className: cn("bg-foreground py-16 text-background", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
    eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs tracking-widest text-muted-foreground", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsx("div", { className: cn("text-xs tracking-widest text-muted-foreground", eyebrowClassName), children: eyebrow })),
    heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mt-3 text-4xl font-semibold tracking-tight sm:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mt-3 text-4xl font-semibold tracking-tight sm:text-5xl", headingClassName), children: heading })),
    /* @__PURE__ */ jsx("div", { className: cn("mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", gridClassName), children: renderItems() })
  ] }) });
}

export { FeatureCapabilitiesGrid };
//# sourceMappingURL=feature-capabilities-grid.js.map
//# sourceMappingURL=feature-capabilities-grid.js.map