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

// components/blocks/service-detail/service-detail-sidebar-stats.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;
}

// 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 defaultProps = {
  title: "UX/UI Design",
  serviceIcon: {
    src: blockBrandedIconsAndPlaceholders.ux,
    alt: "UX/UI Design"
  },
  introTitle: "User-Centered Design That Converts",
  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.",
  services: [
    { icon: "lucide/users", title: "User research and persona development" },
    { icon: "lucide/map", title: "Information architecture and user journey mapping" },
    { icon: "lucide/pen-tool", title: "Wireframing and interactive prototyping" },
    { icon: "lucide/palette", title: "Visual design and brand integration" },
    { icon: "lucide/test-tube", title: "Usability testing and design validation" },
    { icon: "lucide/book-open", title: "Design system creation and documentation" }
  ],
  stats: [
    {
      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"
    }
  ],
  contentSections: [
    {
      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({
  className,
  title = defaultProps.title,
  serviceIcon = defaultProps.serviceIcon,
  introTitle = defaultProps.introTitle,
  introDescription = defaultProps.introDescription,
  services = defaultProps.services,
  stats = defaultProps.stats,
  contentSections = defaultProps.contentSections,
  optixFlowConfig
}) {
  return /* @__PURE__ */ jsxs("section", { className: cn("pb-32", className), children: [
    /* @__PURE__ */ jsx("div", { className: "bg-muted py-32", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
      serviceIcon && /* @__PURE__ */ jsx(
        Img,
        {
          src: serviceIcon.src,
          alt: serviceIcon.alt,
          className: "h-16 dark:invert",
          optixFlowConfig
        }
      ),
      /* @__PURE__ */ jsx("h1", { className: "text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", children: title })
    ] }) }) }),
    /* @__PURE__ */ jsx("div", { className: "py-16", children: /* @__PURE__ */ jsx("div", { className: "container max-w-5xl", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
      /* @__PURE__ */ jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxs("div", { className: "prose prose-sm max-w-none dark:prose-invert", children: [
        /* @__PURE__ */ jsx("h2", { children: introTitle }),
        /* @__PURE__ */ jsx("p", { children: introDescription }),
        contentSections?.map((section, sectionIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
          /* @__PURE__ */ jsx("h2", { children: section.title }),
          section.paragraphs.map((paragraph, paragraphIndex) => /* @__PURE__ */ jsx("p", { children: paragraph }, paragraphIndex))
        ] }, sectionIndex)),
        services && services.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx("h2", { children: "Our UX/UI Design Services" }),
          /* @__PURE__ */ jsx("div", { className: "space-y-3", children: services.map((service, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ jsx(
              DynamicIcon,
              {
                name: service.icon,
                size: 20,
                className: "text-primary"
              }
            ),
            /* @__PURE__ */ jsx("span", { children: service.title })
          ] }, index)) })
        ] })
      ] }) }),
      /* @__PURE__ */ jsx("div", { className: "lg:col-span-1", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-6 lg:sticky lg:top-8", children: [
        /* @__PURE__ */ jsx("h3", { className: "mb-6 text-lg font-semibold", children: "Our Expertise" }),
        /* @__PURE__ */ jsx("div", { className: "space-y-6", children: stats?.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
          /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
            Img,
            {
              src: stat.icon,
              alt: stat.title,
              className: "h-6 w-6 object-contain",
              optixFlowConfig
            }
          ) }),
          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: stat.title }),
            /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: stat.description })
          ] })
        ] }, index)) })
      ] }) })
    ] }) }) })
  ] });
}

export { ServiceDetailSidebarStats };
//# sourceMappingURL=service-detail-sidebar-stats.js.map
//# sourceMappingURL=service-detail-sidebar-stats.js.map