"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Img } from '@page-speed/img';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import { jsx, jsxs } from 'react/jsx-runtime';

// components/blocks/features/feature-accordion-image.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 Accordion({
  ...props
}) {
  return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
}
function AccordionItem({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AccordionPrimitive.Item,
    {
      "data-slot": "accordion-item",
      className: cn("border-b last:border-b-0", className),
      ...props
    }
  );
}
function AccordionTrigger({
  className,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
    AccordionPrimitive.Trigger,
    {
      "data-slot": "accordion-trigger",
      className: cn(
        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
        className
      ),
      ...props,
      children: [
        children,
        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
      ]
    }
  ) });
}
function AccordionContent({
  className,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AccordionPrimitive.Content,
    {
      "data-slot": "accordion-content",
      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
      ...props,
      children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
    }
  );
}

// lib/blockBrandedIconsAndPlaceholders.ts
var blockBrandedIconsAndPlaceholders = {
  placeholder1: "https://cdn.ing/assets/files/record/286200/io0rg4wv8jd2o792q4uouxg4d5k8",
  placeholder3: "https://cdn.ing/assets/files/record/286203/itwrx0hqshkompfxvikdmj77xoh4",
  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx",
  placeholderDark1: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u"};
var defaultItems = [
  {
    title: "Create Your Account",
    content: "Sign up in minutes with just your email. No credit card required to get started. You'll have immediate access to all basic features.",
    imageSrc: blockBrandedIconsAndPlaceholders.placeholder1,
    imageAlt: "Account creation"
  },
  {
    title: "Configure Your Settings",
    content: "Customize your workspace to match your workflow. Set up integrations, invite team members, and configure notifications.",
    imageSrc: blockBrandedIconsAndPlaceholders.placeholderDark1,
    imageAlt: "Settings configuration"
  },
  {
    title: "Start Building",
    content: "Use our intuitive drag-and-drop builder to create stunning pages. Access hundreds of pre-built components and templates.",
    imageSrc: blockBrandedIconsAndPlaceholders.placeholder3,
    imageAlt: "Building process"
  },
  {
    title: "Launch & Scale",
    content: "Deploy your project with one click. Monitor performance, gather analytics, and scale as your business grows.",
    imageSrc: blockBrandedIconsAndPlaceholders.placeholder4,
    imageAlt: "Launch and scale"
  }
];
function FeatureAccordionImage({
  title = "How It Works",
  description = "Learn about our simple process to get started with our platform.",
  items = defaultItems,
  itemsSlot,
  defaultValue = "item-0",
  className,
  containerClassName,
  headerClassName,
  titleClassName,
  descriptionClassName,
  gridClassName,
  accordionClassName,
  imageWrapperClassName,
  imageClassName,
  optixFlowConfig
}) {
  const [activeItem, setActiveItem] = React.useState(defaultValue);
  const activeIndex = parseInt(activeItem.replace("item-", ""), 10) || 0;
  const currentImage = items[activeIndex] || items[0];
  const renderAccordionItems = () => {
    if (itemsSlot) return itemsSlot;
    if (!items || items.length === 0) return null;
    return items.map((item, index) => /* @__PURE__ */ jsxs(AccordionItem, { value: `item-${index}`, className: item.className, children: [
      /* @__PURE__ */ jsx(AccordionTrigger, { className: cn("text-left text-lg font-medium", item.triggerClassName), children: item.title }),
      /* @__PURE__ */ jsx(AccordionContent, { className: cn("text-muted-foreground", item.contentClassName), children: item.content })
    ] }, index));
  };
  const renderImage = () => {
    if (currentImage?.imageSlot) return currentImage.imageSlot;
    return /* @__PURE__ */ jsx(
      Img,
      {
        src: currentImage?.imageSrc || "",
        alt: currentImage?.imageAlt || "",
        className: cn("h-full w-full object-cover transition-opacity duration-300", imageClassName),
        loading: "lazy",
        optixFlowConfig
      }
    );
  };
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
    /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
      title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title })),
      description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }))
    ] }),
    /* @__PURE__ */ jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-16", gridClassName), children: [
      /* @__PURE__ */ jsx(
        Accordion,
        {
          type: "single",
          collapsible: true,
          value: activeItem,
          onValueChange: setActiveItem,
          className: cn("w-full", accordionClassName),
          children: renderAccordionItems()
        }
      ),
      /* @__PURE__ */ jsx("div", { className: cn("relative aspect-video overflow-hidden rounded-xl lg:aspect-square", imageWrapperClassName), children: renderImage() })
    ] })
  ] }) });
}

export { FeatureAccordionImage };
//# sourceMappingURL=feature-accordion-image.js.map
//# sourceMappingURL=feature-accordion-image.js.map