"use client";
'use strict';

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

// lib/utils.ts
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var defaultStats = [
  { value: "21M", label: "Global Reach of Users" },
  { value: "12+", label: "Years of Expertise" },
  { value: "654", label: "Projects Completed" },
  { value: "113k+", label: "Monthly Active Users" },
  { value: "461k", label: "Registered Accounts" },
  { value: "98+", label: "Daily Users" }
];
var defaultProps = {
  title: "Our Background",
  description: "Discover how our solution simplifies complex processes, making it easier to manage key operations and deliver exceptional experiences.",
  statsTitle: "We excel in our field, but skill isn't everything we offer.",
  stats: defaultStats,
  logosTitle: "Trusted by leading product teams worldwide.",
  benefitsTitle: "See the Benefits Firsthand"
};
function AboutStatsShowcase({
  className,
  title = defaultProps.title,
  description = defaultProps.description,
  images,
  statsTitle = defaultProps.statsTitle,
  stats = defaultProps.stats,
  logosTitle = defaultProps.logosTitle,
  logos,
  benefitsTitle = defaultProps.benefitsTitle,
  benefits,
  optixFlowConfig
}) {
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-28", children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col gap-10 text-center md:gap-24", children: [
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-6", children: [
        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-4xl font-medium md:text-6xl", children: title }),
        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg text-muted-foreground md:text-xl", children: description })
      ] }),
      images && images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-6 md:grid-cols-12", children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
        img.Img,
        {
          src: image.src,
          alt: image.alt,
          className: cn(
            "size-full max-h-96 rounded-xl object-cover",
            image.colSpan ? `md:col-span-${image.colSpan}` : "md:col-span-4"
          ),
          optixFlowConfig
        },
        idx
      )) })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col gap-16", children: [
      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-3xl text-4xl font-medium md:text-5xl", children: statsTitle }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 md:grid-cols-3", children: stats?.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }),
        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.label })
      ] }, idx)) })
    ] }),
    logos && logos.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted/50 py-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xl font-medium", children: logosTitle }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-x-7 gap-y-12 lg:grid-cols-4", children: logos.map((logo, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          img.Img,
          {
            src: logo.src,
            alt: logo.alt,
            className: "h-8 w-auto md:h-14",
            optixFlowConfig
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold md:text-4xl", children: logo.name })
      ] }, idx)) })
    ] }) }),
    benefits && benefits.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-14", children: [
      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-center text-4xl font-semibold md:text-5xl", children: benefitsTitle }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3", children: benefits.map((benefit, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
        benefit.image && /* @__PURE__ */ jsxRuntime.jsx(
          img.Img,
          {
            src: benefit.image.src,
            alt: benefit.image.alt,
            className: "max-h-96 w-full rounded-xl object-cover",
            optixFlowConfig
          }
        ),
        benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center rounded-xl bg-muted p-8", children: [
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: benefit.stat.description })
        ] }),
        benefit.testimonial && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl bg-background p-4", children: [
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              img.Img,
              {
                src: benefit.testimonial.logo.src,
                alt: benefit.testimonial.logo.alt,
                className: "h-7 w-auto",
                optixFlowConfig
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: benefit.testimonial.company })
          ] }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-sm", children: benefit.testimonial.quote }),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1", children: [
            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
              benefit.testimonial.author,
              ","
            ] }),
            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: benefit.testimonial.role })
          ] })
        ] })
      ] }, idx)) })
    ] })
  ] }) });
}

exports.AboutStatsShowcase = AboutStatsShowcase;
//# sourceMappingURL=about-stats-showcase.cjs.map
//# sourceMappingURL=about-stats-showcase.cjs.map