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

// lib/utils.ts
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
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 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
    }
  );
}

// lib/blockBrandedIconsAndPlaceholders.ts
var blockBrandedIconsAndPlaceholders = {
  placeholder1: "https://cdn.ing/assets/files/record/286200/io0rg4wv8jd2o792q4uouxg4d5k8",
  placeholder2: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u",
  placeholder3: "https://cdn.ing/assets/files/record/286203/itwrx0hqshkompfxvikdmj77xoh4",
  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx"};
var defaultItems = [
  {
    title: "Get Organized",
    description: "Start strong by syncing your calendars and tools like Google Calendar, Trello, and Slack in one place.",
    icon: "lucide/layout-list",
    image: {
      src: blockBrandedIconsAndPlaceholders.placeholder1,
      alt: "Get Organized"
    }
  },
  {
    title: "Track Progress",
    description: "Monitor your performance with real-time dashboards and detailed analytics. Stay ahead with automated reports.",
    icon: "lucide/locate-fixed",
    image: {
      src: blockBrandedIconsAndPlaceholders.placeholder2,
      alt: "Track Progress"
    },
    reverse: true
  },
  {
    title: "Collaborate Seamlessly",
    description: "Empower your team with shared dashboards and instant communication tools. Keep everyone aligned with integrated platforms.",
    icon: "lucide/users",
    image: {
      src: blockBrandedIconsAndPlaceholders.placeholder3,
      alt: "Collaborate Seamlessly"
    }
  },
  {
    title: "Integrate Seamlessly",
    description: "Integrate seamlessly across multiple platforms to enable smooth, automated task handovers.",
    icon: "lucide/cpu",
    image: {
      src: blockBrandedIconsAndPlaceholders.placeholder4,
      alt: "Integrate Seamlessly"
    },
    reverse: true
  }
];
var DiagonalPattern = ({
  className,
  patternOpacity = 0.15
}) => {
  const svgPattern = `url("data:image/svg+xml,%3Csvg width='7' height='7' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23888888' fill-opacity='${patternOpacity}' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")`;
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn("h-full w-full border-2 border-dashed", className),
      style: {
        backgroundImage: svgPattern
      }
    }
  );
};
function TimelineAlternatingDiagonal({
  className,
  badge = {
    icon: "lucide/rocket",
    text: "Accelerate"
  },
  heading = "Accelerate your planning journey",
  description = "Take control of your workflow step-by-step with smart tools, actionable insights, and seamless collaboration",
  items = defaultItems,
  optixFlowConfig
}) {
  return /* @__PURE__ */ jsxs("section", { className: cn("py-32", className), children: [
    /* @__PURE__ */ jsx("div", { className: "border-y", children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8", children: [
      /* @__PURE__ */ jsxs(
        Badge,
        {
          variant: "outline",
          className: "w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm",
          children: [
            /* @__PURE__ */ jsx(DynamicIcon, { name: badge.icon, size: 16 }),
            /* @__PURE__ */ jsx("span", { children: badge.text })
          ]
        }
      ),
      /* @__PURE__ */ jsx("h2", { className: "text-3xl leading-tight tracking-tight md:text-4xl lg:text-6xl", children: heading }),
      /* @__PURE__ */ jsx("p", { className: "max-w-[600px] tracking-[-0.32px] text-muted-foreground", children: description })
    ] }) }),
    /* @__PURE__ */ jsx("div", { className: "container overflow-hidden border-x pb-40 lg:pt-20 [&>*:last-child]:pb-20 [&>div>div:first-child]:pt-20!", children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "relative flex", children: [
      /* @__PURE__ */ jsxs(
        "div",
        {
          className: cn(
            "flex w-full justify-center px-1 py-10 text-end md:gap-6 lg:gap-10",
            item.reverse ? "lg:flex-row-reverse lg:text-start" : ""
          ),
          children: [
            /* @__PURE__ */ jsxs("div", { className: "flex-1 max-lg:hidden", children: [
              /* @__PURE__ */ jsx("h3", { className: "text-2xl tracking-[-0.96px]", children: item.title }),
              /* @__PURE__ */ jsx(
                "p",
                {
                  className: cn(
                    "mt-2.5 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground",
                    item.reverse ? "" : "ml-auto"
                  ),
                  children: item.description
                }
              )
            ] }),
            /* @__PURE__ */ jsx("div", { className: "z-[-1] size-fit -translate-y-5 bg-background p-4 max-lg:-translate-x-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-[10px] border bg-card p-[5px] shadow-md", children: /* @__PURE__ */ jsx("div", { className: "size-fit rounded-md border bg-muted p-1", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 16 }) }) }) }),
            /* @__PURE__ */ jsxs("div", { className: "flex-1 max-lg:-translate-x-4", children: [
              /* @__PURE__ */ jsxs("div", { className: "text-start lg:pointer-events-none lg:hidden", children: [
                /* @__PURE__ */ jsx("h3", { className: "text-2xl tracking-[-0.96px]", children: item.title }),
                /* @__PURE__ */ jsx("p", { className: "mt-2.5 mb-10 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground", children: item.description })
              ] }),
              /* @__PURE__ */ jsx("div", { className: "flex items-start justify-start", children: /* @__PURE__ */ jsxs("div", { className: item.reverse ? "lg:ml-auto" : "", children: [
                /* @__PURE__ */ jsx("div", { className: "px-6 lg:px-10", children: /* @__PURE__ */ jsx(DiagonalPattern, { className: "h-6 lg:h-10" }) }),
                /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-[auto_1fr_auto] items-stretch", children: [
                  /* @__PURE__ */ jsx(DiagonalPattern, { className: "h-full w-6 lg:w-10" }),
                  /* @__PURE__ */ jsx(
                    Img,
                    {
                      src: item.image.src,
                      alt: item.image.alt,
                      className: "object-contain dark:invert",
                      width: 400,
                      height: 500,
                      optixFlowConfig
                    }
                  ),
                  /* @__PURE__ */ jsx(DiagonalPattern, { className: "w-6 lg:w-10" })
                ] }),
                /* @__PURE__ */ jsx("div", { className: "px-6 lg:px-10", children: /* @__PURE__ */ jsx(DiagonalPattern, { className: "h-6 lg:h-10" }) })
              ] }) })
            ] })
          ]
        }
      ),
      /* @__PURE__ */ jsx(
        "div",
        {
          className: cn(
            "absolute z-[-2] h-full w-[3px] translate-x-5 rounded-full lg:left-1/2 lg:-translate-x-1/2",
            index === items.length - 1 ? "bg-linear-to-b from-foreground/10 via-foreground/10 to-transparent" : "bg-foreground/10"
          ),
          children: index === 0 && /* @__PURE__ */ jsx("div", { className: "h-4 w-[3px] -translate-y-full bg-linear-to-b from-transparent to-foreground/10" })
        }
      )
    ] }, index)) }),
    /* @__PURE__ */ jsx("div", { className: "h-8 w-full border-y md:h-12 lg:h-28", children: /* @__PURE__ */ jsx("div", { className: "container h-full w-full border-x" }) })
  ] });
}

export { TimelineAlternatingDiagonal };
//# sourceMappingURL=timeline-alternating-diagonal.js.map
//# sourceMappingURL=timeline-alternating-diagonal.js.map