"use client";
'use strict';

var react = require('react');
var framerMotion = require('framer-motion');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var jsxRuntime = require('react/jsx-runtime');

// components/blocks/reviews/testimonials-parallax-number.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var DEFAULT_TESTIMONIALS = [
  {
    id: "1",
    quote: "Transformed our entire creative process overnight.",
    author: "Sarah Chen",
    role: "Design Director",
    company: "Linear"
  },
  {
    id: "2",
    quote: "The most elegant solution we've ever implemented.",
    author: "Marcus Webb",
    role: "Creative Lead",
    company: "Vercel"
  },
  {
    id: "3",
    quote: "Pure craftsmanship in every single detail.",
    author: "Elena Frost",
    role: "Head of Product",
    company: "Stripe"
  }
];
function TestimonialsParallaxNumber({
  testimonials = DEFAULT_TESTIMONIALS,
  autoPlayInterval = 6e3,
  className
}) {
  const [activeIndex, setActiveIndex] = react.useState(0);
  const containerRef = react.useRef(null);
  const mouseX = framerMotion.useMotionValue(0);
  const mouseY = framerMotion.useMotionValue(0);
  const springConfig = { damping: 25, stiffness: 200 };
  const x = framerMotion.useSpring(mouseX, springConfig);
  const y = framerMotion.useSpring(mouseY, springConfig);
  const numberX = framerMotion.useTransform(x, [-200, 200], [-20, 20]);
  const numberY = framerMotion.useTransform(y, [-200, 200], [-10, 10]);
  const handleMouseMove = (e) => {
    const rect = containerRef.current?.getBoundingClientRect();
    if (rect) {
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;
      mouseX.set(e.clientX - centerX);
      mouseY.set(e.clientY - centerY);
    }
  };
  const goNext = react.useCallback(() => {
    setActiveIndex((prev) => (prev + 1) % testimonials.length);
  }, [testimonials.length]);
  const goPrev = react.useCallback(() => {
    setActiveIndex(
      (prev) => (prev - 1 + testimonials.length) % testimonials.length
    );
  }, [testimonials.length]);
  react.useEffect(() => {
    if (autoPlayInterval <= 0) return;
    const timer = setInterval(goNext, autoPlayInterval);
    return () => clearInterval(timer);
  }, [autoPlayInterval, goNext]);
  const current = testimonials[activeIndex];
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-16 md:py-24 overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container flex min-h-[500px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      ref: containerRef,
      className: "relative w-full max-w-5xl",
      onMouseMove: handleMouseMove,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          framerMotion.motion.div,
          {
            className: "pointer-events-none absolute -left-8 top-1/2 -translate-y-1/2 select-none text-[20rem] font-bold leading-none tracking-tighter text-foreground/[0.03]",
            style: { x: numberX, y: numberY },
            children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
              framerMotion.motion.span,
              {
                initial: { opacity: 0, scale: 0.8, filter: "blur(10px)" },
                animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
                exit: { opacity: 0, scale: 1.1, filter: "blur(10px)" },
                transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
                className: "block",
                children: String(activeIndex + 1).padStart(2, "0")
              },
              activeIndex
            ) })
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex", children: [
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center border-r border-border pr-16", children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              framerMotion.motion.span,
              {
                className: "text-xs font-mono tracking-widest text-muted-foreground uppercase",
                style: { writingMode: "vertical-rl", textOrientation: "mixed" },
                initial: { opacity: 0 },
                animate: { opacity: 1 },
                transition: { delay: 0.3 },
                children: "Testimonials"
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-8 h-32 w-px bg-border", children: /* @__PURE__ */ jsxRuntime.jsx(
              framerMotion.motion.div,
              {
                className: "absolute left-0 top-0 w-full origin-top bg-foreground",
                animate: {
                  height: `${(activeIndex + 1) / testimonials.length * 100}%`
                },
                transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] }
              }
            ) })
          ] }),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 py-12 pl-16", children: [
            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
              framerMotion.motion.div,
              {
                initial: { opacity: 0, x: -20 },
                animate: { opacity: 1, x: 0 },
                exit: { opacity: 0, x: 20 },
                transition: { duration: 0.4 },
                className: "mb-8",
                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 font-mono text-xs text-muted-foreground", children: [
                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 rounded-full bg-primary" }),
                  current.company
                ] })
              },
              activeIndex
            ) }),
            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mb-12 min-h-[140px]", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
              framerMotion.motion.blockquote,
              {
                className: "text-3xl font-light leading-[1.15] tracking-tight md:text-4xl lg:text-5xl",
                initial: "hidden",
                animate: "visible",
                exit: "exit",
                children: current.quote.split(" ").map((word, i) => /* @__PURE__ */ jsxRuntime.jsx(
                  framerMotion.motion.span,
                  {
                    className: "mr-[0.3em] inline-block",
                    variants: {
                      hidden: { opacity: 0, y: 20, rotateX: 90 },
                      visible: {
                        opacity: 1,
                        y: 0,
                        rotateX: 0,
                        transition: {
                          duration: 0.5,
                          delay: i * 0.05,
                          ease: [0.22, 1, 0.36, 1]
                        }
                      },
                      exit: {
                        opacity: 0,
                        y: -10,
                        transition: { duration: 0.2, delay: i * 0.02 }
                      }
                    },
                    children: word
                  },
                  i
                ))
              },
              activeIndex
            ) }) }),
            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between", children: [
              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
                framerMotion.motion.div,
                {
                  initial: { opacity: 0, y: 20 },
                  animate: { opacity: 1, y: 0 },
                  exit: { opacity: 0, y: -20 },
                  transition: { duration: 0.4, delay: 0.2 },
                  className: "flex items-center gap-4",
                  children: [
                    /* @__PURE__ */ jsxRuntime.jsx(
                      framerMotion.motion.div,
                      {
                        className: "h-px w-8 bg-foreground",
                        initial: { scaleX: 0 },
                        animate: { scaleX: 1 },
                        transition: { duration: 0.6, delay: 0.3 },
                        style: { originX: 0 }
                      }
                    ),
                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-medium", children: current.author }),
                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: current.role })
                    ] })
                  ]
                },
                activeIndex
              ) }),
              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
                /* @__PURE__ */ jsxRuntime.jsx(
                  framerMotion.motion.button,
                  {
                    onClick: goPrev,
                    className: "group relative flex size-12 items-center justify-center overflow-hidden rounded-full border border-border",
                    whileTap: { scale: 0.95 },
                    children: /* @__PURE__ */ jsxRuntime.jsx(
                      "svg",
                      {
                        width: "18",
                        height: "18",
                        viewBox: "0 0 16 16",
                        fill: "none",
                        className: "relative z-10 text-foreground transition-colors group-hover:text-foreground/70",
                        children: /* @__PURE__ */ jsxRuntime.jsx(
                          "path",
                          {
                            d: "M10 12L6 8L10 4",
                            stroke: "currentColor",
                            strokeWidth: "1.5",
                            strokeLinecap: "round",
                            strokeLinejoin: "round"
                          }
                        )
                      }
                    )
                  }
                ),
                /* @__PURE__ */ jsxRuntime.jsx(
                  framerMotion.motion.button,
                  {
                    onClick: goNext,
                    className: "group relative flex size-12 items-center justify-center overflow-hidden rounded-full border border-border",
                    whileTap: { scale: 0.95 },
                    children: /* @__PURE__ */ jsxRuntime.jsx(
                      "svg",
                      {
                        width: "18",
                        height: "18",
                        viewBox: "0 0 16 16",
                        fill: "none",
                        className: "relative z-10 text-foreground transition-colors group-hover:text-foreground/70",
                        children: /* @__PURE__ */ jsxRuntime.jsx(
                          "path",
                          {
                            d: "M6 4L10 8L6 12",
                            stroke: "currentColor",
                            strokeWidth: "1.5",
                            strokeLinecap: "round",
                            strokeLinejoin: "round"
                          }
                        )
                      }
                    )
                  }
                )
              ] })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute -bottom-20 left-0 right-0 overflow-hidden opacity-[0.08]", children: /* @__PURE__ */ jsxRuntime.jsx(
          framerMotion.motion.div,
          {
            className: "flex whitespace-nowrap text-6xl font-bold tracking-tight",
            animate: { x: [0, -1e3] },
            transition: {
              duration: 20,
              repeat: Infinity,
              ease: "linear"
            },
            children: [...Array(10)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mx-8", children: [
              testimonials.map((t) => t.company).join(" \u2022 "),
              " \u2022"
            ] }, i))
          }
        ) })
      ]
    }
  ) }) });
}

exports.TestimonialsParallaxNumber = TestimonialsParallaxNumber;
//# sourceMappingURL=testimonials-parallax-number.cjs.map
//# sourceMappingURL=testimonials-parallax-number.cjs.map