"use client";
'use strict';

var React = require('react');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var img = require('@page-speed/img');
var classVarianceAuthority = require('class-variance-authority');
var jsxRuntime = require('react/jsx-runtime');
var AvatarPrimitive = require('@radix-ui/react-avatar');
var reactSlot = require('@radix-ui/react-slot');
var SeparatorPrimitive = require('@radix-ui/react-separator');

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 React__namespace = /*#__PURE__*/_interopNamespace(React);
var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);

// components/blocks/case-study-detail/case-study-toc-social-sidebar.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
function normalizePhoneNumber(input) {
  const trimmed = input.trim();
  if (trimmed.toLowerCase().startsWith("tel:")) {
    return trimmed;
  }
  const match = trimmed.match(/^[\s\+\-\(\)]*(\d[\d\s\-\(\)\.]*\d)[\s\-]*(x|ext\.?|extension)?[\s\-]*(\d+)?$/i);
  if (match) {
    const mainNumber = match[1].replace(/[\s\-\(\)\.]/g, "");
    const extension = match[3];
    const normalized = mainNumber.length >= 10 && !trimmed.startsWith("+") ? `+${mainNumber}` : mainNumber;
    const withExtension = extension ? `${normalized};ext=${extension}` : normalized;
    return `tel:${withExtension}`;
  }
  const cleaned = trimmed.replace(/[\s\-\(\)\.]/g, "");
  return `tel:${cleaned}`;
}
function normalizeEmail(input) {
  const trimmed = input.trim();
  if (trimmed.toLowerCase().startsWith("mailto:")) {
    return trimmed;
  }
  return `mailto:${trimmed}`;
}
function isEmail(input) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(input.trim());
}
function isPhoneNumber(input) {
  const trimmed = input.trim();
  if (trimmed.toLowerCase().startsWith("tel:")) {
    return true;
  }
  const phoneRegex = /^[\s\+\-\(\)]*\d[\d\s\-\(\)\.]*\d[\s\-]*(x|ext\.?|extension)?[\s\-]*\d*$/i;
  return phoneRegex.test(trimmed);
}
function isInternalUrl(href) {
  if (typeof window === "undefined") {
    return href.startsWith("/") && !href.startsWith("//");
  }
  const trimmed = href.trim();
  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
    return true;
  }
  try {
    const url = new URL(trimmed, window.location.href);
    const currentOrigin = window.location.origin;
    const normalizeOrigin = (origin) => origin.replace(/^(https?:\/\/)(www\.)?/, "$1");
    return normalizeOrigin(url.origin) === normalizeOrigin(currentOrigin);
  } catch {
    return false;
  }
}
function toRelativePath(href) {
  if (typeof window === "undefined") {
    return href;
  }
  const trimmed = href.trim();
  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
    return trimmed;
  }
  try {
    const url = new URL(trimmed, window.location.href);
    const currentOrigin = window.location.origin;
    const normalizeOrigin = (origin) => origin.replace(/^(https?:\/\/)(www\.)?/, "$1");
    if (normalizeOrigin(url.origin) === normalizeOrigin(currentOrigin)) {
      return url.pathname + url.search + url.hash;
    }
  } catch {
  }
  return trimmed;
}
function useNavigation({
  href,
  onClick
} = {}) {
  const linkType = React__namespace.useMemo(() => {
    if (!href || href.trim() === "") {
      return onClick ? "none" : "none";
    }
    const trimmed = href.trim();
    if (trimmed.toLowerCase().startsWith("mailto:") || isEmail(trimmed)) {
      return "mailto";
    }
    if (trimmed.toLowerCase().startsWith("tel:") || isPhoneNumber(trimmed)) {
      return "tel";
    }
    if (isInternalUrl(trimmed)) {
      return "internal";
    }
    try {
      new URL(trimmed, typeof window !== "undefined" ? window.location.href : "http://localhost");
      return "external";
    } catch {
      return "internal";
    }
  }, [href, onClick]);
  const normalizedHref = React__namespace.useMemo(() => {
    if (!href || href.trim() === "") {
      return void 0;
    }
    const trimmed = href.trim();
    switch (linkType) {
      case "tel":
        return normalizePhoneNumber(trimmed);
      case "mailto":
        return normalizeEmail(trimmed);
      case "internal":
        return toRelativePath(trimmed);
      case "external":
        return trimmed;
      default:
        return trimmed;
    }
  }, [href, linkType]);
  const target = React__namespace.useMemo(() => {
    switch (linkType) {
      case "external":
        return "_blank";
      case "internal":
        return "_self";
      case "mailto":
      case "tel":
        return void 0;
      default:
        return void 0;
    }
  }, [linkType]);
  const rel = React__namespace.useMemo(() => {
    if (linkType === "external") {
      return "noopener noreferrer";
    }
    return void 0;
  }, [linkType]);
  const isExternal = linkType === "external";
  const isInternal = linkType === "internal";
  const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
  const handleClick = React__namespace.useCallback(
    (event) => {
      if (onClick) {
        try {
          onClick(event);
        } catch (error) {
          console.error("Error in user onClick handler:", error);
        }
      }
      if (event.defaultPrevented) {
        return;
      }
      if (shouldUseRouter && normalizedHref && event.button === 0 && // left-click only
      !event.metaKey && !event.altKey && !event.ctrlKey && !event.shiftKey) {
        if (typeof window !== "undefined") {
          const handler = window.__opensiteNavigationHandler;
          if (typeof handler === "function") {
            try {
              const handled = handler(normalizedHref, event.nativeEvent || event);
              if (handled !== false) {
                event.preventDefault();
              }
            } catch (error) {
              console.error("Error in navigation handler:", error);
            }
          }
        }
      }
    },
    [onClick, shouldUseRouter, normalizedHref]
  );
  return {
    linkType,
    normalizedHref,
    target,
    rel,
    isExternal,
    isInternal,
    shouldUseRouter,
    handleClick
  };
}
var baseStyles = [
  // Layout
  "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
  // Typography - using CSS variables with sensible defaults
  "font-[var(--button-font-family,inherit)]",
  "font-[var(--button-font-weight,500)]",
  "tracking-[var(--button-letter-spacing,0)]",
  "leading-[var(--button-line-height,1.25)]",
  "[text-transform:var(--button-text-transform,none)]",
  "text-sm",
  // Border radius
  "rounded-[var(--button-radius,var(--radius,0.375rem))]",
  // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
  "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
  // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
  "[box-shadow:var(--button-shadow,none)]",
  "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
  // Disabled state
  "disabled:pointer-events-none disabled:opacity-50",
  // SVG handling
  "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
  // Focus styles
  "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
  // Invalid state
  "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
].join(" ");
var buttonVariants = classVarianceAuthority.cva(baseStyles, {
  variants: {
    variant: {
      // Default (Primary) variant - full customization
      default: [
        "bg-[var(--button-default-bg,hsl(var(--primary)))]",
        "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
        "border-[length:var(--button-default-border-width,0px)]",
        "border-[color:var(--button-default-border,transparent)]",
        "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
        "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
        "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
        "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
        "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
      ].join(" "),
      // Destructive variant - full customization
      destructive: [
        "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
        "text-[var(--button-destructive-fg,white)]",
        "border-[length:var(--button-destructive-border-width,0px)]",
        "border-[color:var(--button-destructive-border,transparent)]",
        "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
        "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
        "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
        "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
        "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
        "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
        "dark:bg-destructive/60"
      ].join(" "),
      // Outline variant - full customization with proper border handling
      outline: [
        "bg-[var(--button-outline-bg,hsl(var(--background)))]",
        "text-[var(--button-outline-fg,inherit)]",
        "border-[length:var(--button-outline-border-width,1px)]",
        "border-[color:var(--button-outline-border,hsl(var(--border)))]",
        "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
        "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
        "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
        "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
        "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
        "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
      ].join(" "),
      // Secondary variant - full customization
      secondary: [
        "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
        "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
        "border-[length:var(--button-secondary-border-width,0px)]",
        "border-[color:var(--button-secondary-border,transparent)]",
        "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
        "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
        "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
        "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
        "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
      ].join(" "),
      // Ghost variant - full customization
      ghost: [
        "bg-[var(--button-ghost-bg,transparent)]",
        "text-[var(--button-ghost-fg,inherit)]",
        "border-[length:var(--button-ghost-border-width,0px)]",
        "border-[color:var(--button-ghost-border,transparent)]",
        "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
        "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
        "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
        "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
        "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
        "dark:hover:bg-accent/50"
      ].join(" "),
      // Link variant - full customization
      link: [
        "bg-[var(--button-link-bg,transparent)]",
        "text-[var(--button-link-fg,hsl(var(--primary)))]",
        "border-[length:var(--button-link-border-width,0px)]",
        "border-[color:var(--button-link-border,transparent)]",
        "[box-shadow:var(--button-link-shadow,none)]",
        "hover:bg-[var(--button-link-hover-bg,transparent)]",
        "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
        "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
        "underline-offset-4 hover:underline"
      ].join(" ")
    },
    size: {
      default: [
        "h-[var(--button-height-md,2.25rem)]",
        "px-[var(--button-padding-x-md,1rem)]",
        "py-[var(--button-padding-y-md,0.5rem)]",
        "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
      ].join(" "),
      sm: [
        "h-[var(--button-height-sm,2rem)]",
        "px-[var(--button-padding-x-sm,0.75rem)]",
        "py-[var(--button-padding-y-sm,0.25rem)]",
        "gap-1.5",
        "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
      ].join(" "),
      md: [
        "h-[var(--button-height-md,2.25rem)]",
        "px-[var(--button-padding-x-md,1rem)]",
        "py-[var(--button-padding-y-md,0.5rem)]",
        "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
      ].join(" "),
      lg: [
        "h-[var(--button-height-lg,2.5rem)]",
        "px-[var(--button-padding-x-lg,1.5rem)]",
        "py-[var(--button-padding-y-lg,0.5rem)]",
        "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
      ].join(" "),
      icon: "size-[var(--button-height-md,2.25rem)]",
      "icon-sm": "size-[var(--button-height-sm,2rem)]",
      "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
    }
  },
  defaultVariants: {
    variant: "default",
    size: "default"
  }
});
var Pressable = React__namespace.forwardRef(
  ({
    children,
    className,
    href,
    onClick,
    variant,
    size,
    asButton = false,
    fallbackComponentType = "span",
    componentType,
    "aria-label": ariaLabel,
    "aria-describedby": ariaDescribedby,
    id,
    ...props
  }, ref) => {
    const navigation = useNavigation({ href, onClick });
    const {
      normalizedHref,
      target,
      rel,
      linkType,
      isInternal,
      handleClick
    } = navigation;
    const shouldRenderLink = normalizedHref && linkType !== "none";
    const shouldRenderButton = !shouldRenderLink && onClick;
    const effectiveComponentType = componentType || (shouldRenderLink ? "a" : shouldRenderButton ? "button" : fallbackComponentType);
    const finalComponentType = isInternal && shouldRenderLink ? "a" : effectiveComponentType;
    const shouldApplyButtonStyles = asButton || variant || size;
    const combinedClassName = cn(
      shouldApplyButtonStyles && buttonVariants({ variant, size }),
      className
    );
    const dataProps = Object.fromEntries(
      Object.entries(props).filter(([key]) => key.startsWith("data-"))
    );
    const buttonDataAttributes = shouldApplyButtonStyles ? {
      "data-slot": "button",
      "data-variant": variant ?? "default",
      "data-size": size ?? "default"
    } : {};
    const commonProps = {
      className: combinedClassName,
      onClick: handleClick,
      "aria-label": ariaLabel,
      "aria-describedby": ariaDescribedby,
      id,
      ...dataProps,
      ...buttonDataAttributes
    };
    if (finalComponentType === "a" && shouldRenderLink) {
      return /* @__PURE__ */ jsxRuntime.jsx(
        "a",
        {
          ref,
          href: normalizedHref,
          target,
          rel,
          ...commonProps,
          ...props,
          children
        }
      );
    }
    if (finalComponentType === "button") {
      return /* @__PURE__ */ jsxRuntime.jsx(
        "button",
        {
          ref,
          type: props.type || "button",
          ...commonProps,
          ...props,
          children
        }
      );
    }
    if (finalComponentType === "div") {
      return /* @__PURE__ */ jsxRuntime.jsx(
        "div",
        {
          ref,
          ...commonProps,
          children
        }
      );
    }
    return /* @__PURE__ */ jsxRuntime.jsx(
      "span",
      {
        ref,
        ...commonProps,
        children
      }
    );
  }
);
Pressable.displayName = "Pressable";
var svgCache = /* @__PURE__ */ new Map();
function DynamicIcon({
  name,
  size = 28,
  color,
  className,
  alt
}) {
  const [svgContent, setSvgContent] = React__namespace.useState(null);
  const [isLoading, setIsLoading] = React__namespace.useState(true);
  const [error, setError] = React__namespace.useState(null);
  const { url, iconName } = React__namespace.useMemo(() => {
    const separator = name.includes("/") ? "/" : ":";
    const [prefix, iconName2] = name.split(separator);
    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
    return {
      url: baseUrl,
      iconName: iconName2
    };
  }, [name, size]);
  React__namespace.useEffect(() => {
    let isMounted = true;
    const fetchSvg = async () => {
      const cached = svgCache.get(url);
      if (cached) {
        if (isMounted) {
          setSvgContent(cached);
          setIsLoading(false);
        }
        return;
      }
      try {
        setIsLoading(true);
        setError(null);
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Failed to fetch icon: ${response.status}`);
        }
        let svg = await response.text();
        svg = processSvgForCurrentColor(svg);
        svgCache.set(url, svg);
        if (isMounted) {
          setSvgContent(svg);
          setIsLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          setError(err instanceof Error ? err.message : "Failed to load icon");
          setIsLoading(false);
        }
      }
    };
    fetchSvg();
    return () => {
      isMounted = false;
    };
  }, [url]);
  if (isLoading) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        "aria-hidden": "true"
      }
    );
  }
  if (error || !svgContent) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        role: "img",
        "aria-label": alt || iconName
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    "span",
    {
      className: cn("inline-flex items-center justify-center", className),
      style: {
        width: size,
        height: size,
        color: color || "inherit"
      },
      role: "img",
      "aria-label": alt || iconName,
      dangerouslySetInnerHTML: { __html: svgContent }
    }
  );
}
function processSvgForCurrentColor(svg) {
  let processed = svg;
  processed = processed.replace(
    /stroke=["'](#000000|#000|black)["']/gi,
    'stroke="currentColor"'
  );
  processed = processed.replace(
    /fill=["'](#000000|#000|black)["']/gi,
    'fill="currentColor"'
  );
  return processed;
}

// lib/blockBrandedIconsAndPlaceholders.ts
var blockBrandedIconsAndPlaceholders = {
  placeholder1: "https://cdn.ing/assets/files/record/286200/io0rg4wv8jd2o792q4uouxg4d5k8",
  shadcnUiWordmarkWhite: "https://cdn.ing/assets/files/record/286220/t34kymqu5g9xr85o89cji3kfuypb",
  avatar1: "https://cdn.ing/assets/i/r/286239/ebm7o3j2kx48vw98emnwjaf5qvl6/avatar-1.webp"};
var alertVariants = classVarianceAuthority.cva(
  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
  {
    variants: {
      variant: {
        default: "bg-card text-card-foreground",
        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
function Alert({
  className,
  variant,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-slot": "alert",
      role: "alert",
      className: cn(alertVariants({ variant }), className),
      ...props
    }
  );
}
function AlertTitle({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-slot": "alert-title",
      className: cn(
        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
        className
      ),
      ...props
    }
  );
}
function AlertDescription({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-slot": "alert-description",
      className: cn(
        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
        className
      ),
      ...props
    }
  );
}
function Avatar({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    AvatarPrimitive__namespace.Root,
    {
      "data-slot": "avatar",
      className: cn(
        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
        className
      ),
      ...props
    }
  );
}
function AvatarImage({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    AvatarPrimitive__namespace.Image,
    {
      "data-slot": "avatar-image",
      className: cn("aspect-square size-full", className),
      ...props
    }
  );
}
function Breadcrumb({ ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
}
function BreadcrumbList({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "ol",
    {
      "data-slot": "breadcrumb-list",
      className: cn(
        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
        className
      ),
      ...props
    }
  );
}
function BreadcrumbItem({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "li",
    {
      "data-slot": "breadcrumb-item",
      className: cn("inline-flex items-center gap-1.5", className),
      ...props
    }
  );
}
function BreadcrumbLink({
  asChild,
  className,
  ...props
}) {
  const Comp = asChild ? reactSlot.Slot : "a";
  return /* @__PURE__ */ jsxRuntime.jsx(
    Comp,
    {
      "data-slot": "breadcrumb-link",
      className: cn("hover:text-foreground transition-colors", className),
      ...props
    }
  );
}
function BreadcrumbPage({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "span",
    {
      "data-slot": "breadcrumb-page",
      role: "link",
      "aria-disabled": "true",
      "aria-current": "page",
      className: cn("text-foreground font-normal", className),
      ...props
    }
  );
}
function BreadcrumbSeparator({
  children,
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "li",
    {
      "data-slot": "breadcrumb-separator",
      role: "presentation",
      "aria-hidden": "true",
      className: cn("[&>svg]:size-3.5", className),
      ...props,
      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 14 })
    }
  );
}
function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    SeparatorPrimitive__namespace.Root,
    {
      "data-slot": "separator",
      decorative,
      orientation,
      className: cn(
        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      ),
      ...props
    }
  );
}
var defaultBreadcrumbs = [
  { label: "Home", href: "/" },
  { label: "Components" }
];
var defaultSocialLinks = [
  { icon: "simple-icons/linkedin", href: "#", label: "LinkedIn" },
  { icon: "simple-icons/x", href: "#", label: "X" },
  { icon: "simple-icons/facebook", href: "#", label: "Facebook" }
];
var defaultOutcomes = [
  { text: "A streamlined system that accelerates their growth initiatives" },
  { text: "A customizable CRM that mirrors their data and integrates seamlessly with their tools" },
  { text: "A scalable, collaborative solution that grows alongside their business" }
];
var defaultAuthor = {
  name: "Jane Doe",
  role: "Senior Product Manager",
  avatarSrc: blockBrandedIconsAndPlaceholders.avatar1
};
var defaultDetails = [
  { label: "Overview", value: "A modern platform designed to simplify workflows, automate processes, and drive innovation at scale. It is the central foundation for product and customer data, on top of which high impact workflows are built." },
  { label: "Sector", value: "Technology; Automation" },
  { label: "Team size", value: "10-100" },
  { label: "Location", value: "San Francisco, California" },
  { label: "Established", value: "2020" },
  { label: "Funding", value: "$25m (Series A)" },
  { label: "Core features", value: "Dashboards Tools API integration" }
];
var defaultSections = [
  {
    id: "section1",
    title: "The King's Plan",
    content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
        "The king thought long and hard, and finally came up with",
        " ",
        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", children: "a brilliant plan" }),
        ": he would tax the jokes in the kingdom."
      ] }),
      /* @__PURE__ */ jsxRuntime.jsx("blockquote", { children: "\u201CAfter all,\u201D he said, \u201Ceveryone enjoys a good joke, so it's only fair that they should pay for the privilege.\u201D" })
    ] })
  },
  {
    id: "section2",
    title: "The Joke Tax",
    content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The king's subjects were not amused. They grumbled and complained, but the king was firm:" }),
      /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
        /* @__PURE__ */ jsxRuntime.jsx("li", { children: "1st level of puns: 5 gold coins" }),
        /* @__PURE__ */ jsxRuntime.jsx("li", { children: "2nd level of jokes: 10 gold coins" }),
        /* @__PURE__ */ jsxRuntime.jsx("li", { children: "3rd level of one-liners : 20 gold coins" })
      ] }),
      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester." })
    ] })
  },
  {
    id: "section3",
    title: "Jokester's Revolt",
    content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-7 not-first:mt-6", children: "Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester." }),
      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-7 not-first:mt-6", children: "And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop." })
    ] })
  },
  {
    id: "section4",
    title: "The People's Rebellion",
    content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke." }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("table", { children: [
        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
          /* @__PURE__ */ jsxRuntime.jsx("th", { children: "King's Treasury" }),
          /* @__PURE__ */ jsxRuntime.jsx("th", { children: "People's happiness" })
        ] }) }),
        /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
          /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
            /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Empty" }),
            /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Overflowing" })
          ] }),
          /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "m-0 border-t p-0 even:bg-muted", children: [
            /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Modest" }),
            /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Satisfied" })
          ] }),
          /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "m-0 border-t p-0 even:bg-muted", children: [
            /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Full" }),
            /* @__PURE__ */ jsxRuntime.jsx("td", { children: "Ecstatic" })
          ] })
        ] })
      ] }) }),
      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after." }),
      /* @__PURE__ */ jsxRuntime.jsxs(Alert, { children: [
        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/lightbulb", size: 16, className: "h-4 w-4" }),
        /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Royal Decree!" }),
        /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Remember, all jokes must be registered at the Royal Jest Office before telling them" })
      ] })
    ] })
  }
];
function CaseStudyTocSocialSidebar({
  breadcrumbs = defaultBreadcrumbs,
  breadcrumbsSlot,
  title = "How this tool helps teams achieve efficient workflows",
  heroImageSrc = blockBrandedIconsAndPlaceholders.placeholder1,
  heroImageAlt = "Case study hero image",
  heroMediaSlot,
  author = defaultAuthor,
  authorSlot,
  authorLabel = "Featuring insights from:",
  companyLogoSrc = blockBrandedIconsAndPlaceholders.shadcnUiWordmarkWhite,
  companyLogoAlt = "Company logo",
  companyLogoSlot,
  details = defaultDetails,
  problem = "The team faced difficulties aligning their growth strategy with a rigid data model, causing inefficiencies and limited access to essential customer insights.",
  approach = "Adopted a flexible platform as the central hub for data, enabling the creation of impactful workflows to drive growth.",
  outcomes = defaultOutcomes,
  summarySlot,
  sections = defaultSections,
  contentSlot,
  socialLinks = defaultSocialLinks,
  socialLinksSlot,
  socialLinksLabel = "Share this content:",
  sidebarSlot,
  tocSlot,
  tocLabel = "On this page",
  className,
  containerClassName,
  headerClassName,
  breadcrumbsClassName,
  titleClassName,
  heroImageClassName,
  authorClassName,
  layoutClassName,
  sidebarClassName,
  companyLogoClassName,
  detailItemClassName,
  mainClassName,
  summaryClassName,
  proseClassName,
  tocClassName,
  socialLinksClassName,
  optixFlowConfig
}) {
  const [activeSection, setActiveSection] = React.useState(null);
  const sectionRefs = React.useRef({});
  React.useEffect(() => {
    const sectionIds = Object.keys(sectionRefs.current);
    const observerCallback = (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setActiveSection(entry.target.id);
        }
      });
    };
    let observer = new IntersectionObserver(
      observerCallback,
      {
        root: null,
        rootMargin: "0px",
        threshold: 1
      }
    );
    sectionIds.forEach((sectionId) => {
      const element = sectionRefs.current[sectionId];
      if (element) {
        observer?.observe(element);
      }
    });
    return () => {
      observer?.disconnect();
      observer = null;
    };
  }, [sections]);
  const addSectionRef = (id, ref) => {
    if (ref) {
      sectionRefs.current[id] = ref;
    }
  };
  const renderBreadcrumbs = () => {
    if (breadcrumbsSlot) return breadcrumbsSlot;
    if (!breadcrumbs || breadcrumbs.length === 0) return null;
    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: breadcrumbsClassName, children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { className: crumb.className, children: crumb.href ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { href: crumb.href, children: crumb.label }),
      index < breadcrumbs.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, { children: "/" })
    ] }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: crumb.label }) }, index)) }) });
  };
  const renderHeroMedia = () => {
    if (heroMediaSlot) return heroMediaSlot;
    return /* @__PURE__ */ jsxRuntime.jsx(
      img.Img,
      {
        src: heroImageSrc,
        alt: heroImageAlt,
        className: cn("max-h-[524px] w-full rounded-xl object-cover lg:w-auto", heroImageClassName),
        loading: "lazy",
        optixFlowConfig
      }
    );
  };
  const renderAuthor = () => {
    if (authorSlot) return authorSlot;
    if (!author) return null;
    const avatarContent = author.avatarSlot ?? (author.avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-16 rounded-xl border", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: author.avatarSrc, alt: typeof author.name === "string" ? author.name : "Author" }) }));
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16", authorClassName), children: [
      authorLabel && (typeof authorLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: authorLabel }) : authorLabel),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 flex items-center gap-4", author.className), children: [
        avatarContent,
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
          author.name && (typeof author.name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: author.name }) : author.name),
          author.role && (typeof author.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: author.role }) : author.role)
        ] })
      ] })
    ] });
  };
  const renderCompanyLogo = () => {
    if (companyLogoSlot) return companyLogoSlot;
    return /* @__PURE__ */ jsxRuntime.jsx(
      img.Img,
      {
        src: companyLogoSrc,
        alt: companyLogoAlt,
        className: cn("h-6 dark:invert", companyLogoClassName),
        loading: "lazy",
        optixFlowConfig
      }
    );
  };
  const renderDetails = () => {
    if (!details || details.length === 0) return null;
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 grid grid-cols-2 gap-5 lg:grid-cols-1", children: details.map((detail, index) => /* @__PURE__ */ jsxRuntime.jsxs(
      "div",
      {
        className: cn(
          index === 0 ? "col-span-2 lg:col-span-1" : "",
          detail.className,
          detailItemClassName
        ),
        children: [
          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold", children: detail.label }),
          detail.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: detail.href, className: "mt-1 text-sm text-muted-foreground underline hover:text-foreground", children: detail.value }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: detail.value })
        ]
      },
      index
    )) });
  };
  const renderSocialLinks = () => {
    if (socialLinksSlot) return socialLinksSlot;
    if (!socialLinks || socialLinks.length === 0) return null;
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-10 flex flex-col", socialLinksClassName), children: [
      socialLinksLabel && (typeof socialLinksLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-2 text-sm text-muted-foreground", children: socialLinksLabel }) : socialLinksLabel),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: socialLinks.map((social, index) => /* @__PURE__ */ jsxRuntime.jsx(
        Pressable,
        {
          href: social.href,
          className: cn("text-muted-foreground hover:text-primary", social.className),
          "aria-label": social.label,
          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 20, className: "size-5" })
        },
        index
      )) })
    ] });
  };
  const renderSidebar = () => {
    if (sidebarSlot) return sidebarSlot;
    return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: cn("mx-auto h-fit max-w-prose lg:sticky lg:top-10 lg:mx-0 lg:w-64 lg:max-w-none", sidebarClassName), children: [
      renderCompanyLogo(),
      renderDetails(),
      renderSocialLinks()
    ] });
  };
  const renderSummary = () => {
    if (summarySlot) return summarySlot;
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-x-10 gap-y-7 rounded-3xl border p-6 lg:grid-cols-2 lg:gap-y-10 lg:border-none lg:p-0", summaryClassName), children: [
      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Problem" }),
        typeof problem === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-muted-foreground", children: problem }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-muted-foreground", children: problem })
      ] }),
      /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "w-full lg:hidden" }),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Approach" }),
        typeof approach === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-muted-foreground", children: approach }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-muted-foreground", children: approach })
      ] }),
      outcomes && outcomes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t pt-10 lg:col-span-2", children: [
        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Outcomes" }),
        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-3 grid gap-x-10 gap-y-3 lg:grid-cols-2", children: outcomes.map((outcome, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex gap-3", outcome.className), children: [
          outcome.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: outcome.iconName ?? "lucide/check-circle-2", size: 20, className: "mt-0.5 size-5 shrink-0" }),
          typeof outcome.text === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: outcome.text }) : outcome.text
        ] }, index)) })
      ] })
    ] });
  };
  const renderContent = () => {
    if (contentSlot) return contentSlot;
    if (!sections || sections.length === 0) return null;
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-20", children: sections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs(
      "section",
      {
        id: section.id,
        ref: (ref) => addSectionRef(section.id, ref),
        className: cn("prose mb-8 dark:prose-invert", section.className, proseClassName),
        children: [
          /* @__PURE__ */ jsxRuntime.jsx("h2", { children: section.title }),
          section.content
        ]
      },
      section.id
    )) });
  };
  const renderToc = () => {
    if (tocSlot) return tocSlot;
    if (!sections || sections.length === 0) return null;
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("sticky top-8 hidden h-fit shrink-0 lg:block", tocClassName), children: [
      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-sm", children: [
        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/align-left", size: 16, className: "h-4 w-4" }),
        tocLabel
      ] }),
      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "mt-2 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
        Pressable,
        {
          href: `#${section.id}`,
          className: cn(
            "block py-1 transition-colors duration-200",
            activeSection === section.id ? "font-medium text-primary" : "text-muted-foreground hover:text-primary"
          ),
          children: section.title
        }
      ) }, section.id)) }) })
    ] });
  };
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-prose flex-col items-center justify-between gap-10 lg:max-w-none lg:flex-row", headerClassName), children: [
      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
        renderBreadcrumbs(),
        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-10 text-5xl font-semibold text-balance lg:text-7xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10", titleClassName), children: title })),
        renderAuthor()
      ] }),
      renderHeroMedia()
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-20 flex flex-col gap-x-6 gap-y-16 lg:flex-row", layoutClassName), children: [
      renderSidebar(),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex", mainClassName), children: [
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-prose lg:max-w-4xl lg:px-20", children: [
          renderSummary(),
          renderContent()
        ] }),
        renderToc()
      ] })
    ] })
  ] }) });
}

exports.CaseStudyTocSocialSidebar = CaseStudyTocSocialSidebar;
//# sourceMappingURL=case-study-toc-social-sidebar.cjs.map
//# sourceMappingURL=case-study-toc-social-sidebar.cjs.map