"use client";
'use strict';

var React = require('react');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var img = require('@page-speed/img');
var AccordionPrimitive = require('@radix-ui/react-accordion');
var jsxRuntime = require('react/jsx-runtime');

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 AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);

// components/blocks/faq/faq-split-hero.tsx
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}&key=au382bi7fsh96w9h9xlrnat2jglx`;
    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;
}
function Accordion({
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
}
function AccordionItem({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    AccordionPrimitive__namespace.Item,
    {
      "data-slot": "accordion-item",
      className: cn("border-b ", className),
      ...props
    }
  );
}
function AccordionTrigger({
  className,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
    AccordionPrimitive__namespace.Trigger,
    {
      "data-slot": "accordion-trigger",
      className: cn(
        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center 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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
    AccordionPrimitive__namespace.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__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
    }
  );
}

// lib/patternSvgs.ts
var patternSvgs = {
  squareAltGrid: "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
  grid1: "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
  noise: "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
  dots: "https://cdn.ing/assets/files/record/286198/yfsjx9thvtxzhl2qtshxyhkrm524",
  dotPattern: "https://cdn.ing/assets/files/record/286192/7ig0cku8aqbboiza8nuk6hw0nnsr",
  dotPattern2: "https://cdn.ing/assets/files/record/286189/arez6gd2s7isn9i1o6c7sexdq7bl",
  circles: "https://cdn.ing/assets/files/record/286190/gtmia3sncjtzetdshc20zf1d3c17",
  waves: "https://cdn.ing/assets/files/record/286191/mqlb33fzxz9cdth1bx7if0wmpkp1",
  crossPattern: "https://cdn.ing/assets/files/record/286193/9yfqwdbnqaipbp7fsb3wbzzmq472",
  architect: "https://cdn.ing/assets/files/record/286194/vgs88ugpvyhxu13wqgy0acvae6re",
  tinyCheckers: "https://cdn.ing/assets/files/record/286195/65efaknsw8kcpf9o3c2gybytsl5b",
  p6: "https://cdn.ing/assets/i/r/286196/6kl0rqnd6mjk8j7e525fo8fo0vkc/p6.webp"
};
var maskTop = "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)";
var maskBottom = "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)";
var maskCenter = "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)";
var maskTopLeft = "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)";
var maskTopRight = "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)";
var maskBottomLeft = "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)";
var maskBottomRight = "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)";
var circuitBoardPattern = (id, mask) => /* @__PURE__ */ jsxRuntime.jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "100",
          height: "100",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              "path",
              {
                d: "M0 50h40M60 50h40M50 0v40M50 60v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "1",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "3", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "0", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "100", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "0", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "100", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridDotsPattern = (id, mask) => /* @__PURE__ */ jsxRuntime.jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "40",
          height: "40",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              "path",
              {
                d: "M0 20h40M20 0v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "0.5",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "20", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridPattern = (size, mask) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: "h-full w-full bg-[linear-gradient(to_right,_hsl(var(--muted))_1px,_transparent_1px),linear-gradient(to_bottom,_hsl(var(--muted))_1px,_transparent_1px)]",
    style: {
      backgroundSize: `${size}px ${size}px`,
      ...mask ? {
        maskImage: mask,
        WebkitMaskImage: mask
      } : {}
    }
  }
);
var diagonalCrossPattern = (mask) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: "h-full w-full",
    style: {
      backgroundImage: "repeating-linear-gradient(45deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px), repeating-linear-gradient(135deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px)",
      ...mask ? {
        maskImage: mask,
        WebkitMaskImage: mask
      } : {}
    }
  }
);
var dashedGridMaskBase = "repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px), repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px)";
var dashedGridPattern = (fadeMask) => {
  const mask = fadeMask ? `${dashedGridMaskBase}, ${fadeMask}` : dashedGridMaskBase;
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: "h-full w-full",
      style: {
        backgroundImage: "linear-gradient(to right, hsl(var(--muted)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--muted)) 1px, transparent 1px)",
        backgroundSize: "20px 20px",
        backgroundPosition: "0 0, 0 0",
        maskImage: mask,
        WebkitMaskImage: mask,
        maskComposite: "intersect",
        WebkitMaskComposite: "source-in"
      }
    }
  );
};
var gradientGlow = (position) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: cn(
      "pointer-events-none absolute left-1/2 z-0 aspect-square w-3/4 -translate-x-1/2 rounded-full opacity-50 blur-3xl",
      position === "top" ? "-top-1/4" : "-bottom-1/4"
    ),
    style: {
      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
    }
  }
);
var spotlight = (position) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: cn(
      "pointer-events-none absolute top-1/2 z-0 aspect-square w-3/4 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
      position === "left" ? "-left-1/4" : "-right-1/4"
    ),
    style: {
      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
    }
  }
);
var patternOverlays = {
  circuitBoardBasic: () => circuitBoardPattern("circuit-board-basic"),
  circuitBoardFadeTop: () => circuitBoardPattern("circuit-board-fade-top", maskTop),
  circuitBoardFadeBottom: () => circuitBoardPattern("circuit-board-fade-bottom", maskBottom),
  circuitBoardFadeCenter: () => circuitBoardPattern("circuit-board-fade-center", maskCenter),
  circuitBoardFadeTopLeft: () => circuitBoardPattern("circuit-board-fade-top-left", maskTopLeft),
  circuitBoardFadeTopRight: () => circuitBoardPattern("circuit-board-fade-top-right", maskTopRight),
  circuitBoardFadeBottomLeft: () => circuitBoardPattern("circuit-board-fade-bottom-left", maskBottomLeft),
  circuitBoardFadeBottomRight: () => circuitBoardPattern("circuit-board-fade-bottom-right", maskBottomRight),
  dashedGridBasic: () => dashedGridPattern(),
  dashedGridFadeTop: () => dashedGridPattern(maskTop),
  dashedGridFadeBottom: () => dashedGridPattern(maskBottom),
  dashedGridFadeCenter: () => dashedGridPattern(maskCenter),
  dashedGridFadeTopLeft: () => dashedGridPattern(maskTopLeft),
  dashedGridFadeTopRight: () => dashedGridPattern(maskTopRight),
  dashedGridFadeBottomLeft: () => dashedGridPattern(maskBottomLeft),
  dashedGridFadeBottomRight: () => dashedGridPattern(maskBottomRight),
  diagonalCrossBasic: () => diagonalCrossPattern(),
  diagonalCrossFadeTop: () => diagonalCrossPattern(maskTop),
  diagonalCrossFadeBottom: () => diagonalCrossPattern(maskBottom),
  diagonalCrossFadeCenter: () => diagonalCrossPattern(maskCenter),
  diagonalCrossFadeTopLeft: () => diagonalCrossPattern(maskTopLeft),
  diagonalCrossFadeTopRight: () => diagonalCrossPattern(maskTopRight),
  diagonalCrossFadeBottomLeft: () => diagonalCrossPattern(maskBottomLeft),
  diagonalCrossFadeBottomRight: () => diagonalCrossPattern(maskBottomRight),
  gridBasic: () => gridPattern(40),
  gridFadeTop: () => gridPattern(32, maskTop),
  gridFadeBottom: () => gridPattern(32, maskBottom),
  gridFadeCenter: () => gridPattern(40, maskCenter),
  gridFadeTopLeft: () => gridPattern(32, maskTopLeft),
  gridFadeTopRight: () => gridPattern(32, maskTopRight),
  gridFadeBottomLeft: () => gridPattern(32, maskBottomLeft),
  gridFadeBottomRight: () => gridPattern(32, maskBottomRight),
  gridDotsBasic: () => gridDotsPattern("grid-dots-basic"),
  gridDotsFadeCenter: () => gridDotsPattern("grid-dots-fade-center", maskCenter),
  gradientGlowTop: () => gradientGlow("top"),
  gradientGlowBottom: () => gradientGlow("bottom"),
  spotlightLeft: () => spotlight("left"),
  spotlightRight: () => spotlight("right")
};
var inlinePatternStyles = {
  radialGradientTop: {
    background: "radial-gradient(125% 125% at 50% 10%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
  },
  radialGradientBottom: {
    background: "radial-gradient(125% 125% at 50% 90%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
  }
};
function PatternBackground({
  pattern,
  opacity = 0.08,
  className,
  style
}) {
  if (!pattern) {
    return null;
  }
  if (pattern in inlinePatternStyles) {
    const inlineStyle = inlinePatternStyles[pattern];
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: cn("pointer-events-none absolute inset-0 z-0", className),
        style: { ...inlineStyle, opacity, ...style },
        "aria-hidden": "true"
      }
    );
  }
  if (pattern in patternOverlays) {
    const Overlay = patternOverlays[pattern];
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: cn("pointer-events-none absolute inset-0 z-0", className),
        style: { opacity, ...style },
        "aria-hidden": "true",
        children: Overlay()
      }
    );
  }
  const patternUrl = pattern in patternSvgs ? patternSvgs[pattern] : pattern;
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: cn("pointer-events-none absolute inset-0 z-0", className),
      style: {
        backgroundImage: `url(${patternUrl})`,
        backgroundRepeat: "repeat",
        backgroundSize: "auto",
        opacity,
        ...style
      },
      "aria-hidden": "true"
    }
  );
}
function FaqSplitHero({
  heading,
  subheading,
  items,
  itemsSlot,
  imageSlot,
  imageSrc,
  imageAlt,
  background = "dark",
  pattern,
  patternOpacity,
  className,
  contentClassName,
  headerClassName,
  headingClassName,
  subheadingClassName,
  accordionClassName,
  accordionItemClassName,
  accordionTriggerClassName,
  accordionContentClassName,
  imageClassName,
  optixFlowConfig,
  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
}) {
  const bgColorClass = React.useMemo(() => {
    switch (background) {
      case "dark":
        return "bg-foreground text-background";
      case "gray":
        return "bg-muted/30";
      case "white":
        return "bg-background";
      default:
        return "bg-background";
    }
  }, [background]);
  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
  const itemsContent = React.useMemo(() => {
    if (itemsSlot) return itemsSlot;
    if (!items || items.length === 0) return null;
    return /* @__PURE__ */ jsxRuntime.jsx(
      Accordion,
      {
        type: "single",
        collapsible: true,
        className: cn("w-full", accordionClassName),
        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
          AccordionItem,
          {
            value: item.id,
            className: cn("border-b border-current/20", accordionItemClassName),
            children: [
              /* @__PURE__ */ jsxRuntime.jsx(
                AccordionTrigger,
                {
                  className: cn(
                    "py-4 text-left text-base font-medium transition-opacity hover:opacity-70 hover:no-underline lg:text-lg",
                    accordionTriggerClassName
                  ),
                  children: item.question
                }
              ),
              /* @__PURE__ */ jsxRuntime.jsx(
                AccordionContent,
                {
                  className: cn("pb-4 opacity-80", accordionContentClassName),
                  children: item.answer
                }
              )
            ]
          },
          item.id
        ))
      }
    );
  }, [
    itemsSlot,
    items,
    accordionClassName,
    accordionItemClassName,
    accordionTriggerClassName,
    accordionContentClassName
  ]);
  const contentArea = /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      className: cn(
        "relative flex w-full items-center lg:w-1/2",
        bgColorClass,
        contentClassName
      ),
      children: [
        pattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", headerClassName), children: [
            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
              "h2",
              {
                className: cn(
                  "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl",
                  headingClassName
                ),
                children: heading
              }
            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
              "p",
              {
                className: cn(
                  "text-base leading-relaxed opacity-80 sm:text-lg",
                  subheadingClassName
                ),
                children: subheading
              }
            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
          ] }),
          itemsContent
        ] }) })
      ]
    }
  );
  const imageArea = imageSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: imageSlot }) : imageSrc ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
    img.Img,
    {
      src: imageSrc,
      alt: imageAlt || "FAQ section image",
      className: cn("h-full w-full object-cover", imageClassName),
      optixFlowConfig
    }
  ) }) : null;
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("relative w-full overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-screen", mobileOrder, desktopOrder), children: [
    contentArea,
    imageArea
  ] }) });
}

exports.FaqSplitHero = FaqSplitHero;
