"use client";
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Img } from '@page-speed/img';
import * as React from 'react';
import { jsx, jsxs } 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 defaultFeatures = [
  {
    icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/files", size: 20 }),
    title: "Being radically open",
    description: "We believe there's no room for big egos and there's always time to help each other. We strive to give and receive feedback, ideas, perspectives"
  },
  {
    icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-arrow-right", size: 20 }),
    title: "Moving the needle",
    description: "Boldly, bravely and with clear aims. We seek out the big opportunities and double down on the most important things to work on."
  },
  {
    icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/settings", size: 20 }),
    title: "Optimizing for empowerment",
    description: "We believe that everyone should be empowered to do whatever they think is in the company's best interests."
  }
];
function AboutMissionFeatures({
  title = "About Us",
  description = "Opensite AI makes it easy to build customer portals, CRMs, internal tools, and other business applications for your team. In minutes, not months.",
  missionLabel = "OUR MISSION",
  missionText = "We believe that building software should be insanely easy. That everyone should have the freedom to create the tools they need, without any developers, designers or drama.",
  mainImage,
  missionBackgroundImage,
  featuresTitle = "We make creating software easy.",
  featuresDescription = "We aim to help empower 1,000,000 teams to create their own software. Here is how we plan on doing it.",
  features = defaultFeatures,
  featuresSlot,
  className,
  containerClassName,
  titleClassName,
  descriptionClassName,
  missionLabelClassName,
  missionTextClassName,
  mainImageClassName,
  missionSectionClassName,
  featuresTitleClassName,
  featuresDescriptionClassName,
  featuresClassName,
  optixFlowConfig
}) {
  const renderFeatures = () => {
    if (featuresSlot) return featuresSlot;
    if (!features || features.length === 0) return null;
    return features.map((feature, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
      /* @__PURE__ */ jsx("div", { className: cn("mb-5 flex size-12 items-center justify-center rounded-2xl bg-accent", feature.iconBgClass), children: feature.icon }),
      feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mt-2 mb-3 text-lg font-semibold", children: feature.title }) : feature.title),
      feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: feature.description }) : feature.description)
    ] }, idx));
  };
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col gap-16 lg:gap-28", containerClassName), children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
      title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-semibold tracking-tighter lg:text-7xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
      description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xl text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
      mainImage && /* @__PURE__ */ jsx(
        Img,
        {
          src: mainImage.src,
          alt: mainImage.alt,
          className: cn("size-full max-h-96 rounded-2xl object-cover", mainImageClassName),
          optixFlowConfig
        }
      ),
      /* @__PURE__ */ jsxs(
        "div",
        {
          className: cn("flex flex-col justify-between gap-10 rounded-2xl bg-muted p-10", missionSectionClassName),
          style: missionBackgroundImage ? {
            backgroundImage: `url(${missionBackgroundImage.src})`,
            backgroundSize: "cover",
            backgroundPosition: "center"
          } : void 0,
          children: [
            missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm font-semibold text-white", missionLabelClassName), children: missionLabel }) : /* @__PURE__ */ jsx("div", { className: missionLabelClassName, children: missionLabel })),
            missionText && (typeof missionText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg font-medium text-white", missionTextClassName), children: missionText }) : /* @__PURE__ */ jsx("div", { className: missionTextClassName, children: missionText }))
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:gap-20", children: [
      /* @__PURE__ */ jsxs("div", { className: "max-w-xl", children: [
        featuresTitle && (typeof featuresTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-semibold tracking-tight md:text-5xl", featuresTitleClassName), children: featuresTitle }) : /* @__PURE__ */ jsx("div", { className: featuresTitleClassName, children: featuresTitle })),
        featuresDescription && (typeof featuresDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", featuresDescriptionClassName), children: featuresDescription }) : /* @__PURE__ */ jsx("div", { className: featuresDescriptionClassName, children: featuresDescription }))
      ] }),
      /* @__PURE__ */ jsx("div", { className: cn("grid gap-10 md:grid-cols-3", featuresClassName), children: renderFeatures() })
    ] })
  ] }) });
}

export { AboutMissionFeatures };
//# sourceMappingURL=about-mission-features.js.map
//# sourceMappingURL=about-mission-features.js.map