"use client";
'use strict';

var React = require('react');
var framerMotion = require('framer-motion');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
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/process/process-expandable-timeline.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
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;
}
var defaultSteps = [
  {
    title: "Discovery Phase",
    description: "Understanding your needs and goals",
    expandedContent: "During the discovery phase, we conduct in-depth interviews, analyze your current systems, and identify opportunities for improvement. This foundational work ensures we build solutions that truly address your challenges."
  },
  {
    title: "Planning & Strategy",
    description: "Creating a roadmap for success",
    expandedContent: "We develop a comprehensive project plan that outlines milestones, deliverables, and timelines. Our strategic approach ensures alignment between technical implementation and business objectives."
  },
  {
    title: "Design & Prototyping",
    description: "Visualizing the solution",
    expandedContent: "Our design team creates wireframes, mockups, and interactive prototypes that bring your vision to life. We iterate based on your feedback to ensure the final design meets your expectations."
  },
  {
    title: "Development & Testing",
    description: "Building with quality in mind",
    expandedContent: "Using agile methodologies, we develop your solution in sprints with regular demos and feedback sessions. Comprehensive testing ensures reliability and performance across all scenarios."
  },
  {
    title: "Launch & Support",
    description: "Going live with confidence",
    expandedContent: "We handle deployment with care, providing training and documentation for your team. Our ongoing support ensures your solution continues to perform optimally as your needs evolve."
  }
];
var defaultProps = {
  title: "How We Work",
  description: "Click on each step to learn more about our process and methodology.",
  steps: defaultSteps
};
var CornerConnector = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
  "svg",
  {
    width: "22",
    height: "20",
    viewBox: "0 0 22 20",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    className,
    children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        "line",
        {
          x1: "0.607422",
          y1: "2.57422",
          x2: "21.5762",
          y2: "2.57422",
          stroke: "currentColor",
          strokeWidth: "4"
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(
        "line",
        {
          x1: "19.5762",
          y1: "19.624",
          x2: "19.5762",
          y2: "4.57422",
          stroke: "currentColor",
          strokeWidth: "4"
        }
      )
    ]
  }
);
function ProcessExpandableTimeline({
  className,
  title = defaultProps.title,
  description = defaultProps.description,
  steps = defaultProps.steps
}) {
  const [expandedIndex, setExpandedIndex] = React__namespace.useState(null);
  const toggleExpand = (index) => {
    setExpandedIndex(expandedIndex === index ? null : index);
  };
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container", children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-16 max-w-2xl", children: [
      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl", children: title }),
      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg text-foreground/50", children: description })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-6 top-0 bottom-0 w-px bg-border" }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0", children: steps?.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
        /* @__PURE__ */ jsxRuntime.jsxs(
          "button",
          {
            onClick: () => toggleExpand(index),
            className: "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors hover:bg-muted/30",
            children: [
              /* @__PURE__ */ jsxRuntime.jsx(
                "div",
                {
                  className: cn(
                    "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 bg-background transition-colors",
                    expandedIndex === index ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground group-hover:border-primary"
                  ),
                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: String(index + 1).padStart(2, "0") })
                }
              ),
              /* @__PURE__ */ jsxRuntime.jsx(CornerConnector, { className: "absolute right-4 top-4 text-muted-foreground/30" }),
              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pr-12", children: [
                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold tracking-tight transition-colors group-hover:text-primary", children: step.title }),
                  /* @__PURE__ */ jsxRuntime.jsx(
                    DynamicIcon,
                    {
                      name: expandedIndex === index ? "lucide/chevron-up" : "lucide/chevron-down",
                      size: 20,
                      className: "text-muted-foreground"
                    }
                  )
                ] }),
                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-foreground/50", children: step.description })
              ] })
            ]
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: expandedIndex === index && step.expandedContent && /* @__PURE__ */ jsxRuntime.jsx(
          framerMotion.motion.div,
          {
            initial: { height: 0, opacity: 0 },
            animate: { height: "auto", opacity: 1 },
            exit: { height: 0, opacity: 0 },
            transition: { duration: 0.3 },
            className: "overflow-hidden",
            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b bg-muted/20 py-6 pl-16 pr-6", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/70", children: step.expandedContent }) })
          }
        ) })
      ] }, index)) })
    ] })
  ] }) });
}

exports.ProcessExpandableTimeline = ProcessExpandableTimeline;
//# sourceMappingURL=process-expandable-timeline.cjs.map
//# sourceMappingURL=process-expandable-timeline.cjs.map