"use client";
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import * as React from 'react';
import { jsx, jsxs } from 'react/jsx-runtime';

// 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 defaultMilestones = [
  {
    title: "Foundation",
    description: "Establishing the core infrastructure and setting up the development environment.",
    date: "Q1 2024",
    status: "completed",
    features: ["Core Architecture", "Database Setup", "Authentication System"]
  },
  {
    title: "Core Features",
    description: "Building the essential features that form the backbone of the platform.",
    date: "Q2 2024",
    status: "completed",
    features: ["User Dashboard", "API Integration", "Notification System"]
  },
  {
    title: "Enhancement Phase",
    description: "Adding advanced features and improving user experience based on feedback.",
    date: "Q3 2024",
    status: "in-progress",
    features: ["Analytics Dashboard", "Advanced Reporting", "Team Collaboration"]
  },
  {
    title: "Scale & Optimize",
    description: "Optimizing performance and preparing the platform for scale.",
    date: "Q4 2024",
    status: "upcoming",
    features: ["Performance Optimization", "CDN Integration", "Load Balancing"]
  },
  {
    title: "Enterprise Features",
    description: "Rolling out enterprise-grade features for larger organizations.",
    date: "Q1 2025",
    status: "upcoming",
    features: ["SSO Integration", "Audit Logs", "Custom Branding"]
  }
];
var defaultProps = {
  title: "Product Roadmap",
  description: "Our journey from concept to completion, with clear milestones and deliverables.",
  milestones: defaultMilestones
};
var StatusBadge = ({ status }) => {
  const config = {
    completed: {
      label: "Completed",
      className: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
      icon: "lucide/check-circle-2"
    },
    "in-progress": {
      label: "In Progress",
      className: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
      icon: "lucide/loader-2"
    },
    upcoming: {
      label: "Upcoming",
      className: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400",
      icon: "lucide/clock"
    }
  };
  const { label, className, icon } = config[status];
  return /* @__PURE__ */ jsxs(
    "span",
    {
      className: cn(
        "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium",
        className
      ),
      children: [
        /* @__PURE__ */ jsx(DynamicIcon, { name: icon, size: 14 }),
        label
      ]
    }
  );
};
function ProcessRoadmapTimeline({
  className,
  title = defaultProps.title,
  description = defaultProps.description,
  milestones = defaultProps.milestones
}) {
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
    /* @__PURE__ */ jsxs("div", { className: "mb-16 text-center", children: [
      /* @__PURE__ */ jsx("h1", { className: "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl", children: title }),
      /* @__PURE__ */ jsx("p", { className: "mx-auto max-w-2xl text-lg text-foreground/50", children: description })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-4xl", children: [
      /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border" }),
      /* @__PURE__ */ jsx("div", { className: "space-y-12", children: milestones?.map((milestone, index) => /* @__PURE__ */ jsxs(
        "div",
        {
          className: cn(
            "relative flex items-start gap-8",
            index % 2 === 0 ? "flex-row" : "flex-row-reverse"
          ),
          children: [
            /* @__PURE__ */ jsx(
              "div",
              {
                className: cn(
                  "flex-1",
                  index % 2 === 0 ? "text-right pr-8" : "text-left pl-8"
                ),
                children: /* @__PURE__ */ jsxs(
                  "div",
                  {
                    className: cn(
                      "rounded-lg border bg-card p-6 shadow-sm transition-shadow hover:shadow-md",
                      milestone.status === "in-progress" && "border-primary/50"
                    ),
                    children: [
                      /* @__PURE__ */ jsxs(
                        "div",
                        {
                          className: cn(
                            "mb-3 flex items-center gap-3",
                            index % 2 === 0 ? "justify-end" : "justify-start"
                          ),
                          children: [
                            milestone.date && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: milestone.date }),
                            /* @__PURE__ */ jsx(StatusBadge, { status: milestone.status })
                          ]
                        }
                      ),
                      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title }),
                      /* @__PURE__ */ jsx("p", { className: "mb-4 text-foreground/50", children: milestone.description }),
                      milestone.features && milestone.features.length > 0 && /* @__PURE__ */ jsx(
                        "div",
                        {
                          className: cn(
                            "flex flex-wrap gap-2",
                            index % 2 === 0 ? "justify-end" : "justify-start"
                          ),
                          children: milestone.features.map((feature, fIndex) => /* @__PURE__ */ jsx(
                            "span",
                            {
                              className: "rounded bg-muted px-2 py-1 text-xs text-muted-foreground",
                              children: feature
                            },
                            fIndex
                          ))
                        }
                      )
                    ]
                  }
                )
              }
            ),
            /* @__PURE__ */ jsx(
              "div",
              {
                className: cn(
                  "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2 bg-background",
                  milestone.status === "completed" ? "border-green-500 bg-green-500 text-white" : milestone.status === "in-progress" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground"
                ),
                children: milestone.status === "completed" ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 20 }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
              }
            ),
            /* @__PURE__ */ jsx("div", { className: "flex-1" })
          ]
        },
        index
      )) })
    ] })
  ] }) });
}

export { ProcessRoadmapTimeline };
//# sourceMappingURL=process-roadmap-timeline.js.map
//# sourceMappingURL=process-roadmap-timeline.js.map