"use client";
import * as React5 from 'react';
import React5__default from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Pressable } from '@page-speed/pressable';
import { Icon } from '@page-speed/icon';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';
import { Img } from '@page-speed/img';
import { Video } from '@page-speed/video';
import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
import { Lightbox } from '@page-speed/lightbox';

// components/blocks/link-page/link-tree-block.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
var DynamicIcon = React5.memo(function DynamicIcon2({
  apiKey,
  ...props
}) {
  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
});
DynamicIcon.displayName = "DynamicIcon";
var badgeVariants = cva(
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
function Badge({
  className,
  variant,
  asChild = false,
  ...props
}) {
  const Comp = asChild ? Slot : "span";
  return /* @__PURE__ */ jsx(
    Comp,
    {
      "data-slot": "badge",
      className: cn(badgeVariants({ variant }), className),
      ...props
    }
  );
}
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 = React5__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 = React5__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 platformIconMap = {
  instagram: "cib/instagram",
  linkedin: "cib/linkedin",
  google: "cib/google",
  facebook: "cib/facebook",
  tiktok: "cib/tiktok",
  youtube: "cib/youtube",
  yelp: "cib/yelp",
  spotify: "cib/spotify",
  apple: "cib/apple",
  x: "prime/twitter",
  github: "cib/github",
  snapchat: "cib/snapchat",
  discord: "cib/discord",
  dev: "simple-icons/devdotto",
  substack: "simple-icons/substack",
  reddit: "cib/reddit",
  pinterest: "cib/pinterest",
  threads: "simple-icons/threads",
  twitch: "cib/twitch",
  whatsapp: "cib/whatsapp",
  telegram: "cib/telegram",
  medium: "simple-icons/medium",
  patreon: "cib/patreon",
  onlyfans: "simple-icons/onlyfans",
  eventbrite: "cib/eventbrite",
  npmjs: "simple-icons/npm",
  crates: "cib/rust",
  rubygems: "cib/rubygems",
  behance: "cib/behance",
  dribbble: "cib/dribbble",
  unknown: "icon-park-solid/circular-connection"
};
var SocialLinkIcon = React5.forwardRef(
  ({
    platformName,
    label,
    iconSize = 20,
    iconColor,
    href,
    iconClassName,
    className,
    iconNameOverride,
    iconOnly = false,
    ...pressableProps
  }, ref) => {
    const platform = usePlatformFromUrl(href);
    const smartPlatformName = React5.useMemo(() => {
      return platform || platformName;
    }, [platform, platformName]);
    const iconName = React5.useMemo(() => {
      return iconNameOverride || platformIconMap[smartPlatformName];
    }, [iconNameOverride, smartPlatformName]);
    const accessibleLabel = React5.useMemo(() => {
      return label || platformName;
    }, [label, platformName]);
    const icon = React5.useMemo(() => {
      return /* @__PURE__ */ jsx(
        DynamicIcon,
        {
          name: iconName,
          size: iconSize,
          color: iconColor,
          className: iconClassName,
          alt: accessibleLabel
        }
      );
    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
    if (iconOnly) {
      return icon;
    }
    return /* @__PURE__ */ jsx(
      Pressable,
      {
        ref,
        href,
        "aria-label": accessibleLabel,
        className: cn(
          "inline-flex items-center justify-center transition-colors",
          className
        ),
        ...pressableProps,
        children: icon
      }
    );
  }
);
SocialLinkIcon.displayName = "SocialLinkIcon";
function LinkTreeBlock({
  sectionId = "link-tree-block",
  brandName,
  brandTagline,
  brandLogo,
  brandAvatar,
  brandVerified = false,
  verifiedIcon,
  brandSlot,
  links,
  linksSlot,
  socialLinks,
  socialLinksSlot,
  mediaGallery,
  mediaGallerySlot,
  mediaGalleryTitle,
  mediaGalleryLimit = 6,
  footerAction,
  footerSlot,
  className,
  contentClassName,
  headerClassName,
  avatarClassName,
  nameClassName,
  taglineClassName,
  verifiedBadgeClassName,
  verifiedIconClassName,
  linksClassName,
  linkClassName,
  featuredLinkClassName,
  linkIconClassName,
  linkLabelClassName,
  linkDescriptionClassName,
  linkBadgeClassName,
  linkChevronClassName,
  mediaGalleryClassName,
  mediaGalleryTitleClassName,
  mediaGalleryGridClassName,
  mediaGalleryItemClassName,
  mediaGalleryMediaClassName,
  mediaGalleryOverlayClassName,
  mediaGalleryPlayIconClassName,
  socialLinksClassName,
  socialLinkClassName,
  socialIconClassName,
  footerClassName,
  background,
  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
  spacing = "py-12 md:py-32",
  pattern,
  patternOpacity,
  patternClassName,
  backgroundPattern,
  optixFlowConfig
}) {
  const resolvedBackground = background;
  const resolvedPattern = pattern ?? backgroundPattern;
  const [lightboxOpen, setLightboxOpen] = React5.useState(false);
  const [lightboxIndex, setLightboxIndex] = React5.useState(0);
  const lightboxItems = React5.useMemo(() => {
    if (!mediaGallery || mediaGallery.length === 0) return [];
    return mediaGallery.slice(0, mediaGalleryLimit).map((item, index) => ({
      id: item.id ?? `media-${index}`,
      type: item.type,
      src: item.src,
      alt: item.alt,
      thumbnail: item.poster || item.src,
      download: item.type === "image",
      share: true
    }));
  }, [mediaGallery, mediaGalleryLimit]);
  const handleMediaClick = React5.useCallback((index) => {
    setLightboxIndex(index);
    setLightboxOpen(true);
  }, []);
  const handleLightboxClose = React5.useCallback(() => {
    setLightboxOpen(false);
  }, []);
  const resolveImage = (value, fallbackAlt) => {
    if (!value) return void 0;
    if (typeof value === "string") {
      return { src: value, alt: fallbackAlt ?? "" };
    }
    return value;
  };
  const nameForAlt = typeof brandName === "string" ? brandName : "Brand avatar";
  const resolvedAvatar = resolveImage(brandAvatar || brandLogo, nameForAlt);
  const renderBrandHeader = React5.useMemo(() => {
    if (brandSlot) return brandSlot;
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: cn(
          "flex flex-col items-center gap-4 text-center",
          headerClassName
        ),
        children: [
          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
            /* @__PURE__ */ jsx(
              "div",
              {
                className: cn(
                  "h-24 w-24 overflow-hidden rounded-full border-4 border-background bg-muted shadow-xl",
                  avatarClassName
                ),
                children: resolvedAvatar && /* @__PURE__ */ jsx(
                  Img,
                  {
                    src: resolvedAvatar.src,
                    alt: resolvedAvatar.alt,
                    className: "h-full w-full object-cover",
                    optixFlowConfig
                  }
                )
              }
            ),
            brandVerified && /* @__PURE__ */ jsx(
              "div",
              {
                className: cn(
                  "absolute -bottom-1 -right-1 rounded-full bg-primary text-primary-foreground p-1",
                  verifiedBadgeClassName
                ),
                children: verifiedIcon ?? /* @__PURE__ */ jsx(
                  DynamicIcon,
                  {
                    name: "lucide/check",
                    size: 14,
                    className: cn("", verifiedIconClassName)
                  }
                )
              }
            )
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
            brandName && (typeof brandName === "string" ? /* @__PURE__ */ jsx(
              "h1",
              {
                className: cn(
                  "text-2xl font-bold tracking-tight",
                  nameClassName
                ),
                children: brandName
              }
            ) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: brandName })),
            brandTagline && (typeof brandTagline === "string" ? /* @__PURE__ */ jsx(
              "p",
              {
                className: cn(
                  "max-w-xs text-balance text-sm",
                  taglineClassName
                ),
                children: brandTagline
              }
            ) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: brandTagline }))
          ] })
        ]
      }
    );
  }, [
    brandSlot,
    headerClassName,
    avatarClassName,
    resolvedAvatar,
    optixFlowConfig,
    brandVerified,
    verifiedBadgeClassName,
    verifiedIcon,
    verifiedIconClassName,
    brandName,
    nameClassName,
    brandTagline,
    taglineClassName
  ]);
  const renderLinks = React5.useMemo(() => {
    if (linksSlot) return linksSlot;
    if (!links || links.length === 0) return null;
    return /* @__PURE__ */ jsx("div", { className: cn("space-y-3", linksClassName), children: links.map((link, index) => {
      const isFeatured = link.featured;
      const {
        label,
        description,
        icon,
        iconName,
        children,
        className: linkItemClassName,
        featured: _featured,
        // Destructure to prevent passing to DOM
        ...pressableProps
      } = link;
      const iconElement = icon || (iconName ? /* @__PURE__ */ jsx(
        DynamicIcon,
        {
          name: iconName,
          size: 20,
          className: linkIconClassName
        }
      ) : null);
      const badgeVariant = link.badgeVariant ?? (isFeatured ? "secondary" : "default");
      if (children) {
        return /* @__PURE__ */ jsx(
          Pressable,
          {
            className: cn(
              "group relative flex w-full items-center gap-3 rounded-xl px-4 py-3.5 transition-all duration-200",
              "border border-border",
              isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground",
              linkClassName,
              isFeatured ? featuredLinkClassName : null,
              linkItemClassName
            ),
            ...pressableProps,
            children
          },
          link.id ?? index
        );
      }
      return /* @__PURE__ */ jsxs(
        Pressable,
        {
          className: cn(
            "group relative flex w-full items-center gap-3 rounded-xl px-4 py-3.5 transition-all duration-200",
            "border border-border",
            isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground",
            linkClassName,
            isFeatured ? featuredLinkClassName : null,
            linkItemClassName
          ),
          ...pressableProps,
          children: [
            iconElement,
            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-left", children: [
              label && (typeof label === "string" ? /* @__PURE__ */ jsx(
                "span",
                {
                  className: cn(
                    "block truncate text-sm font-medium",
                    linkLabelClassName
                  ),
                  children: label
                }
              ) : label),
              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                "span",
                {
                  className: cn(
                    "mt-0.5 block truncate text-xs",
                    linkDescriptionClassName
                  ),
                  children: description
                }
              ) : description)
            ] }),
            link.badge && /* @__PURE__ */ jsx(
              Badge,
              {
                variant: badgeVariant,
                className: cn("shrink-0 text-xs", linkBadgeClassName),
                children: link.badge
              }
            ),
            /* @__PURE__ */ jsx(
              DynamicIcon,
              {
                name: "lucide/chevron-right",
                size: 16,
                className: cn(
                  "shrink-0 transition-transform group-hover:translate-x-0.5",
                  isFeatured ? "text-primary-foreground" : "",
                  linkChevronClassName
                )
              }
            )
          ]
        },
        link.id ?? index
      );
    }) });
  }, [
    linksSlot,
    links,
    linksClassName,
    linkIconClassName,
    linkClassName,
    featuredLinkClassName,
    linkLabelClassName,
    linkDescriptionClassName,
    linkBadgeClassName,
    linkChevronClassName
  ]);
  const renderMediaGallery = React5.useMemo(() => {
    if (mediaGallerySlot) return mediaGallerySlot;
    if (!mediaGallery || mediaGallery.length === 0) return null;
    const items = mediaGallery.slice(0, mediaGalleryLimit);
    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", mediaGalleryClassName), children: [
      mediaGalleryTitle && (typeof mediaGalleryTitle === "string" ? /* @__PURE__ */ jsx(
        "h3",
        {
          className: cn(
            "text-center text-sm font-medium ",
            mediaGalleryTitleClassName
          ),
          children: mediaGalleryTitle
        }
      ) : mediaGalleryTitle),
      /* @__PURE__ */ jsx(
        "div",
        {
          className: cn("grid grid-cols-3 gap-2", mediaGalleryGridClassName),
          children: items.map((item, index) => /* @__PURE__ */ jsxs(
            "div",
            {
              className: cn(
                "group relative aspect-square overflow-hidden rounded-lg cursor-pointer",
                "ring-1",
                mediaGalleryItemClassName,
                item.className
              ),
              onClick: () => handleMediaClick(index),
              role: "button",
              tabIndex: 0,
              onKeyDown: (e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  handleMediaClick(index);
                }
              },
              "aria-label": `View ${item.alt || item.type} in lightbox`,
              children: [
                item.type === "video" ? /* @__PURE__ */ jsx(
                  Video,
                  {
                    src: item.src,
                    poster: item.poster,
                    className: cn(
                      "h-full w-full object-cover",
                      mediaGalleryMediaClassName,
                      item.mediaClassName
                    ),
                    muted: true,
                    loop: true,
                    playsInline: true,
                    onMouseEnter: (e) => e.currentTarget.play(),
                    onMouseLeave: (e) => {
                      e.currentTarget.pause();
                      e.currentTarget.currentTime = 0;
                    }
                  }
                ) : /* @__PURE__ */ jsx(
                  Img,
                  {
                    src: item.src,
                    alt: item.alt || "",
                    className: cn(
                      "h-full w-full object-cover transition-transform duration-300",
                      mediaGalleryMediaClassName,
                      item.mediaClassName
                    ),
                    optixFlowConfig
                  }
                ),
                /* @__PURE__ */ jsx(
                  "div",
                  {
                    className: cn(
                      "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-200",
                      mediaGalleryOverlayClassName
                    ),
                    children: item.type === "video" && /* @__PURE__ */ jsx(
                      DynamicIcon,
                      {
                        name: "lucide/play",
                        size: 24,
                        className: cn(
                          " opacity-0 transition-opacity group-hover:opacity-100",
                          mediaGalleryPlayIconClassName
                        )
                      }
                    )
                  }
                )
              ]
            },
            item.id ?? index
          ))
        }
      )
    ] });
  }, [
    mediaGallerySlot,
    mediaGallery,
    mediaGalleryLimit,
    mediaGalleryClassName,
    mediaGalleryTitle,
    mediaGalleryTitleClassName,
    mediaGalleryGridClassName,
    mediaGalleryItemClassName,
    handleMediaClick,
    mediaGalleryMediaClassName,
    optixFlowConfig,
    mediaGalleryOverlayClassName,
    mediaGalleryPlayIconClassName
  ]);
  const renderSocialLinks = React5.useMemo(() => {
    if (socialLinksSlot) return socialLinksSlot;
    if (!socialLinks || socialLinks.length === 0) return null;
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "flex flex-wrap items-center justify-center gap-2",
          socialLinksClassName
        ),
        children: socialLinks.map((social, index) => /* @__PURE__ */ jsx(
          SocialLinkIcon,
          {
            href: social.href,
            label: social["aria-label"] || (typeof social.label === "string" ? social.label : void 0),
            className: cn(
              "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
              socialLinkClassName,
              social.className
            ),
            iconClassName: socialIconClassName
          },
          social.id ?? social.href ?? index
        ))
      }
    );
  }, [
    socialLinksSlot,
    socialLinks,
    socialLinksClassName,
    socialIconClassName,
    socialLinkClassName
  ]);
  const renderFooter = React5.useMemo(() => {
    if (footerSlot) return footerSlot;
    if (!footerAction) return null;
    const resolvedFooterAction = footerAction;
    const {
      label,
      icon,
      iconAfter,
      children,
      className: actionClassName,
      ...pressableProps
    } = resolvedFooterAction;
    const defaultIcon = footerAction === void 0 ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/link", size: 12 }) : null;
    return /* @__PURE__ */ jsx(
      Pressable,
      {
        className: cn(
          "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
          footerClassName,
          actionClassName
        ),
        ...pressableProps,
        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
          icon ?? defaultIcon,
          label,
          iconAfter
        ] })
      }
    );
  }, [footerSlot, footerAction, footerClassName]);
  return /* @__PURE__ */ jsxs(
    Section,
    {
      id: sectionId,
      background: resolvedBackground,
      spacing,
      className,
      pattern: resolvedPattern,
      patternOpacity,
      patternClassName,
      containerClassName,
      children: [
        /* @__PURE__ */ jsx("div", { className: "flex min-h-screen w-full items-start justify-center py-12", children: /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-md space-y-6", contentClassName), children: [
          renderBrandHeader,
          renderLinks,
          renderMediaGallery,
          renderSocialLinks,
          /* @__PURE__ */ jsx("div", { className: "pt-4", children: renderFooter })
        ] }) }),
        lightboxOpen && lightboxItems.length > 0 && /* @__PURE__ */ jsx(
          Lightbox,
          {
            items: lightboxItems,
            initialIndex: lightboxIndex,
            layout: "horizontal",
            controls: {
              navigation: true,
              thumbnails: true,
              download: true,
              share: true,
              fullscreen: true,
              captions: true,
              counter: true
            },
            onClose: handleLightboxClose,
            enableKeyboardShortcuts: true,
            closeOnEscape: true,
            closeOnBackdropClick: true
          }
        )
      ]
    }
  );
}

export { LinkTreeBlock };
