"use client";
import * as React9 from 'react';
import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
import { motion, AnimatePresence, Reorder, useMotionValue as useMotionValue$1, useTransform as useTransform$1, useSpring } from 'motion/react';
import { cn as cn$1 } from '@/lib/utils';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { cn } from '@hanzo/ui/lib/utils';
import { Avatar, AvatarImage, AvatarFallback } from '@hanzo/ui/primitives/avatar';
import { Card, CardContent, Button } from '@hanzo/ui';
import { AnimatePresence as AnimatePresence$1, motion as motion$1, useMotionValue, useTransform } from 'framer-motion';
import { ChevronLeft, ChevronRight } from 'lucide-react';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
function usePrefersReducedMotion() {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
  useEffect(() => {
    if (typeof window === "undefined") return;
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    setPrefersReducedMotion(mediaQuery.matches);
    const handleChange = /* @__PURE__ */ __name((event) => {
      setPrefersReducedMotion(event.matches);
    }, "handleChange");
    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, []);
  return prefersReducedMotion;
}
__name(usePrefersReducedMotion, "usePrefersReducedMotion");
function GradientBackground({
  colors,
  speed,
  intensity,
  paused
}) {
  const gradientColors = colors.length >= 2 ? colors : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
  return /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "absolute inset-0",
      style: {
        background: `linear-gradient(-45deg, ${gradientColors.join(", ")})`,
        backgroundSize: "400% 400%"
      },
      animate: paused ? {} : {
        x: ["0%", "100%", "0%"]
      },
      transition: {
        duration: 10 / speed,
        repeat: Infinity,
        ease: "linear"
      }
    }
  );
}
__name(GradientBackground, "GradientBackground");
function BlobBackground({
  colors,
  speed,
  elementCount,
  intensity,
  paused
}) {
  const blobs = useMemo(
    () => Array.from({ length: elementCount }, (_, i) => ({
      id: i,
      color: colors[i % colors.length],
      size: Math.random() * 200 + 100,
      x: Math.random() * 100,
      y: Math.random() * 100,
      duration: (Math.random() * 10 + 10) / speed
    })),
    [elementCount, colors, speed]
  );
  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: blobs.map((blob) => /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "absolute rounded-full",
      style: {
        background: `radial-gradient(circle, ${blob.color}40, transparent)`,
        width: blob.size * intensity,
        height: blob.size * intensity,
        filter: "blur(40px)"
      },
      initial: {
        x: `${blob.x}%`,
        y: `${blob.y}%`
      },
      animate: paused ? {} : {
        x: [`${blob.x}%`, `${(blob.x + 50) % 100}%`, `${blob.x}%`],
        y: [`${blob.y}%`, `${(blob.y + 30) % 100}%`, `${blob.y}%`],
        scale: [1, 1.2, 1]
      },
      transition: {
        duration: blob.duration,
        repeat: Infinity,
        ease: "easeInOut"
      }
    },
    blob.id
  )) });
}
__name(BlobBackground, "BlobBackground");
function WaveBackground({
  colors,
  speed,
  intensity,
  paused
}) {
  const waveColor = colors[0] || "#4ecdc4";
  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "absolute inset-0",
      style: {
        background: `radial-gradient(ellipse 100% 50% at center ${50 + index * 20}%, ${waveColor}${Math.round(
          30 * intensity
        ).toString(16).padStart(2, "0")}, transparent)`
      },
      animate: paused ? {} : {
        y: [index * 10, index * 10 + 20 * intensity, index * 10]
      },
      transition: {
        duration: (3 + index) / speed,
        repeat: Infinity,
        ease: "easeInOut"
      }
    },
    index
  )) });
}
__name(WaveBackground, "WaveBackground");
function MeshBackground({
  colors,
  speed,
  intensity,
  paused
}) {
  const meshColors = colors.length >= 4 ? colors.slice(0, 4) : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: meshColors.map((color, index) => /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "absolute rounded-full",
      style: {
        background: `radial-gradient(circle, ${color}60, transparent)`,
        width: `${60 + index * 20}%`,
        height: `${60 + index * 20}%`,
        filter: "blur(60px)",
        mixBlendMode: "multiply"
      },
      initial: {
        x: `${25 + index * 15}%`,
        y: `${25 + index * 15}%`
      },
      animate: paused ? {} : {
        x: [
          `${25 + index * 15}%`,
          `${35 + index * 15}%`,
          `${25 + index * 15}%`
        ],
        y: [
          `${25 + index * 15}%`,
          `${15 + index * 15}%`,
          `${25 + index * 15}%`
        ],
        rotate: [0, 180, 360]
      },
      transition: {
        duration: (8 + index * 2) / speed,
        repeat: Infinity,
        ease: "easeInOut"
      }
    },
    index
  )) });
}
__name(MeshBackground, "MeshBackground");
function ParallaxBackground({
  layers,
  speed,
  paused
}) {
  const mouseX = useMotionValue$1(0);
  const mouseY = useMotionValue$1(0);
  useEffect(() => {
    const handleMouseMove = /* @__PURE__ */ __name((e) => {
      const { clientX, clientY } = e;
      const { innerWidth, innerHeight } = window;
      mouseX.set((clientX / innerWidth - 0.5) * 100);
      mouseY.set((clientY / innerHeight - 0.5) * 100);
    }, "handleMouseMove");
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, [mouseX, mouseY]);
  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: layers.map((layer, index) => {
    const x = useTransform$1(
      mouseX,
      [-50, 50],
      [-layer.speed * 10, layer.speed * 10]
    );
    const y = useTransform$1(
      mouseY,
      [-50, 50],
      [-layer.speed * 10, layer.speed * 10]
    );
    return /* @__PURE__ */ jsx(
      motion.div,
      {
        className: "absolute inset-0",
        style: {
          background: `radial-gradient(circle, ${layer.color}, transparent)`,
          opacity: layer.opacity,
          x: paused ? 0 : x,
          y: paused ? 0 : y
        }
      },
      index
    );
  }) });
}
__name(ParallaxBackground, "ParallaxBackground");
function ParticlesBackground({
  colors,
  speed,
  elementCount,
  intensity,
  paused
}) {
  const particles = useMemo(
    () => Array.from({ length: elementCount }, (_, i) => ({
      id: i,
      color: colors[i % colors.length],
      size: Math.random() * 4 + 2,
      x: Math.random() * 100,
      y: Math.random() * 100,
      duration: (Math.random() * 20 + 20) / speed,
      delay: Math.random() * 5
    })),
    [elementCount, colors, speed]
  );
  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: particles.map((particle) => /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "absolute rounded-full",
      style: {
        backgroundColor: particle.color,
        width: particle.size * intensity,
        height: particle.size * intensity,
        opacity: 0.6
      },
      initial: {
        x: `${particle.x}%`,
        y: `${particle.y}%`
      },
      animate: paused ? {} : {
        y: [`${particle.y}%`, `${particle.y - 100}%`],
        opacity: [0, 0.6, 0]
      },
      transition: {
        duration: particle.duration,
        repeat: Infinity,
        delay: particle.delay,
        ease: "linear"
      }
    },
    particle.id
  )) });
}
__name(ParticlesBackground, "ParticlesBackground");
function AnimatedBackground({
  animation = "gradient",
  speed = 1,
  colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"],
  paused = false,
  className,
  style,
  children,
  intensity = 1,
  blur = false,
  blurAmount = 20,
  opacity = 1,
  elementCount = 5,
  width = "100%",
  height = "100%",
  fullscreen = false,
  parallaxLayers = [
    { speed: 0.5, color: "#ff6b6b50", opacity: 0.3 },
    { speed: 1, color: "#4ecdc450", opacity: 0.4 },
    { speed: 1.5, color: "#45b7d150", opacity: 0.3 }
  ]
}) {
  const prefersReducedMotion = usePrefersReducedMotion();
  const isAnimationPaused = paused || prefersReducedMotion;
  const containerStyle = useMemo(
    () => ({
      width: fullscreen ? "100vw" : width,
      height: fullscreen ? "100vh" : height,
      opacity,
      filter: blur ? `blur(${blurAmount}px)` : void 0,
      ...style
    }),
    [fullscreen, width, height, opacity, blur, blurAmount, style]
  );
  const renderAnimation = /* @__PURE__ */ __name(() => {
    const props = { colors, speed, intensity, paused: isAnimationPaused };
    switch (animation) {
      case "blob":
        return /* @__PURE__ */ jsx(BlobBackground, { ...props, elementCount });
      case "wave":
        return /* @__PURE__ */ jsx(WaveBackground, { ...props });
      case "mesh":
        return /* @__PURE__ */ jsx(MeshBackground, { ...props });
      case "parallax":
        return /* @__PURE__ */ jsx(
          ParallaxBackground,
          {
            layers: parallaxLayers,
            speed,
            paused: isAnimationPaused
          }
        );
      case "particles":
        return /* @__PURE__ */ jsx(ParticlesBackground, { ...props, elementCount });
      default:
        return /* @__PURE__ */ jsx(GradientBackground, { ...props });
    }
  }, "renderAnimation");
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn$1(
        "relative overflow-hidden",
        fullscreen && "fixed inset-0 z-0",
        className
      ),
      style: containerStyle,
      children: [
        renderAnimation(),
        children && /* @__PURE__ */ jsx("div", { className: "relative z-10 h-full w-full", children })
      ]
    }
  );
}
__name(AnimatedBackground, "AnimatedBackground");
var AnimatedBeam = React9.forwardRef(
  ({
    className,
    duration = 3,
    delay = 0,
    pathColor = "gray",
    pathWidth = 2,
    gradientStartColor = "#18CCFC",
    gradientStopColor = "#6344F5",
    containerRef,
    fromRef,
    toRef,
    ...props
  }, ref) => {
    const [pathD, setPathD] = React9.useState("");
    React9.useEffect(() => {
      if (!containerRef?.current || !fromRef?.current || !toRef?.current) return;
      const updatePath = /* @__PURE__ */ __name(() => {
        const containerRect = containerRef.current.getBoundingClientRect();
        const fromRect = fromRef.current.getBoundingClientRect();
        const toRect = toRef.current.getBoundingClientRect();
        const fromX = fromRect.left - containerRect.left + fromRect.width / 2;
        const fromY = fromRect.top - containerRect.top + fromRect.height / 2;
        const toX = toRect.left - containerRect.left + toRect.width / 2;
        const toY = toRect.top - containerRect.top + toRect.height / 2;
        const controlX = (fromX + toX) / 2;
        const controlY = Math.min(fromY, toY) - 50;
        setPathD(`M ${fromX} ${fromY} Q ${controlX} ${controlY} ${toX} ${toY}`);
      }, "updatePath");
      updatePath();
      window.addEventListener("resize", updatePath);
      return () => window.removeEventListener("resize", updatePath);
    }, [containerRef, fromRef, toRef]);
    return /* @__PURE__ */ jsxs(
      "svg",
      {
        ref,
        className: cn("pointer-events-none absolute inset-0", className),
        ...props,
        children: [
          /* @__PURE__ */ jsx(
            "path",
            {
              d: pathD,
              stroke: pathColor,
              strokeWidth: pathWidth,
              fill: "none",
              strokeOpacity: 0.2
            }
          ),
          /* @__PURE__ */ jsx(
            motion.path,
            {
              d: pathD,
              stroke: `url(#gradient-${gradientStartColor}-${gradientStopColor})`,
              strokeWidth: pathWidth,
              fill: "none",
              initial: { pathLength: 0 },
              animate: { pathLength: 1 },
              transition: {
                duration,
                delay,
                ease: "easeInOut",
                repeat: Infinity
              }
            }
          ),
          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
            "linearGradient",
            {
              id: `gradient-${gradientStartColor}-${gradientStopColor}`,
              x1: "0%",
              y1: "0%",
              x2: "100%",
              y2: "0%",
              children: [
                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: gradientStartColor }),
                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradientStopColor })
              ]
            }
          ) })
        ]
      }
    );
  }
);
AnimatedBeam.displayName = "AnimatedBeam";
var INTERACTIVE_SELECTORS = [
  "a",
  "button",
  "input",
  "textarea",
  "select",
  '[role="button"]',
  '[role="link"]',
  '[tabindex]:not([tabindex="-1"])',
  ".cursor-pointer",
  '[data-cursor="pointer"]'
].join(", ");
var TEXT_SELECTORS = [
  'input[type="text"]',
  'input[type="email"]',
  'input[type="password"]',
  'input[type="search"]',
  "textarea",
  '[contenteditable="true"]',
  '[data-cursor="text"]'
].join(", ");
var GRAB_SELECTORS = ['[data-cursor="grab"]', ".cursor-grab"].join(", ");
var GRABBING_SELECTORS = [
  '[data-cursor="grabbing"]',
  ".cursor-grabbing"
].join(", ");
function isTouchDevice() {
  if (typeof window === "undefined") return false;
  return "ontouchstart" in window || navigator.maxTouchPoints > 0 || // @ts-ignore
  navigator.msMaxTouchPoints > 0;
}
__name(isTouchDevice, "isTouchDevice");
function useCursorState() {
  const [cursorState, setCursorState] = useState({
    position: { x: 0, y: 0 },
    isHovering: false,
    isClicking: false,
    cursorType: "default"
  });
  const updatePosition = useCallback((x, y) => {
    setCursorState((prev) => ({
      ...prev,
      position: { x, y }
    }));
  }, []);
  const updateHoverState = useCallback(
    (isHovering, cursorType = "default") => {
      setCursorState((prev) => ({
        ...prev,
        isHovering,
        cursorType
      }));
    },
    []
  );
  const updateClickState = useCallback((isClicking) => {
    setCursorState((prev) => ({
      ...prev,
      isClicking
    }));
  }, []);
  return {
    cursorState,
    updatePosition,
    updateHoverState,
    updateClickState
  };
}
__name(useCursorState, "useCursorState");
function useCursorTrail(trailLength, position) {
  const [trail, setTrail] = useState([]);
  const trailRef = useRef([]);
  useEffect(() => {
    trailRef.current.push(position);
    if (trailRef.current.length > trailLength) {
      trailRef.current.shift();
    }
    setTrail([...trailRef.current]);
  }, [position, trailLength]);
  return trail;
}
__name(useCursorTrail, "useCursorTrail");
function AnimatedCursor({
  isVisible = true,
  size = 20,
  color = "#000000",
  trailColor = "#00000050",
  animationDuration = 200,
  showTrail = true,
  trailLength = 8,
  blendMode = "normal",
  hoverScale = 1.5,
  hideOnTouch = true,
  className,
  clickAnimationDuration = 100,
  zIndex = 9999
}) {
  const { cursorState, updatePosition, updateHoverState, updateClickState } = useCursorState();
  const trail = useCursorTrail(trailLength, cursorState.position);
  const [isTouch, setIsTouch] = useState(false);
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setIsTouch(isTouchDevice());
    setMounted(true);
  }, []);
  useEffect(() => {
    if (!mounted || hideOnTouch && isTouch) return;
    const handleMouseMove = /* @__PURE__ */ __name((e) => {
      try {
        requestAnimationFrame(() => {
          updatePosition(e.clientX, e.clientY);
        });
      } catch (error) {
        console.warn("AnimatedCursor: Error updating position", error);
      }
    }, "handleMouseMove");
    const handleMouseOver = /* @__PURE__ */ __name((e) => {
      try {
        const target = e.target;
        if (target?.closest?.(INTERACTIVE_SELECTORS)) {
          updateHoverState(true, "pointer");
        } else if (target?.closest?.(TEXT_SELECTORS)) {
          updateHoverState(true, "text");
        } else if (target?.closest?.(GRAB_SELECTORS)) {
          updateHoverState(true, "grab");
        } else if (target?.closest?.(GRABBING_SELECTORS)) {
          updateHoverState(true, "grabbing");
        } else {
          updateHoverState(false, "default");
        }
      } catch (error) {
        console.warn("AnimatedCursor: Error handling mouse over", error);
        updateHoverState(false, "default");
      }
    }, "handleMouseOver");
    const handleMouseDown = /* @__PURE__ */ __name(() => {
      updateClickState(true);
    }, "handleMouseDown");
    const handleMouseUp = /* @__PURE__ */ __name(() => {
      updateClickState(false);
    }, "handleMouseUp");
    const handleMouseLeave = /* @__PURE__ */ __name(() => {
      updateHoverState(false, "default");
    }, "handleMouseLeave");
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseover", handleMouseOver);
    document.addEventListener("mousedown", handleMouseDown);
    document.addEventListener("mouseup", handleMouseUp);
    document.addEventListener("mouseleave", handleMouseLeave);
    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseover", handleMouseOver);
      document.removeEventListener("mousedown", handleMouseDown);
      document.removeEventListener("mouseup", handleMouseUp);
      document.removeEventListener("mouseleave", handleMouseLeave);
    };
  }, [
    mounted,
    hideOnTouch,
    isTouch,
    updatePosition,
    updateHoverState,
    updateClickState
  ]);
  useEffect(() => {
    if (!mounted || hideOnTouch && isTouch) return;
    try {
      const originalCursor = document.body.style.cursor;
      document.body.style.cursor = "none";
      return () => {
        try {
          document.body.style.cursor = originalCursor;
        } catch (error) {
          console.warn("AnimatedCursor: Error restoring cursor style", error);
        }
      };
    } catch (error) {
      console.warn("AnimatedCursor: Error hiding cursor", error);
    }
  }, [mounted, hideOnTouch, isTouch]);
  if (!mounted || !isVisible || hideOnTouch && isTouch) {
    return null;
  }
  const currentScale = cursorState.isHovering ? hoverScale : 1;
  const clickScale = cursorState.isClicking ? 0.8 : 1;
  const finalScale = currentScale * clickScale;
  const getCursorShape = /* @__PURE__ */ __name(() => {
    switch (cursorState.cursorType) {
      case "text":
        return "h-6 w-0.5";
      case "grab":
      case "grabbing":
        return "rounded-md";
      default:
        return "rounded-full";
    }
  }, "getCursorShape");
  return /* @__PURE__ */ jsxs("div", { className: cn("pointer-events-none fixed inset-0", className), children: [
    showTrail && trail.map((point, index) => {
      const opacity = (index + 1) / trail.length * 0.5;
      const scale = (index + 1) / trail.length * 0.8;
      return /* @__PURE__ */ jsx(
        "div",
        {
          className: "absolute",
          style: {
            left: point.x - size / 2,
            top: point.y - size / 2,
            width: size,
            height: size,
            backgroundColor: trailColor,
            borderRadius: "50%",
            opacity,
            transform: `scale(${scale})`,
            zIndex: zIndex - index - 1,
            mixBlendMode: blendMode
          }
        },
        index
      );
    }),
    /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "absolute transition-transform duration-100 ease-out",
          getCursorShape()
        ),
        style: {
          left: cursorState.position.x - size / 2,
          top: cursorState.position.y - size / 2,
          width: cursorState.cursorType === "text" ? 2 : size,
          height: cursorState.cursorType === "text" ? 24 : size,
          backgroundColor: color,
          transform: `scale(${finalScale})`,
          transitionDuration: `${animationDuration}ms`,
          zIndex,
          mixBlendMode: blendMode
        }
      }
    ),
    cursorState.isHovering && cursorState.cursorType !== "text" && /* @__PURE__ */ jsx(
      "div",
      {
        className: "absolute rounded-full border-2 transition-all duration-200 ease-out",
        style: {
          left: cursorState.position.x - size * hoverScale / 2,
          top: cursorState.position.y - size * hoverScale / 2,
          width: size * hoverScale,
          height: size * hoverScale,
          borderColor: color,
          opacity: 0.3,
          zIndex: zIndex - 1,
          mixBlendMode: blendMode
        }
      }
    )
  ] });
}
__name(AnimatedCursor, "AnimatedCursor");
function usePrefersReducedMotion2() {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
  useEffect(() => {
    if (typeof window === "undefined") return;
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    setPrefersReducedMotion(mediaQuery.matches);
    const handleChange = /* @__PURE__ */ __name((event) => {
      setPrefersReducedMotion(event.matches);
    }, "handleChange");
    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, []);
  return prefersReducedMotion;
}
__name(usePrefersReducedMotion2, "usePrefersReducedMotion");
var iconPaths = {
  loading: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83",
  heart: [
    "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z",
    "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
  ],
  star: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z",
  hamburger: ["M3 12h18M3 6h18M3 18h18", "m6 6 12 12M6 18 18 6"],
  arrow: "M5 12l14 0m-7 -7l7 7l-7 7",
  check: "m9 12 2 2 4-4",
  x: "m18 6-12 12M6 6l12 12"
};
var animationVariants = {
  spin: {
    animate: {
      rotate: 360,
      transition: {
        duration: 1,
        repeat: Infinity,
        ease: "linear"
      }
    }
  },
  pulse: {
    animate: {
      scale: [1, 1.2, 1],
      transition: {
        duration: 1,
        repeat: Infinity,
        ease: "easeInOut"
      }
    }
  },
  bounce: {
    animate: {
      y: [0, -10, 0],
      transition: {
        duration: 0.6,
        repeat: Infinity,
        ease: "easeInOut"
      }
    }
  },
  draw: {
    initial: { pathLength: 0, opacity: 0 },
    animate: {
      pathLength: 1,
      opacity: 1,
      transition: { duration: 2, ease: "easeInOut" }
    }
  },
  hover: {
    whileHover: {
      scale: 1.1,
      transition: { duration: 0.2 }
    }
  }
};
var hoverVariants = {
  scale: { scale: 1.2 },
  rotate: { rotate: 15 },
  glow: { filter: "drop-shadow(0 0 8px currentColor)" },
  shake: { x: [-2, 2, -2, 2, 0] }
};
var clickVariants = {
  scale: { scale: 0.9 },
  rotate: { rotate: 180 },
  ripple: { scale: [1, 1.3, 1] }
};
function MorphingPath({
  paths,
  duration,
  strokeWidth = 2,
  autoAnimate,
  repeat,
  onComplete
}) {
  const [currentPathIndex, setCurrentPathIndex] = useState(0);
  useEffect(() => {
    if (!autoAnimate || paths.length < 2) return;
    const interval = setInterval(() => {
      setCurrentPathIndex((prev) => {
        const next = (prev + 1) % paths.length;
        if (next === 0 && !repeat) {
          clearInterval(interval);
          onComplete?.();
        }
        return next;
      });
    }, duration);
    return () => clearInterval(interval);
  }, [autoAnimate, paths.length, duration, repeat, onComplete]);
  return /* @__PURE__ */ jsx(
    motion.path,
    {
      d: paths[currentPathIndex],
      fill: "none",
      stroke: "currentColor",
      strokeWidth,
      strokeLinecap: "round",
      strokeLinejoin: "round",
      animate: { d: paths[currentPathIndex] },
      transition: { duration: duration / 1e3, ease: "easeInOut" }
    }
  );
}
__name(MorphingPath, "MorphingPath");
function DrawingPath({
  path,
  duration,
  strokeWidth = 2,
  progress,
  autoAnimate
}) {
  const pathRef = useRef(null);
  const [pathLength, setPathLength] = useState(0);
  useEffect(() => {
    if (pathRef.current) {
      const length = pathRef.current.getTotalLength();
      setPathLength(length);
    }
  }, [path]);
  const animatedLength = progress !== void 0 ? pathLength * progress : pathLength;
  return /* @__PURE__ */ jsx(
    motion.path,
    {
      ref: pathRef,
      d: path,
      fill: "none",
      stroke: "currentColor",
      strokeWidth,
      strokeLinecap: "round",
      strokeLinejoin: "round",
      initial: { pathLength: 0 },
      animate: autoAnimate ? { pathLength: 1 } : { pathLength: animatedLength / pathLength },
      transition: { duration: duration / 1e3, ease: "easeInOut" },
      style: {
        strokeDasharray: pathLength,
        strokeDashoffset: pathLength - animatedLength
      }
    }
  );
}
__name(DrawingPath, "DrawingPath");
function LoadingSpinner({
  size,
  strokeWidth = 2
}) {
  return /* @__PURE__ */ jsx(
    motion.div,
    {
      animate: { rotate: 360 },
      transition: { duration: 1, repeat: Infinity, ease: "linear" },
      style: { width: size, height: size },
      children: /* @__PURE__ */ jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
        "circle",
        {
          cx: "12",
          cy: "12",
          r: "10",
          stroke: "currentColor",
          strokeWidth,
          strokeLinecap: "round",
          strokeDasharray: "60 40",
          opacity: "0.3"
        }
      ) })
    }
  );
}
__name(LoadingSpinner, "LoadingSpinner");
function AnimatedIcon({
  icon = "loading",
  paths,
  animation = "spin",
  size = 24,
  color = "currentColor",
  duration = 1e3,
  autoAnimate = true,
  repeat = true,
  className,
  style,
  onAnimationComplete,
  onClick,
  interactive = true,
  hoverAnimation = "scale",
  clickAnimation = "scale",
  customVariants,
  viewBox = "0 0 24 24",
  strokeWidth = 2,
  loading = false,
  progress
}) {
  const [isHovered, setIsHovered] = useState(false);
  const [isClicked, setIsClicked] = useState(false);
  const prefersReducedMotion = usePrefersReducedMotion2();
  const variants = customVariants || animationVariants[animation] || {};
  const shouldAnimate = autoAnimate && !prefersReducedMotion;
  const getIconPaths = /* @__PURE__ */ __name(() => {
    if (paths) {
      return Array.isArray(paths) ? paths : [paths];
    }
    const builtInPath = iconPaths[icon];
    return Array.isArray(builtInPath) ? builtInPath : [builtInPath];
  }, "getIconPaths");
  const iconPathsArray = getIconPaths();
  const handleClick = /* @__PURE__ */ __name(() => {
    if (!interactive) return;
    setIsClicked(true);
    setTimeout(() => setIsClicked(false), 200);
    onClick?.();
  }, "handleClick");
  const getHoverVariant = /* @__PURE__ */ __name(() => {
    if (!interactive || !isHovered) return {};
    return hoverVariants[hoverAnimation] || {};
  }, "getHoverVariant");
  const getClickVariant = /* @__PURE__ */ __name(() => {
    if (!interactive || !isClicked) return {};
    return clickVariants[clickAnimation] || {};
  }, "getClickVariant");
  if (loading) {
    return /* @__PURE__ */ jsx(LoadingSpinner, { size, strokeWidth });
  }
  const renderIcon = /* @__PURE__ */ __name(() => {
    if (animation === "morph" && iconPathsArray.length > 1) {
      return /* @__PURE__ */ jsx(
        MorphingPath,
        {
          paths: iconPathsArray,
          duration,
          strokeWidth,
          autoAnimate: shouldAnimate,
          repeat,
          onComplete: onAnimationComplete
        }
      );
    }
    if (animation === "draw") {
      return /* @__PURE__ */ jsx(
        DrawingPath,
        {
          path: iconPathsArray[0],
          duration,
          strokeWidth,
          progress,
          autoAnimate: shouldAnimate
        }
      );
    }
    return iconPathsArray.map((path, index) => /* @__PURE__ */ jsx(
      motion.path,
      {
        d: path,
        fill: icon === "heart" ? "currentColor" : "none",
        stroke: icon === "heart" ? "none" : "currentColor",
        strokeWidth,
        strokeLinecap: "round",
        strokeLinejoin: "round"
      },
      index
    ));
  }, "renderIcon");
  return /* @__PURE__ */ jsx(
    motion.div,
    {
      className: cn$1(
        "inline-flex items-center justify-center",
        interactive && "cursor-pointer",
        className
      ),
      style: {
        width: size,
        height: size,
        color,
        ...style
      },
      onClick: handleClick,
      onMouseEnter: () => setIsHovered(true),
      onMouseLeave: () => setIsHovered(false),
      variants,
      animate: shouldAnimate ? "animate" : "initial",
      whileHover: !prefersReducedMotion ? getHoverVariant() : {},
      whileTap: !prefersReducedMotion ? getClickVariant() : {},
      onAnimationComplete,
      children: /* @__PURE__ */ jsx(
        "svg",
        {
          width: "100%",
          height: "100%",
          viewBox,
          fill: "none",
          xmlns: "http://www.w3.org/2000/svg",
          children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: renderIcon() })
        }
      )
    }
  );
}
__name(AnimatedIcon, "AnimatedIcon");
function usePrefersReducedMotion3() {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
  useEffect(() => {
    if (typeof window === "undefined") return;
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    setPrefersReducedMotion(mediaQuery.matches);
    const handleChange = /* @__PURE__ */ __name((event) => {
      setPrefersReducedMotion(event.matches);
    }, "handleChange");
    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, []);
  return prefersReducedMotion;
}
__name(usePrefersReducedMotion3, "usePrefersReducedMotion");
var slideVariants = {
  hidden: { opacity: 0, x: -50 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    x: 0,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, x: 50, transition: { duration: 0.3 } }
};
var fadeVariants = {
  hidden: { opacity: 0 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, transition: { duration: 0.3 } }
};
var scaleVariants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    scale: 1,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut",
      type: "spring",
      stiffness: 100
    }
  }), "visible"),
  exit: { opacity: 0, scale: 0.8, transition: { duration: 0.3 } }
};
var slideUpVariants = {
  hidden: { opacity: 0, y: 50 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    y: 0,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, y: -50, transition: { duration: 0.3 } }
};
var slideDownVariants = {
  hidden: { opacity: 0, y: -50 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    y: 0,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, y: 50, transition: { duration: 0.3 } }
};
var slideLeftVariants = {
  hidden: { opacity: 0, x: 50 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    x: 0,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, x: -50, transition: { duration: 0.3 } }
};
var slideRightVariants = {
  hidden: { opacity: 0, x: -50 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    x: 0,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, x: 50, transition: { duration: 0.3 } }
};
var animationVariants2 = {
  slide: slideVariants,
  fade: fadeVariants,
  scale: scaleVariants,
  slideUp: slideUpVariants,
  slideDown: slideDownVariants,
  slideLeft: slideLeftVariants,
  slideRight: slideRightVariants
};
function useVirtualizedList(items, containerHeight, itemHeight, enabled) {
  const [scrollTop, setScrollTop] = useState(0);
  const visibleItems = useMemo(() => {
    if (!enabled) return items;
    const startIndex = Math.floor(scrollTop / itemHeight);
    const endIndex = Math.min(
      startIndex + Math.ceil(containerHeight / itemHeight) + 1,
      items.length
    );
    return items.slice(startIndex, endIndex).map((item, index) => ({
      ...item,
      virtualIndex: startIndex + index,
      style: {
        position: "absolute",
        top: (startIndex + index) * itemHeight,
        height: itemHeight,
        width: "100%"
      }
    }));
  }, [items, scrollTop, itemHeight, containerHeight, enabled]);
  const totalHeight = items.length * itemHeight;
  const handleScroll = useCallback((e) => {
    setScrollTop(e.currentTarget.scrollTop);
  }, []);
  return {
    visibleItems,
    totalHeight,
    handleScroll
  };
}
__name(useVirtualizedList, "useVirtualizedList");
function AnimatedList({
  items,
  animation = "slideUp",
  staggerDelay = 100,
  duration = 500,
  reorderable = false,
  enableAddRemove = true,
  layout = "vertical",
  gridColumns = 3,
  className,
  itemClassName,
  style,
  onReorder,
  onItemClick,
  showHoverEffects = true,
  customVariants,
  virtualized = false,
  itemHeight = 60,
  containerHeight = 400,
  autoStart = true,
  onAnimationComplete
}) {
  const [animatedItems, setAnimatedItems] = useState(items);
  const [animationKey, setAnimationKey] = useState(0);
  const prefersReducedMotion = usePrefersReducedMotion3();
  const variants = customVariants || animationVariants2[animation];
  const shouldAnimate = !prefersReducedMotion && autoStart;
  const { visibleItems, totalHeight, handleScroll } = useVirtualizedList(
    items,
    containerHeight,
    itemHeight,
    virtualized
  );
  useEffect(() => {
    setAnimatedItems(items);
  }, [items]);
  const updatedVariants = useMemo(() => {
    if (!variants.visible || typeof variants.visible !== "function")
      return variants;
    return {
      ...variants,
      visible: /* @__PURE__ */ __name((i) => {
        const original = variants.visible;
        const originalResult = original(i);
        return {
          ...originalResult,
          transition: {
            ...originalResult.transition,
            delay: i * (staggerDelay / 1e3),
            duration: duration / 1e3
          }
        };
      }, "visible")
    };
  }, [variants, staggerDelay, duration]);
  const getLayoutClassName = /* @__PURE__ */ __name(() => {
    switch (layout) {
      case "horizontal":
        return "flex flex-row gap-4 overflow-x-auto";
      case "grid":
        return `grid gap-4 grid-cols-${gridColumns}`;
      default:
        return "flex flex-col gap-4";
    }
  }, "getLayoutClassName");
  const renderListItem = /* @__PURE__ */ __name((item, index, virtualStyle) => {
    const itemContent = /* @__PURE__ */ jsx(
      motion.div,
      {
        custom: index,
        variants: updatedVariants,
        initial: shouldAnimate ? "hidden" : "visible",
        animate: "visible",
        exit: "exit",
        layout: enableAddRemove,
        className: cn$1(
          "cursor-pointer select-none",
          showHoverEffects && "hover:scale-105 transition-transform",
          itemClassName
        ),
        style: virtualStyle,
        onClick: () => onItemClick?.(item, index),
        whileHover: showHoverEffects ? { scale: 1.02 } : void 0,
        whileTap: showHoverEffects ? { scale: 0.98 } : void 0,
        onAnimationComplete: () => {
          if (index === animatedItems.length - 1) {
            onAnimationComplete?.();
          }
        },
        children: item.content
      },
      item.id
    );
    return itemContent;
  }, "renderListItem");
  if (reorderable && !virtualized) {
    return /* @__PURE__ */ jsx(
      Reorder.Group,
      {
        axis: layout === "horizontal" ? "x" : "y",
        values: animatedItems,
        onReorder: (newItems) => {
          setAnimatedItems(newItems);
          onReorder?.(newItems);
        },
        className: cn$1(getLayoutClassName(), className),
        style,
        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: animatedItems.map((item, index) => /* @__PURE__ */ jsx(
          Reorder.Item,
          {
            value: item,
            className: cn$1(
              "cursor-grab active:cursor-grabbing",
              itemClassName
            ),
            whileDrag: { scale: 1.05, zIndex: 10 },
            children: item.content
          },
          item.id
        )) })
      }
    );
  }
  if (virtualized) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn$1("overflow-auto", className),
        style: { height: containerHeight, ...style },
        onScroll: handleScroll,
        children: /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: visibleItems.map(
          (item, index) => renderListItem(item, item.virtualIndex || index, item.style)
        ) }) })
      }
    );
  }
  return /* @__PURE__ */ jsx(
    motion.div,
    {
      className: cn$1(getLayoutClassName(), className),
      style,
      initial: "hidden",
      animate: "visible",
      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: animatedItems.map((item, index) => renderListItem(item, index)) })
    },
    animationKey
  );
}
__name(AnimatedList, "AnimatedList");
function usePrefersReducedMotion4() {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
  useEffect(() => {
    if (typeof window === "undefined") return;
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    setPrefersReducedMotion(mediaQuery.matches);
    const handleChange = /* @__PURE__ */ __name((event) => {
      setPrefersReducedMotion(event.matches);
    }, "handleChange");
    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, []);
  return prefersReducedMotion;
}
__name(usePrefersReducedMotion4, "usePrefersReducedMotion");
function useAnimatedNumber(targetValue, from, duration, decimals, format, currency, locale, easing, autoStart, useSpringAnim, springConfig, separator) {
  const [displayValue, setDisplayValue] = useState(from);
  const [isAnimating, setIsAnimating] = useState(false);
  const animationRef = useRef(null);
  const prefersReducedMotion = usePrefersReducedMotion4();
  const springValue = useSpring(from, {
    stiffness: springConfig.tension || 100,
    damping: springConfig.friction || 10,
    mass: springConfig.mass || 1
  });
  const [motionValue, setMotionValue] = useState(from);
  const startAnimation = useCallback(() => {
    if (prefersReducedMotion) {
      setDisplayValue(targetValue);
      return;
    }
    setIsAnimating(true);
    if (useSpringAnim) {
      springValue.set(targetValue);
    } else {
      const startTime = Date.now();
      const startValue = displayValue;
      const distance = targetValue - startValue;
      const animate = /* @__PURE__ */ __name(() => {
        const elapsed = Date.now() - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const easedProgress = progress;
        const currentValue = startValue + distance * easedProgress;
        setDisplayValue(currentValue);
        setMotionValue(currentValue);
        if (progress < 1) {
          animationRef.current = requestAnimationFrame(animate);
        } else {
          setIsAnimating(false);
          animationRef.current = null;
        }
      }, "animate");
      animationRef.current = requestAnimationFrame(animate);
    }
  }, [
    targetValue,
    displayValue,
    duration,
    useSpringAnim,
    springValue,
    prefersReducedMotion
  ]);
  useEffect(() => {
    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
    };
  }, []);
  useEffect(() => {
    if (useSpringAnim) {
      const unsubscribe = springValue.onChange((latest) => {
        setDisplayValue(latest);
        if (Math.abs(latest - targetValue) < 0.01) {
          setIsAnimating(false);
        }
      });
      return () => {
        unsubscribe();
      };
    }
  }, [springValue, useSpringAnim, targetValue]);
  useEffect(() => {
    if (autoStart) {
      startAnimation();
    }
  }, [autoStart, startAnimation]);
  const formattedValue = useMemo(() => {
    const roundedValue = Math.round(displayValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
    try {
      switch (format) {
        case "currency":
          return new Intl.NumberFormat(locale, {
            style: "currency",
            currency,
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals
          }).format(roundedValue);
        case "percent":
          return new Intl.NumberFormat(locale, {
            style: "percent",
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals
          }).format(roundedValue / 100);
        default:
          let formatted = new Intl.NumberFormat(locale, {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals
          }).format(roundedValue);
          if (separator && separator !== ",") {
            formatted = formatted.replace(/,/g, separator);
          }
          return formatted;
      }
    } catch (error) {
      return roundedValue.toFixed(decimals);
    }
  }, [displayValue, decimals, format, currency, locale, separator]);
  return {
    formattedValue,
    displayValue,
    isAnimating,
    startAnimation
  };
}
__name(useAnimatedNumber, "useAnimatedNumber");
function AnimatedNumber({
  value,
  from = 0,
  duration = 2e3,
  decimals = 0,
  format = "number",
  currency = "USD",
  locale = "en-US",
  easing = "easeOut",
  autoStart = true,
  onComplete,
  className,
  style,
  prefix = "",
  suffix = "",
  useSpring: useSpring2 = false,
  springConfig = {},
  separator,
  animateOnHover = false,
  hoverValue
}) {
  const [isHovered, setIsHovered] = useState(false);
  const [animationKey, setAnimationKey] = useState(0);
  const currentValue = animateOnHover && isHovered && hoverValue !== void 0 ? hoverValue : value;
  const { formattedValue, displayValue, isAnimating, startAnimation } = useAnimatedNumber(
    currentValue,
    from,
    duration,
    decimals,
    format,
    currency,
    locale,
    easing,
    autoStart,
    useSpring2,
    springConfig,
    separator
  );
  useEffect(() => {
    if (!isAnimating && onComplete && Math.abs(displayValue - currentValue) < 1e-3) {
      onComplete(displayValue);
    }
  }, [isAnimating, displayValue, currentValue, onComplete]);
  useEffect(() => {
    if (animateOnHover && hoverValue !== void 0) {
      startAnimation();
    }
  }, [isHovered, animateOnHover, hoverValue, startAnimation]);
  const handleMouseEnter = /* @__PURE__ */ __name(() => {
    if (animateOnHover) {
      setIsHovered(true);
    }
  }, "handleMouseEnter");
  const handleMouseLeave = /* @__PURE__ */ __name(() => {
    if (animateOnHover) {
      setIsHovered(false);
    }
  }, "handleMouseLeave");
  const prefersReducedMotion = usePrefersReducedMotion4();
  return /* @__PURE__ */ jsxs(
    motion.span,
    {
      className: cn$1("inline-block tabular-nums", className),
      style,
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      initial: { scale: 1 },
      animate: !prefersReducedMotion && isAnimating ? { scale: [1, 1.05, 1] } : { scale: 1 },
      transition: { duration: 0.3 },
      children: [
        prefix,
        /* @__PURE__ */ jsx(
          motion.span,
          {
            initial: { opacity: 0, y: 20 },
            animate: { opacity: 1, y: 0 },
            transition: { duration: 0.3 },
            children: formattedValue
          },
          animationKey
        ),
        suffix
      ]
    }
  );
}
__name(AnimatedNumber, "AnimatedNumber");
var AnimatedTestimonials = React9.forwardRef(
  ({ className, testimonials, autoPlay = true, duration = 5e3, ...props }, ref) => {
    const [activeIndex, setActiveIndex] = React9.useState(0);
    React9.useEffect(() => {
      if (!autoPlay) return;
      const interval = setInterval(() => {
        setActiveIndex((prev) => (prev + 1) % testimonials.length);
      }, duration);
      return () => clearInterval(interval);
    }, [autoPlay, duration, testimonials.length]);
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("relative min-h-[200px]", className),
        ...props,
        children: [
          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
            motion.div,
            {
              initial: { opacity: 0, y: 20 },
              animate: { opacity: 1, y: 0 },
              exit: { opacity: 0, y: -20 },
              transition: { duration: 0.5 },
              children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxs("blockquote", { className: "space-y-4", children: [
                /* @__PURE__ */ jsxs("p", { className: "text-lg italic", children: [
                  '"',
                  testimonials[activeIndex].content,
                  '"'
                ] }),
                /* @__PURE__ */ jsxs("footer", { className: "flex items-center gap-4", children: [
                  /* @__PURE__ */ jsxs(Avatar, { children: [
                    /* @__PURE__ */ jsx(AvatarImage, { src: testimonials[activeIndex].avatar }),
                    /* @__PURE__ */ jsx(AvatarFallback, { children: testimonials[activeIndex].author.slice(0, 2).toUpperCase() })
                  ] }),
                  /* @__PURE__ */ jsxs("div", { children: [
                    /* @__PURE__ */ jsx("cite", { className: "not-italic font-medium", children: testimonials[activeIndex].author }),
                    testimonials[activeIndex].role && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
                      testimonials[activeIndex].role,
                      testimonials[activeIndex].company && `, ${testimonials[activeIndex].company}`
                    ] })
                  ] })
                ] })
              ] }) }) })
            },
            activeIndex
          ) }),
          /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center gap-2", children: testimonials.map((_, index) => /* @__PURE__ */ jsx(
            "button",
            {
              onClick: () => setActiveIndex(index),
              className: cn(
                "h-2 w-2 rounded-full transition-all",
                index === activeIndex ? "w-8 bg-primary" : "bg-muted hover:bg-muted-foreground"
              ),
              "aria-label": `Go to testimonial ${index + 1}`
            },
            index
          )) })
        ]
      }
    );
  }
);
AnimatedTestimonials.displayName = "AnimatedTestimonials";
var AnimatedTooltip = React9.forwardRef(
  ({ className, content, children, delay = 0, ...props }, ref) => {
    const [isVisible, setIsVisible] = React9.useState(false);
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("relative inline-block", className),
        onMouseEnter: () => setIsVisible(true),
        onMouseLeave: () => setIsVisible(false),
        ...props,
        children: [
          children,
          /* @__PURE__ */ jsx(AnimatePresence$1, { children: isVisible && /* @__PURE__ */ jsxs(
            motion$1.div,
            {
              initial: { opacity: 0, y: 10, scale: 0.95 },
              animate: { opacity: 1, y: 0, scale: 1 },
              exit: { opacity: 0, y: 10, scale: 0.95 },
              transition: {
                duration: 0.2,
                delay: delay / 1e3,
                ease: "easeOut"
              },
              className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-1.5 bg-popover text-popover-foreground text-sm rounded-md shadow-md whitespace-nowrap z-50",
              children: [
                content,
                /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover" })
              ]
            }
          ) })
        ]
      }
    );
  }
);
AnimatedTooltip.displayName = "AnimatedTooltip";
function AppleCardsCarousel({
  cards,
  autoPlay = false,
  autoPlayInterval = 5e3,
  className,
  cardClassName,
  showArrows = true,
  showDots = true,
  parallaxOffset = 50,
  stackOffset = 10,
  stackScale = 0.95,
  swipeThreshold = 50
}) {
  const [currentIndex, setCurrentIndex] = React9.useState(0);
  const [isAutoPlaying, setIsAutoPlaying] = React9.useState(autoPlay);
  const containerRef = React9.useRef(null);
  const dragX = useMotionValue(0);
  const getCardStyle = /* @__PURE__ */ __name((index) => {
    const offset = index - currentIndex;
    const absOffset = Math.abs(offset);
    if (absOffset > 2) {
      return {
        display: "none",
        x: 0,
        scale: 1,
        opacity: 0,
        zIndex: 0
      };
    }
    const baseX = offset * stackOffset;
    const scale = Math.pow(stackScale, absOffset);
    const opacity = Math.max(0, 1 - absOffset * 0.3);
    const zIndex = cards.length - absOffset;
    return {
      display: "block",
      x: baseX,
      scale,
      opacity,
      zIndex
    };
  }, "getCardStyle");
  const goToNext = React9.useCallback(() => {
    setCurrentIndex((prev) => (prev + 1) % cards.length);
  }, [cards.length]);
  const goToPrevious = React9.useCallback(() => {
    setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length);
  }, [cards.length]);
  const goToCard = React9.useCallback((index) => {
    setCurrentIndex(index);
  }, []);
  const handleDragEnd = React9.useCallback(
    (event, info) => {
      const { offset, velocity } = info;
      if (Math.abs(offset.x) > swipeThreshold || Math.abs(velocity.x) > 500) {
        if (offset.x > 0) {
          goToPrevious();
        } else {
          goToNext();
        }
      }
    },
    [goToNext, goToPrevious, swipeThreshold]
  );
  React9.useEffect(() => {
    if (!isAutoPlaying) return;
    const interval = setInterval(goToNext, autoPlayInterval);
    return () => clearInterval(interval);
  }, [isAutoPlaying, goToNext, autoPlayInterval]);
  const handleMouseEnter = React9.useCallback(() => {
    if (autoPlay) {
      setIsAutoPlaying(false);
    }
  }, [autoPlay]);
  const handleMouseLeave = React9.useCallback(() => {
    if (autoPlay) {
      setIsAutoPlaying(true);
    }
  }, [autoPlay]);
  React9.useEffect(() => {
    const handleKeyDown = /* @__PURE__ */ __name((e) => {
      if (e.key === "ArrowLeft") {
        goToPrevious();
      } else if (e.key === "ArrowRight") {
        goToNext();
      }
    }, "handleKeyDown");
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [goToNext, goToPrevious]);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: containerRef,
      className: cn("relative w-full max-w-6xl mx-auto px-4 py-8", className),
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      children: [
        /* @__PURE__ */ jsx("div", { className: "relative h-[400px] md:h-[500px] lg:h-[600px] flex items-center justify-center", children: /* @__PURE__ */ jsx(AnimatePresence$1, { mode: "popLayout", children: cards.map((card, index) => {
          const style = getCardStyle(index);
          const isActive = index === currentIndex;
          return /* @__PURE__ */ jsx(
            motion$1.div,
            {
              className: cn(
                "absolute inset-0 w-full h-full",
                !isActive && "pointer-events-none"
              ),
              initial: false,
              animate: {
                x: style.x,
                scale: style.scale,
                opacity: style.opacity,
                zIndex: style.zIndex
              },
              transition: {
                type: "spring",
                stiffness: 300,
                damping: 30
              },
              drag: isActive ? "x" : false,
              dragSnapToOrigin: true,
              dragElastic: 0.2,
              onDragEnd: handleDragEnd,
              whileDrag: { cursor: "grabbing" },
              style: {
                x: dragX,
                display: style.display
              },
              children: /* @__PURE__ */ jsxs(
                Card,
                {
                  className: cn(
                    "relative w-full h-full overflow-hidden cursor-grab",
                    "bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-950",
                    "shadow-2xl hover:shadow-3xl transition-shadow duration-300",
                    cardClassName
                  ),
                  style: {
                    background: card.gradient
                  },
                  children: [
                    card.image && /* @__PURE__ */ jsxs(
                      motion$1.div,
                      {
                        className: "absolute inset-0 w-full h-full",
                        style: {
                          x: useTransform(
                            dragX,
                            [-200, 0, 200],
                            [parallaxOffset, 0, -parallaxOffset]
                          )
                        },
                        children: [
                          /* @__PURE__ */ jsx(
                            "img",
                            {
                              src: card.image,
                              alt: card.title,
                              className: "w-full h-full object-cover"
                            }
                          ),
                          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" })
                        ]
                      }
                    ),
                    /* @__PURE__ */ jsx("div", { className: "relative z-10 flex flex-col justify-end h-full p-8 md:p-12", children: card.content ? card.content : /* @__PURE__ */ jsxs(Fragment, { children: [
                      /* @__PURE__ */ jsx(
                        motion$1.h3,
                        {
                          className: "text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-2",
                          initial: { opacity: 0, y: 20 },
                          animate: { opacity: isActive ? 1 : 0.7, y: 0 },
                          transition: { delay: 0.1 },
                          children: card.title
                        }
                      ),
                      card.subtitle && /* @__PURE__ */ jsx(
                        motion$1.p,
                        {
                          className: "text-xl md:text-2xl text-white/80 mb-4",
                          initial: { opacity: 0, y: 20 },
                          animate: { opacity: isActive ? 1 : 0.7, y: 0 },
                          transition: { delay: 0.2 },
                          children: card.subtitle
                        }
                      ),
                      card.description && /* @__PURE__ */ jsx(
                        motion$1.p,
                        {
                          className: "text-base md:text-lg text-white/70 max-w-2xl",
                          initial: { opacity: 0, y: 20 },
                          animate: { opacity: isActive ? 1 : 0.7, y: 0 },
                          transition: { delay: 0.3 },
                          children: card.description
                        }
                      )
                    ] }) })
                  ]
                }
              )
            },
            card.id
          );
        }) }) }),
        showArrows && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsxs(
            Button,
            {
              variant: "ghost",
              size: "icon",
              className: cn(
                "absolute left-4 top-1/2 -translate-y-1/2 z-20",
                "bg-white/10 backdrop-blur-md hover:bg-white/20",
                "text-white border border-white/20",
                "hidden md:flex"
              ),
              onClick: goToPrevious,
              children: [
                /* @__PURE__ */ jsx(ChevronLeft, { className: "h-6 w-6" }),
                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous card" })
              ]
            }
          ),
          /* @__PURE__ */ jsxs(
            Button,
            {
              variant: "ghost",
              size: "icon",
              className: cn(
                "absolute right-4 top-1/2 -translate-y-1/2 z-20",
                "bg-white/10 backdrop-blur-md hover:bg-white/20",
                "text-white border border-white/20",
                "hidden md:flex"
              ),
              onClick: goToNext,
              children: [
                /* @__PURE__ */ jsx(ChevronRight, { className: "h-6 w-6" }),
                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next card" })
              ]
            }
          )
        ] }),
        showDots && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-20 flex gap-2", children: cards.map((_, index) => /* @__PURE__ */ jsx(
          "button",
          {
            className: cn(
              "w-2 h-2 rounded-full transition-all duration-300",
              "bg-white/40 hover:bg-white/60",
              index === currentIndex && "w-8 bg-white"
            ),
            onClick: () => goToCard(index),
            children: /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
              "Go to card ",
              index + 1
            ] })
          },
          index
        )) })
      ]
    }
  );
}
__name(AppleCardsCarousel, "AppleCardsCarousel");
var gradientPresets = {
  sunset: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
  ocean: "linear-gradient(135deg, #667eea 0%, #4ca1af 100%)",
  fire: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
  forest: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
  galaxy: "linear-gradient(135deg, #7303c0 0%, #ec38bc 50%, #fdeff9 100%)",
  aurora: "linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)",
  peach: "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)",
  lavender: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)"
};
var AppleHelloEffect = React9.forwardRef(({ className, text = "Hello", duration = 2, ...props }, ref) => {
  const letters = text.split("");
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: cn(
        "relative flex items-center justify-center text-6xl font-bold",
        className
      ),
      ...props,
      children: letters.map((letter, index) => /* @__PURE__ */ jsx(
        motion$1.span,
        {
          initial: { opacity: 0, y: 50 },
          animate: { opacity: 1, y: 0 },
          transition: {
            duration,
            delay: index * 0.1,
            ease: [0.215, 0.61, 0.355, 1]
          },
          className: "inline-block",
          children: letter
        },
        index
      ))
    }
  );
});
AppleHelloEffect.displayName = "AppleHelloEffect";

export { AnimatedBackground, AnimatedBeam, AnimatedCursor, AnimatedIcon, AnimatedList, AnimatedNumber, AnimatedTestimonials, AnimatedTooltip, AppleCardsCarousel, AppleHelloEffect, gradientPresets };
