"use client";
import * as React from 'react';
import { useMotionValue, AnimatePresence, motion, useTransform } from 'framer-motion';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { cn } from '@hanzo/ui/lib/utils';
import { Card, Button } from '@hanzo/ui';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
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] = React.useState(0);
  const [isAutoPlaying, setIsAutoPlaying] = React.useState(autoPlay);
  const containerRef = React.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 = React.useCallback(() => {
    setCurrentIndex((prev) => (prev + 1) % cards.length);
  }, [cards.length]);
  const goToPrevious = React.useCallback(() => {
    setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length);
  }, [cards.length]);
  const goToCard = React.useCallback((index) => {
    setCurrentIndex(index);
  }, []);
  const handleDragEnd = React.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]
  );
  React.useEffect(() => {
    if (!isAutoPlaying) return;
    const interval = setInterval(goToNext, autoPlayInterval);
    return () => clearInterval(interval);
  }, [isAutoPlaying, goToNext, autoPlayInterval]);
  const handleMouseEnter = React.useCallback(() => {
    if (autoPlay) {
      setIsAutoPlaying(false);
    }
  }, [autoPlay]);
  const handleMouseLeave = React.useCallback(() => {
    if (autoPlay) {
      setIsAutoPlaying(true);
    }
  }, [autoPlay]);
  React.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, { mode: "popLayout", children: cards.map((card, index) => {
          const style = getCardStyle(index);
          const isActive = index === currentIndex;
          return /* @__PURE__ */ jsx(
            motion.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.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.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.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.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%)"
};

export { AppleCardsCarousel, gradientPresets };
