"use client";
import * as React from 'react';
import { useState, useCallback, useEffect } from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import * as AvatarPrimitive from '@radix-ui/react-avatar';

// components/blocks/reviews/testimonials-minimal-numbered.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;
}
function Avatar({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AvatarPrimitive.Root,
    {
      "data-slot": "avatar",
      className: cn(
        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
        className
      ),
      ...props
    }
  );
}
function AvatarImage({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AvatarPrimitive.Image,
    {
      "data-slot": "avatar-image",
      className: cn("aspect-square size-full", className),
      ...props
    }
  );
}
function AvatarFallback({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AvatarPrimitive.Fallback,
    {
      "data-slot": "avatar-fallback",
      className: cn(
        "bg-muted flex size-full items-center justify-center rounded-full",
        className
      ),
      ...props
    }
  );
}

// lib/blockBrandedIconsAndPlaceholders.ts
var blockBrandedIconsAndPlaceholders = {
  avatar1: "https://cdn.ing/assets/i/r/286239/ebm7o3j2kx48vw98emnwjaf5qvl6/avatar-1.webp",
  avatar2: "https://cdn.ing/assets/i/r/286240/vgf3rrkwn0769pfdtpal60uo5vpw/avatar-2.webp",
  avatar3: "https://cdn.ing/assets/i/r/286241/05vbqt3lls0q974r8fv4zn0njllq/avatar-3.webp"};
var DEFAULT_TESTIMONIALS = [
  {
    id: "1",
    quote: "This platform has completely transformed how we approach our daily operations. The intuitive design and powerful features have made our team significantly more productive.",
    author: {
      name: "Sarah Chen",
      role: "Design Director",
      company: "Linear",
      avatar: blockBrandedIconsAndPlaceholders.avatar1
    }
  },
  {
    id: "2",
    quote: "The most elegant solution we've ever implemented. Every detail has been thoughtfully considered, and the results speak for themselves.",
    author: {
      name: "Marcus Webb",
      role: "Creative Lead",
      company: "Vercel",
      avatar: blockBrandedIconsAndPlaceholders.avatar2
    }
  },
  {
    id: "3",
    quote: "Pure craftsmanship in every single detail. The attention to quality is evident throughout the entire experience.",
    author: {
      name: "Elena Frost",
      role: "Head of Product",
      company: "Stripe",
      avatar: blockBrandedIconsAndPlaceholders.avatar3
    }
  }
];
function TestimonialsMinimalNumbered({
  testimonials = DEFAULT_TESTIMONIALS,
  autoPlayInterval = 5e3,
  className
}) {
  const [active, setActive] = useState(0);
  const [isTransitioning, setIsTransitioning] = useState(false);
  const handleChange = useCallback(
    (index) => {
      if (index === active || isTransitioning) return;
      setIsTransitioning(true);
      setTimeout(() => {
        setActive(index);
        setIsTransitioning(false);
      }, 300);
    },
    [active, isTransitioning]
  );
  const handlePrev = useCallback(() => {
    const newIndex = (active - 1 + testimonials.length) % testimonials.length;
    handleChange(newIndex);
  }, [active, testimonials.length, handleChange]);
  const handleNext = useCallback(() => {
    const newIndex = (active + 1) % testimonials.length;
    handleChange(newIndex);
  }, [active, testimonials.length, handleChange]);
  useEffect(() => {
    if (autoPlayInterval <= 0) return;
    const interval = setInterval(handleNext, autoPlayInterval);
    return () => clearInterval(interval);
  }, [autoPlayInterval, handleNext]);
  const current = testimonials[active];
  return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "container max-w-4xl", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-8", children: [
      /* @__PURE__ */ jsx(
        "span",
        {
          className: "text-8xl font-light leading-none text-foreground/10 select-none transition-all duration-500 md:text-9xl",
          style: { fontFeatureSettings: '"tnum"' },
          children: String(active + 1).padStart(2, "0")
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-6", children: [
        /* @__PURE__ */ jsx(
          "blockquote",
          {
            className: cn(
              "text-xl font-light leading-relaxed tracking-tight transition-all duration-300 md:text-2xl lg:text-3xl",
              isTransitioning ? "opacity-0 translate-x-4" : "opacity-100 translate-x-0"
            ),
            children: current.quote
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "mt-10 transition-all duration-300 delay-100",
              isTransitioning ? "opacity-0" : "opacity-100"
            ),
            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
              /* @__PURE__ */ jsxs(Avatar, { className: "size-12 ring-2 ring-foreground/10", children: [
                /* @__PURE__ */ jsx(
                  AvatarImage,
                  {
                    src: current.author.avatar,
                    alt: current.author.name
                  }
                ),
                /* @__PURE__ */ jsx(AvatarFallback, { children: current.author.name.split(" ").map((n) => n[0]).join("") })
              ] }),
              /* @__PURE__ */ jsxs("div", { children: [
                /* @__PURE__ */ jsx("p", { className: "font-medium", children: current.author.name }),
                /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
                  current.author.role,
                  current.author.company && /* @__PURE__ */ jsxs(Fragment, { children: [
                    /* @__PURE__ */ jsx("span", { className: "mx-2 text-foreground/20", children: "/" }),
                    /* @__PURE__ */ jsx("span", { children: current.author.company })
                  ] })
                ] })
              ] })
            ] })
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "mt-16 flex items-center justify-between", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: testimonials.map((_, index) => /* @__PURE__ */ jsx(
          "button",
          {
            onClick: () => handleChange(index),
            className: "group relative py-4",
            children: /* @__PURE__ */ jsx(
              "span",
              {
                className: cn(
                  "block h-px transition-all duration-500 ease-out",
                  index === active ? "w-12 bg-foreground" : "w-6 bg-foreground/20 group-hover:w-8 group-hover:bg-foreground/40"
                )
              }
            )
          },
          index
        )) }),
        /* @__PURE__ */ jsxs("span", { className: "text-xs tracking-widest text-muted-foreground uppercase", children: [
          String(active + 1).padStart(2, "0"),
          " /",
          " ",
          String(testimonials.length).padStart(2, "0")
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
        /* @__PURE__ */ jsx(
          "button",
          {
            onClick: handlePrev,
            className: "rounded-full p-2 text-foreground/40 transition-all duration-300 hover:bg-foreground/5 hover:text-foreground",
            children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
          }
        ),
        /* @__PURE__ */ jsx(
          "button",
          {
            onClick: handleNext,
            className: "rounded-full p-2 text-foreground/40 transition-all duration-300 hover:bg-foreground/5 hover:text-foreground",
            children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
          }
        )
      ] })
    ] })
  ] }) });
}

export { TestimonialsMinimalNumbered };
//# sourceMappingURL=testimonials-minimal-numbered.js.map
//# sourceMappingURL=testimonials-minimal-numbered.js.map