"use client";
'use strict';

var react = require('react');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var img = require('@page-speed/img');
var jsxRuntime = require('react/jsx-runtime');

// components/blocks/timeline/timeline-scroll-highlight.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}

// 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: "Company Foundation",
    description: "Started our journey with a simple idea: make technology accessible to everyone. What began as a small team of three developers in a garage has now become the foundation of our mission to democratize software development.",
    date: "2020",
    image: blockBrandedIconsAndPlaceholders.placeholder1
  },
  {
    title: "First Product Launch",
    description: "After months of development, we launched our first product to the public. The response was overwhelming - 10,000 users signed up in the first week, validating our vision and giving us the confidence to scale further.",
    date: "2021",
    image: blockBrandedIconsAndPlaceholders.placeholder2
  },
  {
    title: "Series A Funding",
    description: "Secured our Series A round led by prominent VCs who believed in our mission. This funding allowed us to expand our team, invest in R&D, and prepare for international expansion.",
    date: "2022",
    image: blockBrandedIconsAndPlaceholders.placeholder3
  },
  {
    title: "Global Expansion",
    description: "Opened offices in London, Tokyo, and S\xE3o Paulo, marking our transition from a local startup to a global technology company. Our platform now serves over 500,000 users across 50 countries.",
    date: "2023",
    image: blockBrandedIconsAndPlaceholders.placeholder4
  }
];
function TimelineScrollHighlight({
  className,
  heading,
  items = defaultItems,
  optixFlowConfig
}) {
  const [activeIndex, setActiveIndex] = react.useState(0);
  const itemRefs = react.useRef([]);
  react.useEffect(() => {
    const observerOptions = {
      root: null,
      rootMargin: "-50% 0px -50% 0px",
      threshold: 0
    };
    const observerCallback = (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const index = itemRefs.current.findIndex(
            (ref) => ref === entry.target
          );
          if (index !== -1) {
            setActiveIndex(index);
          }
        }
      });
    };
    const observer = new IntersectionObserver(
      observerCallback,
      observerOptions
    );
    itemRefs.current.forEach((ref) => {
      if (ref) {
        observer.observe(ref);
      }
    });
    return () => {
      observer.disconnect();
    };
  }, []);
  const defaultHeading = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "From Startup to Global Platform" }),
    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: " Our Journey" })
  ] });
  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("py-32", className), children: [
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", children: heading || defaultHeading }) }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-16 lg:mt-28", children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 border-y bg-background py-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-4 text-2xl md:text-4xl", children: [
        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-muted-foreground", children: String(activeIndex + 1).padStart(2, "0") }),
        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono", children: items[activeIndex]?.date })
      ] }) }) }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
        "div",
        {
          ref: (el) => {
            itemRefs.current[index] = el;
          },
          className: cn(
            "flex flex-col items-center gap-7 py-14 opacity-50 transition-opacity duration-300 md:flex-row md:gap-10 md:py-20",
            index === activeIndex && "opacity-100"
          ),
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              img.Img,
              {
                src: item.image,
                alt: item.title,
                className: "aspect-16/12 rounded-lg border object-cover md:w-1/3 md:max-w-[440px]",
                optixFlowConfig
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-3 text-2xl font-medium md:mb-4 md:text-4xl", children: item.title }),
              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground md:text-balance", children: item.description })
            ] })
          ]
        },
        index
      )) }) })
    ] })
  ] });
}

exports.TimelineScrollHighlight = TimelineScrollHighlight;
//# sourceMappingURL=timeline-scroll-highlight.cjs.map
//# sourceMappingURL=timeline-scroll-highlight.cjs.map