"use client";
import * as React6 from 'react';
import React6__default, { useMemo, useCallback } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Img } from '@page-speed/img';
import { Icon } from '@page-speed/icon';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { Pressable } from '@page-speed/pressable';

// components/blocks/features/feature-animated-carousel.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
var DynamicIcon = React6.memo(function DynamicIcon2({
  apiKey,
  name,
  ...props
}) {
  if (name == null) return null;
  if (typeof name !== "string") {
    return /* @__PURE__ */ jsx(Fragment, { children: name });
  }
  return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
});
DynamicIcon.displayName = "DynamicIcon";
var maxWidthStyles = {
  sm: "max-w-screen-sm",
  md: "max-w-screen-md",
  lg: "max-w-screen-lg",
  xl: "max-w-7xl",
  "2xl": "max-w-screen-2xl",
  "4xl": "max-w-[1536px]",
  full: "max-w-full"
};
var Container = React6__default.forwardRef(
  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
    const Component = as;
    return /* @__PURE__ */ jsx(
      Component,
      {
        ref,
        className: cn(
          "mx-auto w-full px-2 sm:px-4 lg:px-8",
          maxWidthStyles[maxWidth],
          className
        ),
        ...props,
        children
      }
    );
  }
);
Container.displayName = "Container";

// lib/patternSvgs.ts
var patternSvgs = {
  squareAltGrid: "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
  grid1: "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
  noise: "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
  dots: "https://cdn.ing/assets/files/record/286198/yfsjx9thvtxzhl2qtshxyhkrm524",
  dotPattern: "https://cdn.ing/assets/files/record/286192/7ig0cku8aqbboiza8nuk6hw0nnsr",
  dotPattern2: "https://cdn.ing/assets/files/record/286189/arez6gd2s7isn9i1o6c7sexdq7bl",
  circles: "https://cdn.ing/assets/files/record/286190/gtmia3sncjtzetdshc20zf1d3c17",
  waves: "https://cdn.ing/assets/files/record/286191/mqlb33fzxz9cdth1bx7if0wmpkp1",
  crossPattern: "https://cdn.ing/assets/files/record/286193/9yfqwdbnqaipbp7fsb3wbzzmq472",
  architect: "https://cdn.ing/assets/files/record/286194/vgs88ugpvyhxu13wqgy0acvae6re",
  tinyCheckers: "https://cdn.ing/assets/files/record/286195/65efaknsw8kcpf9o3c2gybytsl5b",
  p6: "https://cdn.ing/assets/i/r/286196/6kl0rqnd6mjk8j7e525fo8fo0vkc/p6.webp"
};
var maskTop = "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)";
var maskBottom = "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)";
var maskCenter = "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)";
var maskTopLeft = "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)";
var maskTopRight = "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)";
var maskBottomLeft = "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)";
var maskBottomRight = "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)";
var circuitBoardPattern = (id, mask) => /* @__PURE__ */ jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "100",
          height: "100",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsx(
              "path",
              {
                d: "M0 50h40M60 50h40M50 0v40M50 60v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "1",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "3", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsx("circle", { cx: "0", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsx("circle", { cx: "100", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "0", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "100", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridDotsPattern = (id, mask) => /* @__PURE__ */ jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "40",
          height: "40",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsx(
              "path",
              {
                d: "M0 20h40M20 0v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "0.5",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridPattern = (size, mask) => /* @__PURE__ */ jsx(
  "div",
  {
    className: "h-full w-full bg-[linear-gradient(to_right,_hsl(var(--muted))_1px,_transparent_1px),linear-gradient(to_bottom,_hsl(var(--muted))_1px,_transparent_1px)]",
    style: {
      backgroundSize: `${size}px ${size}px`,
      ...mask ? {
        maskImage: mask,
        WebkitMaskImage: mask
      } : {}
    }
  }
);
var diagonalCrossPattern = (mask) => /* @__PURE__ */ jsx(
  "div",
  {
    className: "h-full w-full",
    style: {
      backgroundImage: "repeating-linear-gradient(45deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px), repeating-linear-gradient(135deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px)",
      ...mask ? {
        maskImage: mask,
        WebkitMaskImage: mask
      } : {}
    }
  }
);
var dashedGridMaskBase = "repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px), repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px)";
var dashedGridPattern = (fadeMask) => {
  const mask = fadeMask ? `${dashedGridMaskBase}, ${fadeMask}` : dashedGridMaskBase;
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: "h-full w-full",
      style: {
        backgroundImage: "linear-gradient(to right, hsl(var(--muted)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--muted)) 1px, transparent 1px)",
        backgroundSize: "20px 20px",
        backgroundPosition: "0 0, 0 0",
        maskImage: mask,
        WebkitMaskImage: mask,
        maskComposite: "intersect",
        WebkitMaskComposite: "source-in"
      }
    }
  );
};
var gradientGlow = (position) => /* @__PURE__ */ jsx(
  "div",
  {
    className: cn(
      "pointer-events-none absolute left-1/2 z-0 aspect-square w-3/4 -translate-x-1/2 rounded-full opacity-50 blur-3xl",
      position === "top" ? "-top-1/4" : "-bottom-1/4"
    ),
    style: {
      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
    }
  }
);
var spotlight = (position) => /* @__PURE__ */ jsx(
  "div",
  {
    className: cn(
      "pointer-events-none absolute top-1/2 z-0 aspect-square w-3/4 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
      position === "left" ? "-left-1/4" : "-right-1/4"
    ),
    style: {
      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
    }
  }
);
var patternOverlays = {
  circuitBoardBasic: () => circuitBoardPattern("circuit-board-basic"),
  circuitBoardFadeTop: () => circuitBoardPattern("circuit-board-fade-top", maskTop),
  circuitBoardFadeBottom: () => circuitBoardPattern("circuit-board-fade-bottom", maskBottom),
  circuitBoardFadeCenter: () => circuitBoardPattern("circuit-board-fade-center", maskCenter),
  circuitBoardFadeTopLeft: () => circuitBoardPattern("circuit-board-fade-top-left", maskTopLeft),
  circuitBoardFadeTopRight: () => circuitBoardPattern("circuit-board-fade-top-right", maskTopRight),
  circuitBoardFadeBottomLeft: () => circuitBoardPattern("circuit-board-fade-bottom-left", maskBottomLeft),
  circuitBoardFadeBottomRight: () => circuitBoardPattern("circuit-board-fade-bottom-right", maskBottomRight),
  dashedGridBasic: () => dashedGridPattern(),
  dashedGridFadeTop: () => dashedGridPattern(maskTop),
  dashedGridFadeBottom: () => dashedGridPattern(maskBottom),
  dashedGridFadeCenter: () => dashedGridPattern(maskCenter),
  dashedGridFadeTopLeft: () => dashedGridPattern(maskTopLeft),
  dashedGridFadeTopRight: () => dashedGridPattern(maskTopRight),
  dashedGridFadeBottomLeft: () => dashedGridPattern(maskBottomLeft),
  dashedGridFadeBottomRight: () => dashedGridPattern(maskBottomRight),
  diagonalCrossBasic: () => diagonalCrossPattern(),
  diagonalCrossFadeTop: () => diagonalCrossPattern(maskTop),
  diagonalCrossFadeBottom: () => diagonalCrossPattern(maskBottom),
  diagonalCrossFadeCenter: () => diagonalCrossPattern(maskCenter),
  diagonalCrossFadeTopLeft: () => diagonalCrossPattern(maskTopLeft),
  diagonalCrossFadeTopRight: () => diagonalCrossPattern(maskTopRight),
  diagonalCrossFadeBottomLeft: () => diagonalCrossPattern(maskBottomLeft),
  diagonalCrossFadeBottomRight: () => diagonalCrossPattern(maskBottomRight),
  gridBasic: () => gridPattern(40),
  gridFadeTop: () => gridPattern(32, maskTop),
  gridFadeBottom: () => gridPattern(32, maskBottom),
  gridFadeCenter: () => gridPattern(40, maskCenter),
  gridFadeTopLeft: () => gridPattern(32, maskTopLeft),
  gridFadeTopRight: () => gridPattern(32, maskTopRight),
  gridFadeBottomLeft: () => gridPattern(32, maskBottomLeft),
  gridFadeBottomRight: () => gridPattern(32, maskBottomRight),
  gridDotsBasic: () => gridDotsPattern("grid-dots-basic"),
  gridDotsFadeCenter: () => gridDotsPattern("grid-dots-fade-center", maskCenter),
  gradientGlowTop: () => gradientGlow("top"),
  gradientGlowBottom: () => gradientGlow("bottom"),
  spotlightLeft: () => spotlight("left"),
  spotlightRight: () => spotlight("right")
};
var inlinePatternStyles = {
  radialGradientTop: {
    background: "radial-gradient(125% 125% at 50% 10%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
  },
  radialGradientBottom: {
    background: "radial-gradient(125% 125% at 50% 90%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
  }
};
function PatternBackground({
  pattern,
  opacity = 0.08,
  className,
  style
}) {
  if (!pattern) {
    return null;
  }
  if (pattern in inlinePatternStyles) {
    const inlineStyle = inlinePatternStyles[pattern];
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn("pointer-events-none absolute inset-0 z-0", className),
        style: { ...inlineStyle, opacity, ...style },
        "aria-hidden": "true"
      }
    );
  }
  if (pattern in patternOverlays) {
    const Overlay = patternOverlays[pattern];
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn("pointer-events-none absolute inset-0 z-0", className),
        style: { opacity, ...style },
        "aria-hidden": "true",
        children: Overlay()
      }
    );
  }
  const patternUrl = pattern in patternSvgs ? patternSvgs[pattern] : pattern;
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn("pointer-events-none absolute inset-0 z-0", className),
      style: {
        backgroundImage: `url(${patternUrl})`,
        backgroundRepeat: "repeat",
        backgroundSize: "auto",
        opacity,
        ...style
      },
      "aria-hidden": "true"
    }
  );
}
var backgroundStyles = {
  default: "bg-background text-foreground",
  white: "bg-white text-dark",
  gray: "bg-muted/30 text-foreground",
  dark: "bg-foreground text-background",
  transparent: "bg-transparent text-foreground",
  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
  primary: "bg-primary text-primary-foreground",
  secondary: "bg-secondary text-secondary-foreground",
  muted: "bg-muted text-muted-foreground"
};
var spacingStyles = {
  none: "py-0 md:py-0",
  sm: "py-12 md:py-16",
  md: "py-16 md:py-24",
  lg: "py-20 md:py-32",
  xl: "py-24 md:py-40",
  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
};
var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
var Section = React6__default.forwardRef(
  ({
    id,
    title,
    subtitle,
    children,
    className,
    style,
    background = "default",
    spacing = "lg",
    pattern,
    patternOpacity,
    patternClassName,
    containerClassName,
    containerMaxWidth = "xl",
    ...props
  }, ref) => {
    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
    return /* @__PURE__ */ jsxs(
      "section",
      {
        ref,
        id,
        className: cn(
          "relative",
          pattern ? "overflow-hidden" : null,
          backgroundStyles[background],
          isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
          className
        ),
        style,
        ...props,
        children: [
          /* @__PURE__ */ jsx(
            PatternBackground,
            {
              pattern,
              opacity: effectivePatternOpacity,
              className: patternClassName
            }
          ),
          /* @__PURE__ */ jsxs(
            Container,
            {
              maxWidth: containerMaxWidth,
              className: cn("relative z-10", containerClassName),
              children: [
                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                ] }),
                children
              ]
            }
          )
        ]
      }
    );
  }
);
Section.displayName = "Section";
function TextInner({ as, className, children, ...props }, ref) {
  const Component = as || "span";
  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props, children });
}
var Text = React6.forwardRef(TextInner);
Text.displayName = "Text";
function isContentTextItem(item) {
  return item !== null && typeof item === "object" && !React6.isValidElement(item) && "_type" in item && item._type === "text";
}
var ContentGroup = React6.forwardRef(
  ({ items, className, children, ...props }, ref) => {
    const hasContent = items && items.length > 0;
    if (!hasContent) {
      return null;
    }
    return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), ...props, children: [
      items.map((item, idx) => {
        if (isContentTextItem(item)) {
          const { _type, ...textProps } = item;
          return /* @__PURE__ */ jsx(Text, { ...textProps }, idx);
        }
        const reactNode = item;
        if (React6.isValidElement(reactNode)) {
          return React6.cloneElement(reactNode, { key: reactNode.key ?? idx });
        }
        return /* @__PURE__ */ jsx(React6.Fragment, { children: reactNode }, idx);
      }),
      children
    ] });
  }
);
ContentGroup.displayName = "ContentGroup";
var Controls = React6.memo(
  ({
    handleNext,
    handlePrevious,
    isPreviousDisabled,
    isNextDisabled
  }) => {
    return /* @__PURE__ */ jsxs("div", { className: "hidden flex-col items-start gap-8 lg:flex", children: [
      /* @__PURE__ */ jsx(
        "button",
        {
          className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
          onClick: handlePrevious,
          disabled: isPreviousDisabled,
          type: "button",
          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-up", size: 24 })
        }
      ),
      /* @__PURE__ */ jsx(
        "button",
        {
          className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
          onClick: handleNext,
          disabled: isNextDisabled,
          type: "button",
          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", size: 24 })
        }
      )
    ] });
  }
);
var FeatureCard = React6.memo(
  ({ feature, isActive, onClick }) => {
    const variants = useMemo(
      () => ({
        initial: {
          opacity: 0
        },
        animate: {
          opacity: 1
        },
        exit: {
          opacity: 0
        }
      }),
      []
    );
    return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxs(
      motion.div,
      {
        layout: true,
        transition: {
          layout: {
            duration: 0.4,
            ease: "easeOut"
          }
        },
        style: {
          borderRadius: "24px"
        },
        className: cn(
          "bg-card text-card-foreground",
          "relative flex items-start gap-4 md:w-fit md:max-w-sm",
          isActive ? "shadow-xl overflow-visible" : "cursor-pointer shadow-none hover:shadow-xl transition-shadow duration-500 overflow-hidden"
        ),
        onClick,
        children: [
          isActive && feature.href && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-card rounded-full h-fit w-fit p-2 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx(
            Pressable,
            {
              href: feature.href,
              size: "icon-lg",
              className: "bg-primary text-primary-foreground",
              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
            }
          ) }),
          isActive ? /* @__PURE__ */ jsx(
            motion.div,
            {
              layout: true,
              variants,
              initial: "initial",
              animate: "animate",
              exit: "exit",
              transition: {
                duration: 0.4,
                delay: 0.3,
                ease: "easeOut"
              },
              className: "p-6 text-sm md:p-8 md:text-base text-pretty",
              children: (feature.title || feature.description) && /* @__PURE__ */ jsxs("p", { children: [
                feature.title && /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
                  feature.title,
                  "."
                ] }),
                feature.title && feature.description && " ",
                feature.description && /* @__PURE__ */ jsx("span", { children: feature.description })
              ] })
            },
            `feature-description-active-${feature.title}`
          ) : /* @__PURE__ */ jsxs(
            motion.div,
            {
              layout: true,
              variants,
              initial: "initial",
              animate: "animate",
              exit: "exit",
              transition: {
                duration: 0.4,
                delay: 0.2,
                ease: "easeOut"
              },
              className: cn(
                "flex h-fit shrink-0 items-center gap-4 text-sm md:py-3.5 md:pr-6 md:pl-3 md:text-base",
                !isActive && "h-0 w-0 md:h-auto md:w-auto"
              ),
              style: {
                height: "auto",
                lineHeight: "normal"
              },
              children: [
                /* @__PURE__ */ jsx(
                  DynamicIcon,
                  {
                    name: "lucide/plus-circle",
                    size: 24,
                    className: "shrink-0"
                  }
                ),
                feature.title && /* @__PURE__ */ jsx("p", { className: "shrink-0 font-semibold", children: feature.title })
              ]
            },
            `feature-description-inactive-${feature.title}`
          )
        ]
      }
    ) });
  }
);
var FeaturesDesktop = React6.memo(
  ({
    features,
    handleNext,
    handlePrevious,
    activeIndex,
    handleFeatureClick,
    isPreviousDisabled,
    isNextDisabled
  }) => {
    return /* @__PURE__ */ jsxs("div", { className: "relative z-10 hidden items-center gap-8 md:flex", children: [
      /* @__PURE__ */ jsx(
        Controls,
        {
          handleNext,
          handlePrevious,
          isPreviousDisabled,
          isNextDisabled
        }
      ),
      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: features.map((feature, index) => {
        return /* @__PURE__ */ jsx(
          FeatureCard,
          {
            feature,
            isActive: index === activeIndex,
            onClick: () => handleFeatureClick(index)
          },
          `feature-card-${index}`
        );
      }) })
    ] });
  }
);
var FeaturesMobile = React6.memo(
  ({
    features,
    handleNext,
    handlePrevious,
    activeIndex,
    direction,
    isPreviousDisabled,
    isNextDisabled
  }) => {
    const variants = useMemo(
      () => ({
        enter: (direction2) => ({
          x: direction2 > 0 ? 100 : -100,
          opacity: 0
        }),
        center: {
          x: 0,
          opacity: 1
        },
        exit: (direction2) => ({
          x: direction2 < 0 ? 100 : -100,
          opacity: 0
        })
      }),
      []
    );
    const currentFeature = features[activeIndex];
    return /* @__PURE__ */ jsx("div", { className: "relative z-10 flex flex-col gap-4 md:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-stretch gap-4", children: [
      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsx(
        motion.div,
        {
          custom: direction,
          variants,
          initial: "enter",
          animate: "center",
          exit: "exit",
          transition: {
            x: { type: "spring", stiffness: 300, damping: 30 },
            opacity: { duration: 0.2 }
          },
          className: "border border-muted/50 rounded-3xl bg-card text-card-foreground p-4 text-left",
          children: (currentFeature?.title || currentFeature?.description) && /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
            currentFeature.title && /* @__PURE__ */ jsx("p", { className: "font-semibold", children: currentFeature.title }),
            currentFeature.description && /* @__PURE__ */ jsx("p", { className: "mt-1", children: currentFeature.description })
          ] })
        },
        activeIndex
      ) }) }),
      /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center gap-2", children: [
        /* @__PURE__ */ jsx(
          "button",
          {
            className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
            onClick: handlePrevious,
            disabled: isPreviousDisabled,
            type: "button",
            children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-up", size: 20 })
          }
        ),
        /* @__PURE__ */ jsx(
          "button",
          {
            className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
            onClick: handleNext,
            disabled: isNextDisabled,
            type: "button",
            children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", size: 20 })
          }
        )
      ] })
    ] }) });
  }
);
function FeatureAnimatedCarousel({
  sectionId = "feature-animated-carousel",
  title,
  description,
  titleClassName,
  descriptionClassName,
  features,
  className,
  optixFlowConfig,
  background,
  pattern,
  patternOpacity,
  patternClassName,
  headerClassName,
  blockCardClassName,
  spacing = "py-12 md:py-32",
  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
}) {
  const [activeIndex, setActiveIndex] = React6.useState(0);
  const [direction, setDirection] = React6.useState(1);
  const handleNext = useCallback(() => {
    if (features && activeIndex < features.length - 1) {
      setDirection(1);
      setActiveIndex(activeIndex + 1);
    }
  }, [activeIndex, features]);
  const handlePrevious = useCallback(() => {
    if (activeIndex > 0) {
      setDirection(-1);
      setActiveIndex(activeIndex - 1);
    }
  }, [activeIndex]);
  const handleFeatureClick = useCallback(
    (index) => {
      setDirection(index > activeIndex ? 1 : -1);
      setActiveIndex(index);
    },
    [activeIndex]
  );
  const isPreviousDisabled = activeIndex === 0;
  const isNextDisabled = !features || activeIndex === features.length - 1;
  const imageVariants = useMemo(
    () => ({
      enter: (direction2) => ({
        x: direction2 > 0 ? 300 : -300,
        opacity: 0
      }),
      center: {
        x: 0,
        opacity: 1
      },
      exit: (direction2) => ({
        x: direction2 < 0 ? 300 : -300,
        opacity: 0
      })
    }),
    []
  );
  if (!features || features.length === 0) {
    return /* @__PURE__ */ jsx(
      Section,
      {
        id: sectionId,
        background,
        spacing,
        pattern,
        patternOpacity,
        patternClassName,
        className,
        containerClassName,
        children: /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "bg-muted border border-muted/50",
              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
            )
          }
        )
      }
    );
  }
  const currentFeature = features[activeIndex];
  const contentItems = useMemo(() => {
    const items = [];
    if (title) {
      if (typeof title === "string") {
        items.push({
          _type: "text",
          as: "h2",
          className: cn(
            "text-3xl font-semibold text-balance md:text-4xl lg:text-5xl max-w-full md:max-w-md",
            titleClassName
          ),
          children: title
        });
      } else {
        items.push(title);
      }
    }
    if (description) {
      if (typeof description === "string") {
        items.push({
          _type: "text",
          as: "p",
          className: cn(
            "text-xl max-w-full md:max-w-md text-balance",
            descriptionClassName
          ),
          children: description
        });
      } else {
        items.push(description);
      }
    }
    return items;
  }, [title, titleClassName, description, descriptionClassName]);
  return /* @__PURE__ */ jsx(
    Section,
    {
      background,
      spacing,
      pattern,
      patternOpacity,
      patternClassName,
      className,
      containerClassName,
      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
        /* @__PURE__ */ jsx(
          ContentGroup,
          {
            items: contentItems,
            className: cn(
              "flex flex-col gap-2 text-left items-start",
              headerClassName
            )
          }
        ),
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: cn(
              "relative flex min-h-full md:min-h-[500px] flex-col-reverse gap-5 md:gap-8 bg-muted overflow-hidden rounded-3xl p-4 md:p-6 md:flex-row md:items-center lg:p-12 lg:min-h-[600px]",
              blockCardClassName
            ),
            children: [
              /* @__PURE__ */ jsx(
                FeaturesDesktop,
                {
                  features,
                  handleNext,
                  handlePrevious,
                  activeIndex,
                  handleFeatureClick,
                  isPreviousDisabled,
                  isNextDisabled
                }
              ),
              /* @__PURE__ */ jsx(
                FeaturesMobile,
                {
                  features,
                  handleNext,
                  handlePrevious,
                  activeIndex,
                  direction,
                  isPreviousDisabled,
                  isNextDisabled
                }
              ),
              currentFeature?.image && /* @__PURE__ */ jsx("div", { className: "relative w-full h-[250px] md:h-auto md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsxs(
                motion.div,
                {
                  custom: direction,
                  variants: imageVariants,
                  initial: "enter",
                  animate: "center",
                  exit: "exit",
                  transition: {
                    x: { type: "spring", stiffness: 300, damping: 30 },
                    opacity: { duration: 0.3 }
                  },
                  className: "relative h-full w-full shadow-xl overflow-hidden rounded-2xl",
                  children: [
                    currentFeature.href && /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10 rounded-full h-fit w-fit shadow-md hover:shadow-2xl flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsx(
                      Pressable,
                      {
                        href: currentFeature.href,
                        size: "icon-lg",
                        className: "bg-primary text-primary-foreground",
                        children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
                      }
                    ) }),
                    /* @__PURE__ */ jsx(
                      Img,
                      {
                        src: currentFeature.image,
                        alt: currentFeature.imageAlt || (typeof currentFeature.title === "string" ? currentFeature.title : "Feature image"),
                        className: "h-full w-full object-cover",
                        optixFlowConfig
                      }
                    )
                  ]
                },
                activeIndex
              ) }) })
            ]
          }
        )
      ] })
    }
  );
}

export { FeatureAnimatedCarousel };
