"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));
}
function AboutStatsShowcase({
  className,
  containerClassName,
  title,
  titleClassName,
  description,
  descriptionClassName,
  images,
  imagesSlot,
  imagesClassName,
  statsTitle = "We excel in our field, but skill isn't everything we offer.",
  statsTitleClassName,
  stats,
  statsSlot,
  statsClassName,
  logosTitle = "Trusted by leading product teams worldwide.",
  logosTitleClassName,
  logos,
  logosSlot,
  logosClassName,
  benefitsTitle = "See the Benefits Firsthand",
  benefitsTitleClassName,
  benefits,
  benefitsSlot,
  benefitsClassName,
  optixFlowConfig
}) {
  const renderImages = () => {
    if (imagesSlot) return imagesSlot;
    if (!images || images.length === 0) return null;
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-12", imagesClassName), 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
    )) });
  };
  const renderStats = () => {
    if (statsSlot) return statsSlot;
    if (!stats || stats.length === 0) return null;
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6 md:grid-cols-3", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
      stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }) : stat.value),
      stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.label }) : stat.label)
    ] }, idx)) });
  };
  const renderLogos = () => {
    if (logosSlot) return logosSlot;
    if (!logos || logos.length === 0) return null;
    return /* @__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: [
      logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl font-medium", logosTitleClassName), children: logosTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: logosTitleClassName, children: logosTitle })),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-x-7 gap-y-12 lg:grid-cols-4", logosClassName), 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
          }
        ),
        logo.name && (typeof logo.name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold md:text-4xl", children: logo.name }) : logo.name)
      ] }, idx)) })
    ] }) });
  };
  const renderBenefits = () => {
    if (benefitsSlot) return benefitsSlot;
    if (!benefits || benefits.length === 0) return null;
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-14", children: [
      benefitsTitle && (typeof benefitsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-center text-4xl font-semibold md:text-5xl", benefitsTitleClassName), children: benefitsTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: benefitsTitleClassName, children: benefitsTitle })),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", benefitsClassName), 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: [
          benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
          benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
          benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: benefit.stat.description }) : 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: [
            benefit.testimonial.logo && /* @__PURE__ */ jsxRuntime.jsx(
              img.Img,
              {
                src: benefit.testimonial.logo.src,
                alt: benefit.testimonial.logo.alt,
                className: "h-7 w-auto",
                optixFlowConfig
              }
            ),
            benefit.testimonial.company && (typeof benefit.testimonial.company === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: benefit.testimonial.company }) : benefit.testimonial.company)
          ] }),
          benefit.testimonial.quote && (typeof benefit.testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-sm", children: benefit.testimonial.quote }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.testimonial.quote })),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1", children: [
            benefit.testimonial.author && (typeof benefit.testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
              benefit.testimonial.author,
              ","
            ] }) : benefit.testimonial.author),
            benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: benefit.testimonial.role }) : benefit.testimonial.role)
          ] })
        ] })
      ] }, idx)) })
    ] });
  };
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-28", containerClassName), 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: [
        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-medium md:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
      ] }),
      renderImages()
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col gap-16", children: [
      statsTitle && (typeof statsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("max-w-3xl text-4xl font-medium md:text-5xl", statsTitleClassName), children: statsTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: statsTitleClassName, children: statsTitle })),
      renderStats()
    ] }),
    renderLogos(),
    renderBenefits()
  ] }) });
}

exports.AboutStatsShowcase = AboutStatsShowcase;
