"use client";
import * as React from 'react';
import { useState } from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Img } from '@page-speed/img';

// components/blocks/gallery/expandable-case-study-cards.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
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 svgCache = /* @__PURE__ */ new Map();
function DynamicIcon({
  name,
  size = 28,
  color,
  className,
  alt
}) {
  const [svgContent, setSvgContent] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const { url, iconName } = React.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.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__ */ jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        "aria-hidden": "true"
      }
    );
  }
  if (error || !svgContent) {
    return /* @__PURE__ */ jsx(
      "span",
      {
        className: cn("inline-block", className),
        style: { width: size, height: size },
        role: "img",
        "aria-label": alt || iconName
      }
    );
  }
  return /* @__PURE__ */ 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;
}
var defaultItems = [
  {
    id: "item-1",
    title: "Case study 1",
    href: "#",
    image: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
    logo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png",
    company: "Company Name",
    badges: ["Commercial", "Multiloan"]
  },
  {
    id: "item-2",
    title: "Case study 2",
    href: "#",
    image: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
    logo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png",
    company: "Company Name",
    badges: ["Enterprise"]
  },
  {
    id: "item-3",
    title: "Case study 3",
    href: "#",
    image: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
    logo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png",
    company: "Company Name",
    badges: ["Startup"]
  }
];
function ExpandableCaseStudyCards({
  items = defaultItems,
  className,
  optixFlowConfig
}) {
  const [selection, setSelection] = useState(items[0]?.id);
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row", children: items.map((item) => /* @__PURE__ */ jsx(
    "div",
    {
      "data-state": selection === item.id ? "open" : "closed",
      className: 'group max-lg:w-full max-lg:flex-1 max-md:h-[200px] md:max-lg:aspect-1336/420 lg:transform-gpu lg:transition-all lg:data-[state="closed"]:w-[20%] lg:data-[state="closed"]:duration-500 lg:data-[state="open"]:w-[60%] lg:data-[state="open"]:duration-400',
      onMouseEnter: () => {
        setSelection(item.id);
      },
      children: /* @__PURE__ */ jsxs(
        "a",
        {
          href: item.href,
          className: "relative block h-full w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card",
          children: [
            /* @__PURE__ */ jsxs("div", { className: 'absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm', children: [
              /* @__PURE__ */ jsx("div", { className: "absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:right-[calc(50%+40px)] lg:right-[50%]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-clip rounded-xl", children: /* @__PURE__ */ jsx(
                Img,
                {
                  src: item.image,
                  alt: item.title,
                  className: "h-full w-full object-cover object-center",
                  loading: "lazy",
                  optixFlowConfig
                }
              ) }) }),
              /* @__PURE__ */ jsx("div", { className: "absolute inset-y-[25%] left-[50%] flex aspect-389/420 h-[50%] items-center justify-center max-lg:hidden", children: /* @__PURE__ */ jsx(
                Img,
                {
                  src: item.logo,
                  alt: item.company,
                  className: "h-8 invert",
                  loading: "lazy",
                  optixFlowConfig
                }
              ) }),
              /* @__PURE__ */ jsx("div", { className: "absolute top-[50%] left-[50%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-accent max-lg:hidden", children: /* @__PURE__ */ jsx(
                DynamicIcon,
                {
                  name: "lucide/plus",
                  size: 32,
                  className: "text-accent-foreground"
                }
              ) }),
              /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block" })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col justify-between gap-4 md:absolute md:inset-0 md:max-lg:inset-x-[50%] md:max-lg:w-[50%]", children: [
              /* @__PURE__ */ jsx("div", { className: 'flex h-20 items-center gap-2 p-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: item.badges?.map((badge, idx) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }, idx)) }),
              /* @__PURE__ */ jsxs("div", { className: 'flex flex-col gap-2 p-4 transition-all delay-200 duration-500 lg:group-data-[state="closed"]:translate-y-4 lg:group-data-[state="closed"]:opacity-0', children: [
                /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
                  Img,
                  {
                    src: item.logo,
                    alt: item.company,
                    className: "h-5 invert lg:h-6",
                    loading: "lazy",
                    optixFlowConfig
                  }
                ) }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
                  /* @__PURE__ */ jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
                  /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-background text-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 }) })
                ] })
              ] })
            ] })
          ]
        }
      )
    },
    item.id
  )) }) }) });
}

export { ExpandableCaseStudyCards };
//# sourceMappingURL=expandable-case-study-cards.js.map
//# sourceMappingURL=expandable-case-study-cards.js.map