"use client";
'use strict';

var React2 = require('react');
var react = require('motion/react');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var img = require('@page-speed/img');
var pressable = require('@page-speed/pressable');
var framerMotion = require('framer-motion');
var useOnClickOutside = require('@opensite/hooks/useOnClickOutside');
var jsxRuntime = require('react/jsx-runtime');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React2__namespace = /*#__PURE__*/_interopNamespace(React2);

// components/blocks/services-list/services-list-expandable-cards.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var sizeStyles = {
  sm: "max-w-md",
  md: "max-w-2xl",
  lg: "max-w-4xl",
  xl: "max-w-5xl",
  full: "max-w-7xl",
  compact: "max-w-[700px]"
};
var dialogTransition = {
  duration: 0.35,
  ease: [0.16, 1, 0.3, 1]
};
function AnimatedDialog({
  open,
  onOpenChange,
  title,
  eyebrow,
  description,
  children,
  header,
  footer,
  size = "lg",
  className,
  contentClassName,
  featuredMediaHeader
}) {
  const titleId = React2.useId();
  const descriptionId = React2.useId();
  const containerRef = React2.useRef(null);
  useOnClickOutside.useOnClickOutside(containerRef, () => {
    if (open) {
      onOpenChange(false);
    }
  });
  React2.useEffect(() => {
    if (!open) {
      return;
    }
    const onKeyDown = (event) => {
      if (event.key === "Escape") {
        onOpenChange(false);
      }
    };
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKeyDown);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", onKeyDown);
    };
  }, [open, onOpenChange]);
  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 h-screen overflow-y-auto", children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      framerMotion.motion.div,
      {
        initial: { opacity: 0 },
        animate: { opacity: 1, transition: dialogTransition },
        exit: { opacity: 0, transition: dialogTransition },
        className: "fixed inset-0 h-full w-full bg-foreground/80 backdrop-blur-lg"
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsxs(
      framerMotion.motion.div,
      {
        initial: { opacity: 0, y: 24, scale: 0.98 },
        animate: {
          opacity: 1,
          y: 0,
          scale: 1,
          transition: dialogTransition
        },
        exit: {
          opacity: 0,
          y: 12,
          scale: 0.98,
          transition: dialogTransition
        },
        ref: containerRef,
        role: "dialog",
        "aria-modal": "true",
        "aria-labelledby": title ? titleId : void 0,
        "aria-describedby": description ? descriptionId : void 0,
        className: cn(
          "relative z-60 mx-auto my-12 flex w-[92vw] max-h-[85vh] flex-col overflow-hidden rounded-3xl bg-background shadow-2xl ring-1 ring-border/10",
          size === "compact" ? "p-0 md:my-20" : "p-6 md:my-20 md:p-12",
          sizeStyles[size],
          className
        ),
        children: [
          featuredMediaHeader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden", children: [
            featuredMediaHeader,
            /* @__PURE__ */ jsxRuntime.jsx(
              "button",
              {
                type: "button",
                "aria-label": "Close dialog",
                className: "absolute right-4 top-4 z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-foreground/90 text-background backdrop-blur-sm transition hover:bg-foreground md:h-11 md:w-11",
                onClick: () => onOpenChange(false),
                children: /* @__PURE__ */ jsxRuntime.jsx(
                  "svg",
                  {
                    xmlns: "http://www.w3.org/2000/svg",
                    width: "24",
                    height: "24",
                    viewBox: "0 0 24 24",
                    children: /* @__PURE__ */ jsxRuntime.jsx(
                      "path",
                      {
                        fill: "none",
                        stroke: "currentColor",
                        strokeLinecap: "round",
                        strokeLinejoin: "round",
                        strokeWidth: "2",
                        d: "M18 6L6 18M6 6l12 12"
                      }
                    )
                  }
                )
              }
            )
          ] }) : null,
          /* @__PURE__ */ jsxRuntime.jsxs(
            "div",
            {
              className: cn(
                "flex items-start justify-between gap-8",
                size === "compact" && featuredMediaHeader ? "px-6 pt-6 md:px-8 md:pt-8" : "",
                !featuredMediaHeader ? "" : ""
              ),
              children: [
                header ? header : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
                  eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-primary", children: eyebrow }) : null,
                  title ? /* @__PURE__ */ jsxRuntime.jsx(
                    "h2",
                    {
                      id: titleId,
                      className: "text-2xl font-semibold text-foreground md:text-4xl",
                      children: title
                    }
                  ) : null,
                  description ? /* @__PURE__ */ jsxRuntime.jsx(
                    "p",
                    {
                      id: descriptionId,
                      className: "text-sm text-muted-foreground md:text-base",
                      children: description
                    }
                  ) : null
                ] }),
                !featuredMediaHeader ? /* @__PURE__ */ jsxRuntime.jsx(
                  "button",
                  {
                    type: "button",
                    "aria-label": "Close dialog",
                    className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-foreground text-background transition hover:bg-foreground/80 md:h-11 md:w-11",
                    onClick: () => onOpenChange(false),
                    children: /* @__PURE__ */ jsxRuntime.jsx(
                      "svg",
                      {
                        xmlns: "http://www.w3.org/2000/svg",
                        width: "24",
                        height: "24",
                        viewBox: "0 0 24 24",
                        children: /* @__PURE__ */ jsxRuntime.jsx(
                          "path",
                          {
                            fill: "none",
                            stroke: "currentColor",
                            strokeLinecap: "round",
                            strokeLinejoin: "round",
                            strokeWidth: "2",
                            d: "M18 6L6 18M6 6l12 12"
                          }
                        )
                      }
                    )
                  }
                ) : null
              ]
            }
          ),
          children ? /* @__PURE__ */ jsxRuntime.jsx(
            "div",
            {
              className: cn(
                "flex-1 min-h-0 overflow-y-auto",
                size === "compact" && featuredMediaHeader ? "mt-6 px-6 pb-6 md:mt-8 md:px-8 md:pb-8" : "mt-8 pr-2 md:mt-10",
                contentClassName
              ),
              children
            }
          ) : null,
          footer ? /* @__PURE__ */ jsxRuntime.jsx(
            "div",
            {
              className: cn(
                size === "compact" && featuredMediaHeader ? "px-6 pb-6 md:px-8 md:pb-8" : "mt-8 md:mt-10"
              ),
              children: footer
            }
          ) : null
        ]
      }
    )
  ] }) : null });
}
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 = React2__namespace.default.forwardRef(
  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
    const Component = as;
    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "100",
          height: "100",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              "path",
              {
                d: "M0 50h40M60 50h40M50 0v40M50 60v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "1",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "3", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "0", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "100", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "0", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "100", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridDotsPattern = (id, mask) => /* @__PURE__ */ jsxRuntime.jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "40",
          height: "40",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              "path",
              {
                d: "M0 20h40M20 0v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "0.5",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "20", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridPattern = (size, mask) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = React2__namespace.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__ */ jsxRuntime.jsxs(
      "section",
      {
        ref,
        id,
        className: cn(
          "relative",
          pattern ? "overflow-hidden" : null,
          backgroundStyles[background],
          isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
          className
        ),
        style,
        ...props,
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            PatternBackground,
            {
              pattern,
              opacity: effectivePatternOpacity,
              className: patternClassName
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsxs(
            Container,
            {
              maxWidth: containerMaxWidth,
              className: cn("relative z-10", containerClassName),
              children: [
                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                ] }),
                children
              ]
            }
          )
        ]
      }
    );
  }
);
Section.displayName = "Section";
function ServicesListExpandableCards({
  title,
  subtitle,
  services = [],
  optixFlowConfig,
  enableLayoutAnimations = true,
  background,
  spacing,
  pattern,
  patternOpacity,
  className,
  gridClassName,
  cardClassName
}) {
  const [openServiceId, setOpenServiceId] = React2__namespace.useState(null);
  const openService = (id) => {
    setOpenServiceId(id);
  };
  const closeService = () => {
    setOpenServiceId(null);
  };
  const openServiceData = services.find(
    (service) => service.id === openServiceId
  );
  return /* @__PURE__ */ jsxRuntime.jsxs(
    Section,
    {
      title,
      subtitle,
      background,
      spacing,
      pattern,
      patternOpacity,
      className: cn(className),
      children: [
        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-wrap gap-4 md:gap-5", gridClassName), children: services.map((service, index) => {
          const isWide = index % 4 === 0 || index % 4 === 3;
          return /* @__PURE__ */ jsxRuntime.jsx(
            react.motion.li,
            {
              initial: { opacity: 0, y: 20 },
              animate: { opacity: 1, y: 0 },
              transition: {
                duration: 0.5,
                delay: 0.1 * index,
                ease: "easeOut"
              },
              className: cn(
                "relative h-[280px] flex-[0_0_calc(50%-0.5rem)] overflow-hidden rounded-3xl md:h-[420px] md:flex-[0_0_40%]",
                isWide && "md:flex-[0_0_calc(60%-1.25rem)]",
                cardClassName
              ),
              children: /* @__PURE__ */ jsxRuntime.jsx(
                pressable.Pressable,
                {
                  onClick: () => openService(service.id),
                  asButton: true,
                  className: "h-full w-full",
                  children: /* @__PURE__ */ jsxRuntime.jsxs(
                    react.motion.div,
                    {
                      className: cn(
                        "relative h-full w-full overflow-hidden rounded-3xl",
                        service.theme === "dark" ? "bg-background" : "bg-foreground"
                      ),
                      layoutId: enableLayoutAnimations ? `card-container-${service.id}` : void 0,
                      children: [
                        /* @__PURE__ */ jsxRuntime.jsx(
                          react.motion.div,
                          {
                            className: "relative flex h-full flex-col justify-stretch overflow-hidden",
                            layoutId: enableLayoutAnimations ? `card-image-container-${service.id}` : void 0,
                            children: /* @__PURE__ */ jsxRuntime.jsx(
                              img.Img,
                              {
                                src: service.image.src,
                                alt: service.image.alt,
                                className: "absolute inset-0 h-full w-full object-cover",
                                style: {
                                  top: service.imageStyles?.top ? `${service.imageStyles.top}px` : void 0,
                                  bottom: service.imageStyles?.bottom ? `${service.imageStyles.bottom}px` : void 0,
                                  width: service.imageStyles?.width || "100%",
                                  left: service.imageStyles?.left ? `${service.imageStyles.left}px` : void 0
                                },
                                optixFlowConfig
                              }
                            )
                          }
                        ),
                        /* @__PURE__ */ jsxRuntime.jsxs(
                          react.motion.div,
                          {
                            className: "absolute left-4 top-4 max-w-xs md:left-4 md:top-4",
                            layoutId: enableLayoutAnimations ? `title-container-${service.id}` : void 0,
                            layout: enableLayoutAnimations ? "position" : false,
                            children: [
                              /* @__PURE__ */ jsxRuntime.jsx(
                                "span",
                                {
                                  className: cn(
                                    "text-sm font-medium uppercase md:text-base",
                                    service.theme === "dark" ? "text-foreground" : "text-background"
                                  ),
                                  children: service.category
                                }
                              ),
                              /* @__PURE__ */ jsxRuntime.jsx(
                                "h3",
                                {
                                  className: cn(
                                    "mt-2 text-balance font-sans text-xl font-semibold md:text-3xl",
                                    service.theme === "dark" ? "text-foreground" : "text-background"
                                  ),
                                  children: service.title
                                }
                              )
                            ]
                          }
                        )
                      ]
                    }
                  )
                }
              )
            },
            service.id
          );
        }) }),
        openServiceData && /* @__PURE__ */ jsxRuntime.jsx(
          AnimatedDialog,
          {
            open: !!openServiceId,
            onOpenChange: (open) => {
              if (!open) closeService();
            },
            size: "compact",
            featuredMediaHeader: /* @__PURE__ */ jsxRuntime.jsxs(
              react.motion.div,
              {
                className: "relative h-[280px] w-full overflow-hidden md:h-[420px]",
                layoutId: enableLayoutAnimations ? `card-image-container-${openServiceData.id}` : void 0,
                children: [
                  /* @__PURE__ */ jsxRuntime.jsx(
                    img.Img,
                    {
                      src: openServiceData.image.src,
                      alt: openServiceData.image.alt,
                      className: "absolute inset-0 h-full w-full object-cover",
                      style: {
                        top: openServiceData.imageStyles?.top ? `${openServiceData.imageStyles.top}px` : void 0,
                        bottom: openServiceData.imageStyles?.bottom ? `${openServiceData.imageStyles.bottom}px` : void 0,
                        width: openServiceData.imageStyles?.width || "100%",
                        left: openServiceData.imageStyles?.left ? `${openServiceData.imageStyles.left}px` : void 0
                      },
                      optixFlowConfig
                    }
                  ),
                  /* @__PURE__ */ jsxRuntime.jsxs(
                    react.motion.div,
                    {
                      className: "absolute left-6 top-6 z-10 max-w-xs md:left-8 md:top-8",
                      layoutId: enableLayoutAnimations ? `title-container-${openServiceData.id}` : void 0,
                      layout: enableLayoutAnimations ? "position" : false,
                      children: [
                        /* @__PURE__ */ jsxRuntime.jsx(
                          "span",
                          {
                            className: cn(
                              "text-sm font-medium uppercase md:text-base",
                              openServiceData.theme === "dark" ? "text-foreground" : "text-background"
                            ),
                            children: openServiceData.category
                          }
                        ),
                        /* @__PURE__ */ jsxRuntime.jsx(
                          "h2",
                          {
                            className: cn(
                              "mt-2 text-balance font-sans text-2xl font-semibold md:text-4xl",
                              openServiceData.theme === "dark" ? "text-foreground" : "text-background"
                            ),
                            children: openServiceData.title
                          }
                        )
                      ]
                    }
                  )
                ]
              }
            ),
            children: openServiceData.content
          }
        )
      ]
    }
  );
}

exports.ServicesListExpandableCards = ServicesListExpandableCards;
