"use client";
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Img } from '@page-speed/img';
import * as React from 'react';
import React__default from 'react';
import { jsx, jsxs, Fragment } 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;
}

// lib/blockBrandedIconsAndPlaceholders.ts
var blockBrandedIconsAndPlaceholders = {
  ux: "https://cdn.ing/assets/files/record/286285/q7zi0j433fhs847rfbc82uaqydga",
  integration1: "https://cdn.ing/assets/files/record/286279/pdea2kfgyhj0nqmnhjn353lsg8uq",
  integration2: "https://cdn.ing/assets/files/record/286278/hlt44ls2hz36f879juirltggnxe7",
  integration3: "https://cdn.ing/assets/files/record/286277/mnd352db8b4yw19lraw6w29pyrub"};
var maxWidthStyles = {
  sm: "max-w-screen-sm",
  md: "max-w-screen-md",
  lg: "max-w-screen-lg",
  xl: "max-w-7xl",
  "2xl": "max-w-screen-2xl",
  "4xl": "max-w-[1536px]",
  full: "max-w-full"
};
var Container = React__default.forwardRef(
  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
    const Component = as;
    return /* @__PURE__ */ jsx(
      Component,
      {
        ref,
        className: cn(
          "mx-auto w-full px-2 sm:px-4 lg:px-8",
          maxWidthStyles[maxWidth],
          className
        ),
        ...props,
        children
      }
    );
  }
);
Container.displayName = "Container";

