"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';
import { jsx, jsxs } from 'react/jsx-runtime';

// components/blocks/stats/stats-bar-comparison.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var badgeVariants = cva(
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
function Badge({
  className,
  variant,
  asChild = false,
  ...props
}) {
  const Comp = asChild ? Slot : "span";
  return /* @__PURE__ */ jsx(
    Comp,
    {
      "data-slot": "badge",
      className: cn(badgeVariants({ variant }), className),
      ...props
    }
  );
}
var defaultComparisons = [
  {
    title: "Revenue Growth",
    bars: [
      { label: "Our Platform", value: 89, displayValue: "$2.4M", color: "bg-primary" },
      { label: "Industry Average", value: 34, displayValue: "$920K", color: "bg-muted-foreground/40" }
    ]
  },
  {
    title: "Customer Retention",
    bars: [
      { label: "Our Platform", value: 94, displayValue: "94%", color: "bg-emerald-500" },
      { label: "Industry Average", value: 67, displayValue: "67%", color: "bg-muted-foreground/40" }
    ]
  },
  {
    title: "Time to Value",
    bars: [
      { label: "Our Platform", value: 85, displayValue: "2 weeks", color: "bg-blue-500" },
      { label: "Industry Average", value: 35, displayValue: "8 weeks", color: "bg-muted-foreground/40" }
    ]
  },
  {
    title: "Support Response",
    bars: [
      { label: "Our Platform", value: 95, displayValue: "< 1 hour", color: "bg-amber-500" },
      { label: "Industry Average", value: 45, displayValue: "24 hours", color: "bg-muted-foreground/40" }
    ]
  }
];
function StatsBarComparison({
  className,
  badge = "Competitive Edge",
  heading = "How We Compare",
  description = "See how our platform outperforms industry standards across key metrics",
  comparisons = defaultComparisons,
  animate = true
}) {
  const [isVisible, setIsVisible] = React.useState(!animate);
  const sectionRef = React.useRef(null);
  React.useEffect(() => {
    if (!animate) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.2 }
    );
    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }
    return () => observer.disconnect();
  }, [animate]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: sectionRef,
      className: cn(
        "container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]",
        className
      ),
      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
        /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
          /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "mb-4", children: badge }),
          /* @__PURE__ */ jsx("h2", { className: "mb-4 text-3xl font-bold md:text-4xl", children: heading }),
          /* @__PURE__ */ jsx("p", { className: "mx-auto max-w-2xl text-muted-foreground", children: description })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "space-y-10", children: comparisons.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-6", children: [
          /* @__PURE__ */ jsx("h3", { className: "mb-6 text-lg font-semibold", children: group.title }),
          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: bar.label }),
              /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: bar.displayValue })
            ] }),
            /* @__PURE__ */ jsx("div", { className: "h-3 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
              "div",
              {
                className: cn(
                  "h-full rounded-full transition-all duration-1000 ease-out",
                  bar.color || "bg-primary"
                ),
                style: {
                  width: isVisible ? `${bar.value}%` : "0%",
                  transitionDelay: `${groupIndex * 100 + barIndex * 50}ms`
                }
              }
            ) })
          ] }, barIndex)) })
        ] }, groupIndex)) })
      ] })
    }
  );
}

export { StatsBarComparison };
//# sourceMappingURL=stats-bar-comparison.js.map
//# sourceMappingURL=stats-bar-comparison.js.map