"use client";
import * as React3 from 'react';
import React3__default, { useMemo } from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Img } from '@page-speed/img';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { AnimatePresence, motion } from 'motion/react';
import { Pressable, buttonVariants } from '@page-speed/pressable';

// components/blocks/hero/hero-tech-carousel.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
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 = React3__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 = React3__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";
var slideVariants = {
  initial: {
    scale: 0.98,
    opacity: 0,
    rotateX: 12
  },
  visible: {
    scale: 1,
    rotateX: 0,
    opacity: 1,
    transition: {
      duration: 0.55,
      ease: [0.645, 0.045, 0.355, 1]
    }
  },
  upExit: {
    opacity: 0.8,
    y: "-120%",
    transition: {
      duration: 0.8
    }
  },
  downExit: {
    opacity: 0.8,
    y: "120%",
    transition: {
      duration: 0.8
    }
  }
};
var normalizeIndex = (index, length) => {
  if (!length) return 0;
  const safeIndex = index % length;
  return safeIndex < 0 ? safeIndex + length : safeIndex;
};
var ImageSlider = ({
  images,
  children,
  overlay = true,
  overlaySlot,
  overlayClassName,
  className,
  imageClassName,
  contentClassName,
  autoplay = true,
  autoplayIntervalMs = 6e3,
  direction = "up",
  transition = "slide",
  startIndex = 0,
  enableKeyboard = true,
  onSlideChange,
  optixFlowConfig
}) => {
  const hasImages = images.length > 0;
  const [currentIndex, setCurrentIndex] = React3.useState(
    () => normalizeIndex(startIndex, images.length)
  );
  const handleNext = React3.useCallback(() => {
    if (!hasImages) return;
    setCurrentIndex((prevIndex) => {
      const nextIndex = prevIndex + 1 >= images.length ? 0 : prevIndex + 1;
      onSlideChange?.(nextIndex);
      return nextIndex;
    });
  }, [hasImages, images.length, onSlideChange]);
  const handlePrevious = React3.useCallback(() => {
    if (!hasImages) return;
    setCurrentIndex((prevIndex) => {
      const nextIndex = prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1;
      onSlideChange?.(nextIndex);
      return nextIndex;
    });
  }, [hasImages, images.length, onSlideChange]);
  React3.useEffect(() => {
    if (!hasImages) return;
    setCurrentIndex(normalizeIndex(startIndex, images.length));
  }, [startIndex, images.length, hasImages]);
  React3.useEffect(() => {
    if (!enableKeyboard || !hasImages) return;
    const handleKeyDown = (event) => {
      if (event.key === "ArrowRight") {
        handleNext();
      } else if (event.key === "ArrowLeft") {
        handlePrevious();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [enableKeyboard, handleNext, handlePrevious, hasImages]);
  React3.useEffect(() => {
    if (!autoplay || images.length < 2) return;
    const interval = window.setInterval(handleNext, autoplayIntervalMs);
    return () => window.clearInterval(interval);
  }, [autoplay, autoplayIntervalMs, handleNext, images.length]);
  const activeImage = hasImages ? images[currentIndex] : null;
  const overlayContent = overlaySlot ? /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 z-10", overlayClassName), children: overlaySlot }) : overlay ? /* @__PURE__ */ jsx(
    "div",
    {
      className: cn(
        "absolute inset-0 z-10 bg-linear-to-b from-black/35 via-black/50 to-black/70",
        overlayClassName
      )
    }
  ) : null;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "relative flex min-h-[420px] w-full items-center justify-center overflow-hidden rounded-3xl border border-border/40 bg-muted/30 shadow-2xl",
        className
      ),
      style: {
        perspective: "1000px"
      },
      children: [
        transition === "fade" ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsx(
          "div",
          {
            "aria-hidden": index !== currentIndex,
            className: cn(
              "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
              index === currentIndex && "opacity-100"
            ),
            children: /* @__PURE__ */ jsx(
              Img,
              {
                src: image.src,
                alt: image.alt,
                className: cn(
                  "h-full w-full object-cover object-center",
                  imageClassName,
                  image.className
                ),
                optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
                loading: "eager"
              }
            )
          },
          `${image.src ?? "image"}-${index}`
        )) }) : /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsx(
          motion.div,
          {
            initial: "initial",
            animate: "visible",
            exit: direction === "up" ? "upExit" : "downExit",
            variants: slideVariants,
            className: "absolute inset-0",
            children: /* @__PURE__ */ jsx(
              Img,
              {
                src: activeImage.src,
                alt: activeImage.alt,
                className: cn(
                  "h-full w-full object-cover object-center",
                  imageClassName,
                  activeImage.className
                ),
                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
                loading: "eager"
              }
            )
          },
          `${currentIndex}-${activeImage.src ?? "image"}`
        ) : null }),
        overlayContent,
        children ? /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "relative z-20 flex w-full flex-col items-center justify-center px-6 py-12 text-center text-white md:px-12",
              contentClassName
            ),
            children
          }
        ) : null
      ]
    }
  );
};
var MOBILE_CLASSES = {
  "fit-left": "items-start md:items-center",
  "fit-center": "items-center",
  "fit-right": "items-end md:items-center",
  "full-left": "items-stretch md:items-center",
  "full-center": "items-stretch md:items-center",
  "full-right": "items-stretch md:items-center"
};
function BlockActions({
  mobileConfig,
  actionsClassName,
  verticalSpacing = "mt-4 md:mt-8",
  actions,
  actionsSlot
}) {
  const width = mobileConfig?.width ?? "full";
  const position = mobileConfig?.position ?? "center";
  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
  if (actionsSlot) {
    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
  } else if (actions && actions?.length > 0) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "flex flex-col md:flex-row flex-wrap gap-4",
          mobileLayoutClass,
          actionsClassName,
          verticalSpacing
        ),
        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
      }
    );
  } else {
    return null;
  }
}
function ActionComponent({ action }) {
  const {
    label,
    icon,
    iconAfter,
    children,
    href,
    onClick,
    asButton,
    variant,
    size,
    className: actionClassName,
    ...pressableProps
  } = action;
  const shouldStyleAsButton = asButton ?? true;
  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
  return /* @__PURE__ */ jsx(
    Pressable,
    {
      href,
      onClick,
      asButton: shouldStyleAsButton,
      variant: resolvedVariant,
      size: resolvedSize,
      "data-slot": shouldStyleAsButton ? "button" : void 0,
      "data-variant": resolvedVariant,
      "data-size": resolvedSize,
      className: cn(
        shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
        actionClassName
      ),
      ...pressableProps,
      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
        icon,
        label,
        iconAfter
      ] })
    }
  );
}
var SIZE_CLASSES = {
  sm: "max-h-6 sm:max-h-7",
  md: "max-h-8 sm:max-h-9 lg:max-h-10",
  lg: "max-h-10 sm:max-h-12 lg:max-h-14",
  xl: "max-h-12 sm:max-h-14 lg:max-h-16"
};
var BrandLogo = ({
  logo,
  logoSlot,
  logoClassName,
  size = "md",
  optixFlowConfig
}) => {
  if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
  if (!logo || !logo.src) return null;
  const imgElement = /* @__PURE__ */ jsx(
    Img,
    {
      src: logo.src,
      className: cn(
        "w-auto object-contain",
        SIZE_CLASSES[size],
        logo.className
      ),
      alt: logo.alt || "Logo",
      optixFlowConfig,
      loading: "eager"
    }
  );
  if (logo.url) {
    return /* @__PURE__ */ jsx(
      Pressable,
      {
        href: logo.url,
        className: cn("flex items-center", logoClassName),
        children: imgElement
      }
    );
  }
  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center", logoClassName), children: imgElement });
};
var brand_logo_default = BrandLogo;
var HERO_TECH_CAROUSEL_MAX_ITEMS = 4;
function HeroPanel({
  item,
  defaultAutoplayIntervalMs,
  optixFlowConfig,
  panelContentClassName
}) {
  const {
    logo,
    logoSlot,
    logoClassName,
    title,
    content,
    actions,
    backgroundMedia,
    backgroundAutoplayIntervalMs,
    id,
    className,
    contentClassName,
    titleClassName,
    textClassName,
    actionsClassName,
    overlayClassName,
    optixFlowConfig: itemOptixFlowConfig
  } = item;
  const resolvedOptixFlow = itemOptixFlowConfig ?? optixFlowConfig;
  const renderBackground = useMemo(() => {
    if (!backgroundMedia || backgroundMedia.length === 0) return null;
    if (backgroundMedia.length === 1) {
      const image = backgroundMedia[0];
      if (!image?.src) return null;
      return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
        /* @__PURE__ */ jsx(
          Img,
          {
            src: image.src,
            alt: image.alt ?? "",
            className: cn(
              "h-full w-full object-cover object-center",
              image.className
            ),
            optixFlowConfig: image.optixFlowConfig ?? resolvedOptixFlow,
            loading: "eager"
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "absolute inset-0 bg-linear-to-b from-black/55 via-black/45 to-black/65",
              overlayClassName
            )
          }
        )
      ] });
    }
    return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
      /* @__PURE__ */ jsx(
        ImageSlider,
        {
          images: backgroundMedia,
          className: "h-full w-full rounded-none border-0 shadow-none",
          imageClassName: "object-cover object-center",
          transition: "fade",
          autoplay: true,
          autoplayIntervalMs: backgroundAutoplayIntervalMs ?? defaultAutoplayIntervalMs,
          enableKeyboard: false,
          overlay: false,
          optixFlowConfig: resolvedOptixFlow
        }
      ),
      /* @__PURE__ */ jsx(
        "div",
        {
          className: cn(
            "absolute inset-0 bg-linear-to-b from-black/55 via-black/45 to-black/65",
            overlayClassName
          )
        }
      )
    ] });
  }, [
    backgroundMedia,
    backgroundAutoplayIntervalMs,
    defaultAutoplayIntervalMs,
    resolvedOptixFlow,
    overlayClassName
  ]);
  const hasBackground = !!backgroundMedia && backgroundMedia.length > 0;
  const renderLogo = useMemo(() => {
    if (!logoSlot && !logo?.src) return null;
    return /* @__PURE__ */ jsx("div", { className: cn("flex justify-center", logoClassName), children: /* @__PURE__ */ jsx(
      brand_logo_default,
      {
        logo,
        logoSlot,
        size: "md",
        optixFlowConfig: resolvedOptixFlow
      }
    ) });
  }, [logoSlot, logo, logoClassName, resolvedOptixFlow]);
  const hasLogo = !!renderLogo;
  const renderTitle = useMemo(() => {
    if (title === void 0 || title === null || title === "") return null;
    if (typeof title === "string") {
      return /* @__PURE__ */ jsx(
        "h2",
        {
          className: cn(
            "font-semibold text-balance",
            hasLogo ? "text-lg lg:text-xl" : "text-xl md:text-2xl lg:text-3xl",
            hasBackground && "text-white text-shadow-lg",
            titleClassName
          ),
          children: title
        }
      );
    }
    return /* @__PURE__ */ jsx("div", { className: titleClassName, children: title });
  }, [title, titleClassName, hasBackground, hasLogo]);
  const renderContent = useMemo(() => {
    if (content === void 0 || content === null || content === "")
      return null;
    if (typeof content === "string") {
      return /* @__PURE__ */ jsx(
        "p",
        {
          className: cn(
            "text-sm md:text-base leading-snug text-balance",
            hasBackground ? "text-white text-shadow-lg" : "",
            textClassName
          ),
          children: content
        }
      );
    }
    return /* @__PURE__ */ jsx("div", { className: textClassName, children: content });
  }, [content, textClassName, hasBackground]);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      id,
      "data-slot": "hero-tech-carousel-panel",
      className: cn(
        // Mobile: stack vertically with content-fit height + padding.
        "relative w-full overflow-hidden",
        // Desktop: flex children share the row equally and fill height.
        "md:h-full md:flex-1 md:basis-0 md:min-w-0",
        // Provide a default panel background when no media is supplied so
        // separators between panels remain visible.
        !hasBackground && "bg-muted/30",
        className
      ),
      children: [
        renderBackground,
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: cn(
              "relative z-10 flex h-full w-full flex-col items-center justify-center gap-4",
              // Mobile padding keeps content readable when stacked.
              "px-6 py-12 md:px-8 md:py-12 lg:px-10",
              // Center content vertically; on desktop columns can be quite tall.
              "text-center",
              panelContentClassName,
              contentClassName
            ),
            children: [
              renderLogo,
              renderTitle,
              renderContent,
              /* @__PURE__ */ jsx(
                BlockActions,
                {
                  actions,
                  actionsClassName,
                  verticalSpacing: "mt-2 md:mt-4",
                  mobileConfig: { width: "fit", position: "center" }
                }
              )
            ]
          }
        )
      ]
    }
  );
}
function HeroTechCarousel({
  sectionId = "hero-tech-carousel",
  items,
  backgroundAutoplayIntervalMs = 5e3,
  background,
  spacing = "none",
  pattern,
  patternOpacity,
  className,
  containerClassName = "px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-auto md:h-dvh w-screen flex items-stretch",
  panelsClassName,
  panelContentClassName,
  optixFlowConfig
}) {
  const visibleItems = useMemo(() => {
    if (!items || items.length === 0) return [];
    return items.slice(0, HERO_TECH_CAROUSEL_MAX_ITEMS);
  }, [items]);
  return /* @__PURE__ */ jsx(
    Section,
    {
      id: sectionId,
      background,
      spacing,
      pattern,
      patternOpacity,
      className: cn(
        "relative w-screen overflow-hidden",
        // Desktop fills the viewport; on mobile content drives the height.
        "h-auto md:h-dvh",
        "px-0 pt-0 pb-0",
        className
      ),
      containerClassName,
      children: visibleItems.length === 0 ? null : /* @__PURE__ */ jsx(
        "div",
        {
          "data-slot": "hero-tech-carousel-panels",
          className: cn(
            // Mobile: vertical stack with auto height per panel.
            "flex w-full flex-col",
            // Desktop: equal-width row that fills section height.
            "md:h-full md:flex-row md:items-stretch",
            panelsClassName
          ),
          children: visibleItems.map((item, idx) => /* @__PURE__ */ jsx(
            HeroPanel,
            {
              item,
              defaultAutoplayIntervalMs: backgroundAutoplayIntervalMs,
              optixFlowConfig,
              panelContentClassName
            },
            item.id ?? idx
          ))
        }
      )
    }
  );
}

export { HeroTechCarousel };