// 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__ */ jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "100",
          height: "100",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsx(
              "path",
              {
                d: "M0 50h40M60 50h40M50 0v40M50 60v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "1",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "3", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsx("circle", { cx: "0", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsx("circle", { cx: "100", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "0", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "100", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridDotsPattern = (id, mask) => /* @__PURE__ */ jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "40",
          height: "40",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsx(
              "path",
              {
                d: "M0 20h40M20 0v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "0.5",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridPattern = (size, mask) => /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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"
    }
  );
}
var backgroundStyles = {
  white: "bg-background text-foreground",
  gray: "bg-muted/30 text-foreground",
  dark: "bg-foreground text-background",
  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
  primary: "bg-primary text-primary-foreground",
  secondary: "bg-secondary text-secondary-foreground",
  muted: "bg-muted text-muted-foreground"
};
var spacingStyles = {
  none: "py-0 md:py-0",
  sm: "py-12 md:py-16",
  md: "py-16 md:py-24",
  lg: "py-20 md:py-32",
  xl: "py-24 md:py-40"
};
var Section = React__default.forwardRef(
  ({
    id,
    title,
    subtitle,
    children,
    className,
    style,
    background = "white",
    spacing = "lg",
    pattern,
    patternOpacity,
    patternClassName,
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsxs(
      "section",
      {
        ref,
        id,
        className: cn(
          "relative",
          pattern ? "overflow-hidden" : null,
          backgroundStyles[background],
          spacingStyles[spacing],
          className
        ),
        style,
        ...props,
        children: [
          /* @__PURE__ */ jsx(
            PatternBackground,
            {
              pattern,
              opacity: patternOpacity,
              className: patternClassName
            }
          ),
          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
            ] }),
            children
          ] })
        ]
      }
    );
  }
);
Section.displayName = "Section";
var defaultServices = [
  { iconName: "lucide/users", title: "User research and persona development" },
  { iconName: "lucide/map", title: "Information architecture and user journey mapping" },
  { iconName: "lucide/pen-tool", title: "Wireframing and interactive prototyping" },
  { iconName: "lucide/palette", title: "Visual design and brand integration" },
  { iconName: "lucide/test-tube", title: "Usability testing and design validation" },
  { iconName: "lucide/book-open", title: "Design system creation and documentation" }
];
var defaultStats = [
  {
    icon: blockBrandedIconsAndPlaceholders.integration1,
    title: "Adobe Creative Suite",
    description: "Design proficiency"
  },
  {
    icon: blockBrandedIconsAndPlaceholders.integration2,
    title: "Figma",
    description: "Years experience"
  },
  {
    icon: blockBrandedIconsAndPlaceholders.integration3,
    title: "Sketch",
    description: "Projects completed"
  }
];
var defaultContentSections = [
  {
    title: "Creating Meaningful Digital Experiences",
    paragraphs: [
      "We combine user research, information architecture, and visual design to deliver experiences that drive engagement and conversions.",
      "Through comprehensive user research and testing, we validate design decisions with real data. Our iterative design process ensures that every element serves a purpose and contributes to your business goals while providing an exceptional user experience.",
      "We specialize in creating design systems that scale with your business, ensuring consistency across all touchpoints while maintaining flexibility for future growth and evolution.",
      "Our collaborative approach involves stakeholders throughout the design process, from initial wireframes to final prototypes. This ensures alignment between business objectives and user needs, resulting in products that succeed in the market.",
      "Every design decision is backed by research and testing, creating solutions that are not just visually appealing but strategically sound and user-validated."
    ]
  },
  {
    title: "Strategic Design for Business Success",
    paragraphs: [
      "Our design philosophy centers on creating interfaces that bridge the gap between user needs and business objectives. We understand that great UX/UI design is not just about aesthetics\u2014it's about creating meaningful interactions that drive results.",
      "From initial concept to final implementation, we ensure that every design element contributes to a cohesive user experience that reflects your brand values and supports your business goals. Our designs are optimized for performance, accessibility, and scalability across all devices and platforms."
    ]
  }
];
function ServiceDetailSidebarStats({
  title = "UX/UI Design",
  titleClassName,
  serviceIcon = {
    src: blockBrandedIconsAndPlaceholders.ux,
    alt: "UX/UI Design"
  },
  serviceIconSlot,
  serviceIconClassName,
  introTitle = "User-Centered Design That Converts",
  introTitleClassName,
  introDescription = "We believe that great design should be intuitive, accessible, and purposeful for every user who interacts with your product. Our UX/UI design approach focuses on understanding your users' needs, behaviors, and pain points to create interfaces that not only look beautiful but function seamlessly.",
  introDescriptionClassName,
  servicesTitle = "Our UX/UI Design Services",
  servicesTitleClassName,
  services = defaultServices,
  servicesSlot,
  servicesClassName,
  statsTitle = "Our Expertise",
  statsTitleClassName,
  stats = defaultStats,
  statsSlot,
  statsClassName,
  contentSections = defaultContentSections,
  contentSectionsSlot,
  contentSectionsClassName,
  className,
  headerClassName,
  containerClassName,
  mainColumnClassName,
  sidebarClassName,
  headerBackground = "muted",
  bodyBackground,
  bodySpacing,
  bodyPattern,
  bodyPatternOpacity,
  optixFlowConfig
}) {
  const renderServiceIcon = () => {
    if (serviceIconSlot) return serviceIconSlot;
    if (!serviceIcon) return null;
    return /* @__PURE__ */ jsx(
      Img,
      {
        src: serviceIcon.src,
        alt: serviceIcon.alt,
        className: cn("h-16 dark:invert", serviceIconClassName),
        optixFlowConfig
      }
    );
  };
  const renderContentSections = () => {
    if (contentSectionsSlot) return contentSectionsSlot;
    if (!contentSections || contentSections.length === 0) return null;
    return /* @__PURE__ */ jsx(Fragment, { children: contentSections.map((section, sectionIndex) => /* @__PURE__ */ jsx("div", { className: section.className, children: section.contentSlot ? section.contentSlot : /* @__PURE__ */ jsxs(Fragment, { children: [
      section.title && /* @__PURE__ */ jsx("h2", { children: typeof section.title === "string" ? section.title : section.title }),
      section.paragraphs?.map(
        (paragraph, paragraphIndex) => typeof paragraph === "string" ? /* @__PURE__ */ jsx("p", { children: paragraph }, paragraphIndex) : /* @__PURE__ */ jsx("div", { children: paragraph }, paragraphIndex)
      )
    ] }) }, sectionIndex)) });
  };
  const renderServices = () => {
    if (servicesSlot) return servicesSlot;
    if (!services || services.length === 0) return null;
    return /* @__PURE__ */ jsxs("div", { className: servicesClassName, children: [
      servicesTitle && /* @__PURE__ */ jsx("h2", { className: servicesTitleClassName, children: typeof servicesTitle === "string" ? servicesTitle : servicesTitle }),
      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: services.map((service, index) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", service.className), children: [
        service.icon ? service.icon : service.iconName ? /* @__PURE__ */ jsx(
          DynamicIcon,
          {
            name: service.iconName,
            size: 20,
            className: "text-primary"
          }
        ) : null,
        service.title && /* @__PURE__ */ jsx("span", { children: typeof service.title === "string" ? service.title : service.title })
      ] }, index)) })
    ] });
  };
  const renderStats = () => {
    if (statsSlot) return statsSlot;
    if (!stats || stats.length === 0) return null;
    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg bg-muted/50 p-6 lg:sticky lg:top-8", statsClassName), children: [
      statsTitle && /* @__PURE__ */ jsx("h3", { className: cn("mb-6 text-lg font-semibold", statsTitleClassName), children: typeof statsTitle === "string" ? statsTitle : statsTitle }),
      /* @__PURE__ */ jsx("div", { className: "space-y-6", children: stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", stat.className), children: [
        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center", children: stat.iconSlot ? stat.iconSlot : stat.icon ? /* @__PURE__ */ jsx(
          Img,
          {
            src: stat.icon,
            alt: typeof stat.title === "string" ? stat.title : "",
            className: "h-6 w-6 object-contain",
            optixFlowConfig
          }
        ) : null }),
        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
          stat.title && /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: typeof stat.title === "string" ? stat.title : stat.title }),
          stat.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: typeof stat.description === "string" ? stat.description : stat.description })
        ] })
      ] }, index)) })
    ] });
  };
  return /* @__PURE__ */ jsxs("div", { className, children: [
    /* @__PURE__ */ jsx(Section, { background: headerBackground, spacing: "lg", children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-center gap-4", headerClassName), children: [
      renderServiceIcon(),
      title && /* @__PURE__ */ jsx(
        "h1",
        {
          className: cn(
            "text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl",
            titleClassName
          ),
          children: typeof title === "string" ? title : title
        }
      )
    ] }) }),
    /* @__PURE__ */ jsx(
      Section,
      {
        background: bodyBackground,
        spacing: bodySpacing,
        pattern: bodyPattern,
        patternOpacity: bodyPatternOpacity,
        children: /* @__PURE__ */ jsx("div", { className: cn("max-w-5xl mx-auto", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
          /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-2", mainColumnClassName), children: /* @__PURE__ */ jsxs(
            "div",
            {
              className: cn(
                "prose prose-sm max-w-none dark:prose-invert",
                contentSectionsClassName
              ),
              children: [
                introTitle && /* @__PURE__ */ jsx("h2", { className: introTitleClassName, children: typeof introTitle === "string" ? introTitle : introTitle }),
                introDescription && /* @__PURE__ */ jsx("p", { className: introDescriptionClassName, children: typeof introDescription === "string" ? introDescription : introDescription }),
                renderContentSections(),
                renderServices()
              ]
            }
          ) }),
          /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-1", sidebarClassName), children: renderStats() })
        ] }) })
      }
    )
  ] });
}

export { ServiceDetailSidebarStats };
