"use client";
'use strict';

var React = require('react');
var mediaImmersive = require('@page-speed/media-immersive');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var icon = require('@page-speed/icon');
var jsxRuntime = require('react/jsx-runtime');

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

var React__namespace = /*#__PURE__*/_interopNamespace(React);

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

// lib/patternSvgs.ts
var patternSvgs = {
  squareAltGrid: "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
  grid1: "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
  noise: "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
  dots: "https://cdn.ing/assets/files/record/286198/yfsjx9thvtxzhl2qtshxyhkrm524",
  dotPattern: "https://cdn.ing/assets/files/record/286192/7ig0cku8aqbboiza8nuk6hw0nnsr",
  dotPattern2: "https://cdn.ing/assets/files/record/286189/arez6gd2s7isn9i1o6c7sexdq7bl",
  circles: "https://cdn.ing/assets/files/record/286190/gtmia3sncjtzetdshc20zf1d3c17",
  waves: "https://cdn.ing/assets/files/record/286191/mqlb33fzxz9cdth1bx7if0wmpkp1",
  crossPattern: "https://cdn.ing/assets/files/record/286193/9yfqwdbnqaipbp7fsb3wbzzmq472",
  architect: "https://cdn.ing/assets/files/record/286194/vgs88ugpvyhxu13wqgy0acvae6re",
  tinyCheckers: "https://cdn.ing/assets/files/record/286195/65efaknsw8kcpf9o3c2gybytsl5b",
  p6: "https://cdn.ing/assets/i/r/286196/6kl0rqnd6mjk8j7e525fo8fo0vkc/p6.webp"
};
var maskTop = "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)";
var maskBottom = "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)";
var maskCenter = "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)";
var maskTopLeft = "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)";
var maskTopRight = "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)";
var maskBottomLeft = "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)";
var maskBottomRight = "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)";
var circuitBoardPattern = (id, mask) => /* @__PURE__ */ jsxRuntime.jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "100",
          height: "100",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              "path",
              {
                d: "M0 50h40M60 50h40M50 0v40M50 60v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "1",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "3", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "0", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "100", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "0", r: "2", fill: "hsl(var(--muted))" }),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "100", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridDotsPattern = (id, mask) => /* @__PURE__ */ jsxRuntime.jsxs(
  "svg",
  {
    className: "h-full w-full",
    xmlns: "http://www.w3.org/2000/svg",
    style: mask ? {
      maskImage: mask,
      WebkitMaskImage: mask
    } : void 0,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
        "pattern",
        {
          id,
          x: "0",
          y: "0",
          width: "40",
          height: "40",
          patternUnits: "userSpaceOnUse",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              "path",
              {
                d: "M0 20h40M20 0v40",
                stroke: "hsl(var(--muted))",
                strokeWidth: "0.5",
                fill: "none"
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "20", r: "2", fill: "hsl(var(--muted))" })
          ]
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
    ]
  }
);
var gridPattern = (size, mask) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: "h-full w-full bg-[linear-gradient(to_right,_hsl(var(--muted))_1px,_transparent_1px),linear-gradient(to_bottom,_hsl(var(--muted))_1px,_transparent_1px)]",
    style: {
      backgroundSize: `${size}px ${size}px`,
      ...mask ? {
        maskImage: mask,
        WebkitMaskImage: mask
      } : {}
    }
  }
);
var diagonalCrossPattern = (mask) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: "h-full w-full",
    style: {
      backgroundImage: "repeating-linear-gradient(45deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px), repeating-linear-gradient(135deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px)",
      ...mask ? {
        maskImage: mask,
        WebkitMaskImage: mask
      } : {}
    }
  }
);
var dashedGridMaskBase = "repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px), repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px)";
var dashedGridPattern = (fadeMask) => {
  const mask = fadeMask ? `${dashedGridMaskBase}, ${fadeMask}` : dashedGridMaskBase;
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: "h-full w-full",
      style: {
        backgroundImage: "linear-gradient(to right, hsl(var(--muted)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--muted)) 1px, transparent 1px)",
        backgroundSize: "20px 20px",
        backgroundPosition: "0 0, 0 0",
        maskImage: mask,
        WebkitMaskImage: mask,
        maskComposite: "intersect",
        WebkitMaskComposite: "source-in"
      }
    }
  );
};
var gradientGlow = (position) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: cn(
      "pointer-events-none absolute left-1/2 z-0 aspect-square w-3/4 -translate-x-1/2 rounded-full opacity-50 blur-3xl",
      position === "top" ? "-top-1/4" : "-bottom-1/4"
    ),
    style: {
      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
    }
  }
);
var spotlight = (position) => /* @__PURE__ */ jsxRuntime.jsx(
  "div",
  {
    className: cn(
      "pointer-events-none absolute top-1/2 z-0 aspect-square w-3/4 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
      position === "left" ? "-left-1/4" : "-right-1/4"
    ),
    style: {
      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
    }
  }
);
var patternOverlays = {
  circuitBoardBasic: () => circuitBoardPattern("circuit-board-basic"),
  circuitBoardFadeTop: () => circuitBoardPattern("circuit-board-fade-top", maskTop),
  circuitBoardFadeBottom: () => circuitBoardPattern("circuit-board-fade-bottom", maskBottom),
  circuitBoardFadeCenter: () => circuitBoardPattern("circuit-board-fade-center", maskCenter),
  circuitBoardFadeTopLeft: () => circuitBoardPattern("circuit-board-fade-top-left", maskTopLeft),
  circuitBoardFadeTopRight: () => circuitBoardPattern("circuit-board-fade-top-right", maskTopRight),
  circuitBoardFadeBottomLeft: () => circuitBoardPattern("circuit-board-fade-bottom-left", maskBottomLeft),
  circuitBoardFadeBottomRight: () => circuitBoardPattern("circuit-board-fade-bottom-right", maskBottomRight),
  dashedGridBasic: () => dashedGridPattern(),
  dashedGridFadeTop: () => dashedGridPattern(maskTop),
  dashedGridFadeBottom: () => dashedGridPattern(maskBottom),
  dashedGridFadeCenter: () => dashedGridPattern(maskCenter),
  dashedGridFadeTopLeft: () => dashedGridPattern(maskTopLeft),
  dashedGridFadeTopRight: () => dashedGridPattern(maskTopRight),
  dashedGridFadeBottomLeft: () => dashedGridPattern(maskBottomLeft),
  dashedGridFadeBottomRight: () => dashedGridPattern(maskBottomRight),
  diagonalCrossBasic: () => diagonalCrossPattern(),
  diagonalCrossFadeTop: () => diagonalCrossPattern(maskTop),
  diagonalCrossFadeBottom: () => diagonalCrossPattern(maskBottom),
  diagonalCrossFadeCenter: () => diagonalCrossPattern(maskCenter),
  diagonalCrossFadeTopLeft: () => diagonalCrossPattern(maskTopLeft),
  diagonalCrossFadeTopRight: () => diagonalCrossPattern(maskTopRight),
  diagonalCrossFadeBottomLeft: () => diagonalCrossPattern(maskBottomLeft),
  diagonalCrossFadeBottomRight: () => diagonalCrossPattern(maskBottomRight),
  gridBasic: () => gridPattern(40),
  gridFadeTop: () => gridPattern(32, maskTop),
  gridFadeBottom: () => gridPattern(32, maskBottom),
  gridFadeCenter: () => gridPattern(40, maskCenter),
  gridFadeTopLeft: () => gridPattern(32, maskTopLeft),
  gridFadeTopRight: () => gridPattern(32, maskTopRight),
  gridFadeBottomLeft: () => gridPattern(32, maskBottomLeft),
  gridFadeBottomRight: () => gridPattern(32, maskBottomRight),
  gridDotsBasic: () => gridDotsPattern("grid-dots-basic"),
  gridDotsFadeCenter: () => gridDotsPattern("grid-dots-fade-center", maskCenter),
  gradientGlowTop: () => gradientGlow("top"),
  gradientGlowBottom: () => gradientGlow("bottom"),
  spotlightLeft: () => spotlight("left"),
  spotlightRight: () => spotlight("right")
};
var inlinePatternStyles = {
  radialGradientTop: {
    background: "radial-gradient(125% 125% at 50% 10%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
  },
  radialGradientBottom: {
    background: "radial-gradient(125% 125% at 50% 90%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
  }
};
function PatternBackground({
  pattern,
  opacity = 0.08,
  className,
  style
}) {
  if (!pattern) {
    return null;
  }
  if (pattern in inlinePatternStyles) {
    const inlineStyle = inlinePatternStyles[pattern];
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: cn("pointer-events-none absolute inset-0 z-0", className),
        style: { ...inlineStyle, opacity, ...style },
        "aria-hidden": "true"
      }
    );
  }
  if (pattern in patternOverlays) {
    const Overlay = patternOverlays[pattern];
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: cn("pointer-events-none absolute inset-0 z-0", className),
        style: { opacity, ...style },
        "aria-hidden": "true",
        children: Overlay()
      }
    );
  }
  const patternUrl = pattern in patternSvgs ? patternSvgs[pattern] : pattern;
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: cn("pointer-events-none absolute inset-0 z-0", className),
      style: {
        backgroundImage: `url(${patternUrl})`,
        backgroundRepeat: "repeat",
        backgroundSize: "auto",
        opacity,
        ...style
      },
      "aria-hidden": "true"
    }
  );
}
var darkLinkAdaptation = "[--button-link-fg:currentColor] [--button-link-hover-fg:currentColor]";
var backgroundStyles = {
  default: "bg-background text-foreground",
  white: "bg-white text-dark",
  gray: "bg-muted/30 text-foreground",
  dark: `bg-foreground text-background ${darkLinkAdaptation}`,
  transparent: "bg-transparent text-foreground",
  gradient: `bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground ${darkLinkAdaptation}`,
  primary: `bg-primary text-primary-foreground ${darkLinkAdaptation}`,
  secondary: `bg-secondary text-secondary-foreground ${darkLinkAdaptation}`,
  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 = React__namespace.default.forwardRef(
  ({
    id,
    title,
    subtitle,
    children,
    className,
    style,
    background = "default",
    spacing = "lg",
    pattern,
    patternOpacity,
    patternClassName,
    containerClassName,
    containerMaxWidth = "xl",
    ...props
  }, ref) => {
    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
    return /* @__PURE__ */ jsxRuntime.jsxs(
      "section",
      {
        ref,
        id,
        className: cn(
          "relative",
          pattern ? "overflow-hidden" : null,
          backgroundStyles[background],
          isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
          className
        ),
        style,
        ...props,
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            PatternBackground,
            {
              pattern,
              opacity: effectivePatternOpacity,
              className: patternClassName
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsxs(
            Container,
            {
              maxWidth: containerMaxWidth,
              className: cn("relative z-10", containerClassName),
              children: [
                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                ] }),
                children
              ]
            }
          )
        ]
      }
    );
  }
);
Section.displayName = "Section";
var IG_TILE_WIDTH = 320;
var IG_TILE_STYLE = { width: "100%" };
var IG_TILE_RADIUS = 18;
var TILE_WRAPPER_STYLE = {
  position: "relative",
  borderRadius: IG_TILE_RADIUS,
  boxShadow: "0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.10)"
};
var CAPTION_SCRIM_STYLE = {
  position: "absolute",
  left: 0,
  right: 0,
  bottom: 0,
  padding: "28px 14px 13px",
  background: "linear-gradient(180deg, rgba(8,12,24,0) 0%, rgba(8,12,24,0.55) 45%, rgba(8,12,24,0.78) 100%)",
  borderBottomLeftRadius: IG_TILE_RADIUS,
  borderBottomRightRadius: IG_TILE_RADIUS,
  pointerEvents: "none",
  // Hiding captions for now until we build in
  // the dynamic behavior that clients can dictate
  display: "none"
};
var CAPTION_TEXT_STYLE = {
  color: "#fff",
  fontSize: 13,
  lineHeight: 1.4,
  fontWeight: 600,
  letterSpacing: "0.005em",
  textShadow: "0 1px 2px rgba(0, 0, 0, 0.35)",
  display: "-webkit-box",
  WebkitLineClamp: 2,
  WebkitBoxOrient: "vertical",
  overflow: "hidden",
  height: "2.8em"
};
var TITLE_MAX = 90;
function truncate(text, max = TITLE_MAX) {
  const trimmed = text.trim();
  if (trimmed.length <= max) return trimmed;
  const slice = trimmed.slice(0, max);
  const lastSpace = slice.lastIndexOf(" ");
  const head = lastSpace > max * 0.6 ? slice.slice(0, lastSpace) : slice;
  return `${head.trimEnd()}\u2026`;
}
function captionToString(caption) {
  return typeof caption === "string" ? caption : "";
}
function toMediaItem(item) {
  const isVideo = Boolean(item.isVideo && item.videoUrl);
  const fullCaption = captionToString(item.caption);
  const title = truncate(fullCaption) || item.imageAlt || "Instagram post";
  const meta = {
    href: item.href,
    likeCount: item.likeCount,
    commentCount: item.commentCount,
    viewCount: item.viewCount,
    date: item.date
  };
  return {
    id: item.id,
    type: isVideo ? "video" : "image",
    poster: item.image,
    // Video source only when the post is a real video (image posts ignore it).
    src: isVideo ? item.videoUrl : void 0,
    title,
    caption: fullCaption || void 0,
    kind: "Instagram",
    meta
  };
}
function openPermalink(item) {
  if (typeof window === "undefined") return;
  const href = item.meta?.href;
  if (!href) return;
  window.open(href, "_blank", "noopener,noreferrer");
}
function likeBadge(likeCount) {
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "span",
    {
      "aria-label": `${likeCount.toLocaleString()} likes`,
      style: {
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        // Breathing room from the tile's top-left corner (refinement #1).
        margin: 6,
        padding: "6px 11px",
        borderRadius: 999,
        background: "rgba(8, 12, 24, 0.55)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        border: "1px solid rgba(255, 255, 255, 0.14)",
        color: "#fff",
        fontSize: 13,
        fontWeight: 600,
        lineHeight: 1,
        letterSpacing: "0.01em"
      },
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mdi/cards-heart", size: 15, "aria-hidden": "true" }),
        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: likeCount.toLocaleString() })
      ]
    }
  );
}
var VIEWER_ACTIONS = [
  {
    id: "open-in-instagram",
    icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/instagram", size: 22, "aria-hidden": "true" }),
    label: "Instagram",
    ariaLabel: "Open in Instagram",
    onPress: (item) => openPermalink(item)
  }
];
function InstagramViewerRail({ item }) {
  const meta = item.meta ?? {};
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      style: {
        position: "absolute",
        right: 11,
        // Bottom-aligned with the caption card (see InstagramViewerCaption).
        bottom: 34,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        color: "var(--psmi-chrome-fg, #fff)",
        zIndex: 3
      },
      children: meta.href ? /* @__PURE__ */ jsxRuntime.jsx(
        "a",
        {
          href: meta.href,
          target: "_blank",
          rel: "noopener noreferrer",
          "aria-label": "Open in Instagram",
          onClick: (e) => e.stopPropagation(),
          style: {
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            padding: 0,
            border: "none",
            background: "transparent",
            color: "inherit",
            cursor: "pointer",
            font: "inherit",
            textDecoration: "none"
          },
          children: /* @__PURE__ */ jsxRuntime.jsx(
            "span",
            {
              style: {
                width: 46,
                height: 46,
                borderRadius: "50%",
                background: "var(--psmi-chrome-bg, rgba(255,255,255,0.14))",
                backdropFilter: "blur(6px)",
                WebkitBackdropFilter: "blur(6px)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center"
              },
              children: /* @__PURE__ */ jsxRuntime.jsx(
                DynamicIcon,
                {
                  name: "lucide/instagram",
                  size: 22,
                  "aria-hidden": "true"
                }
              )
            }
          )
        }
      ) : null
    }
  );
}
function profileUrl(username) {
  return `https://www.instagram.com/${username.replace(/^@+/, "")}/`;
}
var USERNAME_BADGE_STYLE = {
  display: "inline-flex",
  alignItems: "center",
  gap: 7,
  marginBottom: 10,
  padding: "7px 12px",
  borderRadius: 999,
  background: "var(--psmi-chrome-bg, rgba(255,255,255,0.16))",
  backdropFilter: "blur(8px)",
  WebkitBackdropFilter: "blur(8px)",
  border: "1px solid rgba(255, 255, 255, 0.18)",
  color: "inherit",
  fontSize: 13,
  fontWeight: 700,
  lineHeight: 1,
  letterSpacing: "0.01em",
  textDecoration: "none",
  pointerEvents: "auto"
};
var VIEWER_TITLE_STYLE = {
  fontSize: 16,
  fontWeight: 700,
  lineHeight: 1.35,
  textShadow: "0 1px 2px rgba(0, 0, 0, 0.4)",
  display: "-webkit-box",
  WebkitLineClamp: 2,
  WebkitBoxOrient: "vertical",
  overflow: "hidden"
};
function InstagramViewerCaption({
  item,
  username
}) {
  const handle = username?.replace(/^@+/, "");
  const badgeContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/instagram", size: 14, "aria-hidden": "true" }),
    /* @__PURE__ */ jsxRuntime.jsx("span", { children: handle ? `@${handle}` : "Instagram" })
  ] });
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      style: {
        position: "absolute",
        left: 16,
        // Mirrors the library caption card's clearance for the actions rail.
        right: 78,
        bottom: 34,
        color: "var(--psmi-chrome-fg, #fff)",
        zIndex: 2
      },
      children: [
        handle ? /* @__PURE__ */ jsxRuntime.jsx(
          "a",
          {
            href: profileUrl(handle),
            target: "_blank",
            rel: "noopener noreferrer",
            "aria-label": `Open @${handle} on Instagram`,
            onClick: (e) => e.stopPropagation(),
            style: { ...USERNAME_BADGE_STYLE, cursor: "pointer" },
            children: badgeContent
          }
        ) : (
          // No username supplied: never fabricate a handle — degrade to a
          // non-interactive "Instagram" chip in the same position.
          /* @__PURE__ */ jsxRuntime.jsx("span", { style: USERNAME_BADGE_STYLE, children: badgeContent })
        ),
        /* @__PURE__ */ jsxRuntime.jsx("div", { style: VIEWER_TITLE_STYLE, children: item.title })
      ]
    }
  );
}
function InstagramFeedGrid({
  mediaItems,
  gridClassName,
  itemClassName,
  imageClassName,
  optixFlowConfig,
  showLikeBadges = false
}) {
  const { open } = mediaImmersive.useImmersiveFeed();
  const posterImgProps = React.useMemo(() => {
    const next = {};
    if (imageClassName) next.className = imageClassName;
    if (optixFlowConfig) next.optixFlowConfig = optixFlowConfig;
    return Object.keys(next).length > 0 ? next : void 0;
  }, [imageClassName, optixFlowConfig]);
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: cn(
        "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4",
        gridClassName
      ),
      children: mediaItems.map((mediaItem) => {
        const likeCount = mediaItem.meta?.likeCount;
        return (
          // The wrapper owns the tile's outer chrome (subtle boundary shadow,
          // matching radius) and the block's own caption overlay — the card's
          // built-in caption is hidden so 1- and 2-line captions can share a
          // fixed-height, top-aligned text box (annotated refinements #2–#4).
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemClassName, style: TILE_WRAPPER_STYLE, children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              mediaImmersive.ThumbnailCard,
              {
                item: mediaItem,
                onOpen: open,
                size: IG_TILE_WIDTH,
                style: IG_TILE_STYLE,
                elevated: false,
                hideCaption: true,
                hideProgressHint: true,
                showDuration: false,
                glyphMode: "hover",
                posterImgProps,
                badgeSlot: showLikeBadges && typeof likeCount === "number" ? likeBadge(likeCount) : void 0
              }
            ),
            mediaItem.title ? (
              // aria-hidden: the card already announces the post title; this
              // overlay is purely visual. pointer-events pass through to the card.
              /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: CAPTION_SCRIM_STYLE, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: CAPTION_TEXT_STYLE, children: mediaItem.title }) })
            ) : null
          ] }, mediaItem.id)
        );
      })
    }
  );
}
function InstagramPostGrid({
  sectionId = "instagram-post-grid",
  heading,
  subheading,
  items,
  itemsSlot,
  className,
  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
  spacing = "py-12 md:py-32",
  headerClassName,
  headingClassName,
  subheadingClassName,
  gridClassName,
  itemClassName,
  imageClassName,
  optixFlowConfig,
  username,
  showLikeBadges = false,
  background,
  pattern,
  patternOpacity,
  patternClassName
}) {
  const mediaItems = React.useMemo(() => {
    if (itemsSlot || !items) return [];
    const withImage = items.filter((item) => Boolean(item.image));
    if (typeof process !== "undefined" && process.env.NODE_ENV !== "production" && withImage.length < items.length) {
      const skipped = items.filter((item) => !item.image);
      const skippedIds = skipped.map((item) => item.id).join(", ");
      console.warn(
        `[instagram-post-grid] skipped ${skipped.length} item(s) without a resolvable image: ${skippedIds}`
      );
    }
    return withImage.map(toMediaItem);
  }, [items, itemsSlot]);
  if (!itemsSlot && (!items || items.length === 0)) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntime.jsxs(
    Section,
    {
      id: sectionId,
      background,
      spacing,
      pattern,
      patternOpacity,
      patternClassName,
      className,
      containerClassName,
      children: [
        (heading || subheading) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 flex flex-col gap-2", headerClassName), children: [
          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
            "h2",
            {
              className: cn(
                "text-xl font-medium tracking-tight md:text-3xl lg:text-5xl text-balance",
                headingClassName
              ),
              children: heading
            }
          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
            "p",
            {
              className: cn(
                "max-w-full md:max-w-2xl text-balance opacity-75",
                subheadingClassName
              ),
              children: subheading
            }
          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
        ] }),
        itemsSlot ? /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            className: cn(
              "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4",
              gridClassName
            ),
            children: itemsSlot
          }
        ) : /* @__PURE__ */ jsxRuntime.jsxs(mediaImmersive.ImmersiveFeedProvider, { items: mediaItems, actions: VIEWER_ACTIONS, children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            InstagramFeedGrid,
            {
              mediaItems,
              gridClassName,
              itemClassName,
              imageClassName,
              optixFlowConfig,
              showLikeBadges
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(
            mediaImmersive.ImmersiveViewer,
            {
              ariaLabel: "Instagram post viewer",
              renderActions: ({ item }) => /* @__PURE__ */ jsxRuntime.jsx(InstagramViewerRail, { item }),
              renderCaption: (item) => /* @__PURE__ */ jsxRuntime.jsx(InstagramViewerCaption, { item, username })
            }
          )
        ] })
      ]
    }
  );
}

exports.InstagramPostGrid = InstagramPostGrid;
