"use client";
import { useState, useRef, useEffect } from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Img } from '@page-speed/img';
import { jsx, jsxs } from 'react/jsx-runtime';

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

// lib/blockBrandedIconsAndPlaceholders.ts
var blockBrandedIconsAndPlaceholders = {
  placeholderDark1: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u",
  placeholderDark2: "https://cdn.ing/assets/files/record/286210/jdwpoe6le13i7l4hn0er8ay9t5n9",
  placeholderDark3: "https://cdn.ing/assets/files/record/286211/1d12hqfn5zpsfloai89gqq98kht0"};
var defaultSections = [
  {
    subTitle: "Smart Dashboard",
    title: "Streamline Your Workflow Process",
    description: "Leverage our intuitive interface to streamline your workflow. Access powerful tools and features designed to enhance productivity and efficiency.",
    image: blockBrandedIconsAndPlaceholders.placeholderDark1
  },
  {
    subTitle: "Team Management",
    title: "Collaborate Seamlessly with Teams",
    description: "Enable smooth collaboration across your organization. Share resources efficiently with customizable access controls and permission settings.",
    image: blockBrandedIconsAndPlaceholders.placeholderDark2
  },
  {
    subTitle: "Advanced Analytics",
    title: "Flexible Configuration Options",
    description: "Customize your experience with advanced configuration options. Adapt the platform to your specific needs with our versatile solution.",
    image: blockBrandedIconsAndPlaceholders.placeholderDark3
  },
  {
    subTitle: "Automation Tools",
    title: "Simplified User Experience",
    description: "Experience a user-friendly interface designed for efficiency. Our intuitive building blocks make complex tasks simple and accessible.",
    image: blockBrandedIconsAndPlaceholders.placeholderDark1
  }
];
function TimelineScrollStickyImage({
  className,
  heading = "Transform your workflow with our solution",
  sections = defaultSections,
  optixFlowConfig
}) {
  const [activeIndex, setActiveIndex] = useState(0);
  const sectionRefs = useRef([]);
  useEffect(() => {
    const handleScroll = () => {
      const viewportHeight = window.innerHeight;
      const viewportCenter = viewportHeight / 2;
      let closestSection = 0;
      let closestDistance = Infinity;
      sectionRefs.current.forEach((section, index) => {
        if (section) {
          const rect = section.getBoundingClientRect();
          const sectionCenter = rect.top + rect.height / 2;
          const distance = Math.abs(sectionCenter - viewportCenter);
          if (distance < closestDistance) {
            closestDistance = distance;
            closestSection = index;
          }
        }
      });
      setActiveIndex(closestSection);
    };
    window.addEventListener("scroll", handleScroll);
    handleScroll();
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: "container max-w-7xl", children: [
    /* @__PURE__ */ jsx("h1", { className: "mb-14 max-w-2xl text-4xl font-semibold text-balance md:text-5xl", children: heading }),
    /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-20", children: [
      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-16 md:w-1/2", children: sections.map((section, index) => /* @__PURE__ */ jsxs(
        "div",
        {
          ref: (el) => {
            sectionRefs.current[index] = el;
          },
          className: "flex flex-col gap-4 md:h-[50vh]",
          children: [
            /* @__PURE__ */ jsx("div", { className: "block rounded-2xl border bg-muted p-4 md:hidden", children: /* @__PURE__ */ jsx(
              Img,
              {
                src: section.image,
                alt: section.title,
                className: "h-full max-h-full w-full max-w-full rounded-2xl object-cover",
                optixFlowConfig
              }
            ) }),
            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-muted-foreground md:text-base", children: section.subTitle }),
            /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold md:text-4xl", children: section.title }),
            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: section.description })
          ]
        },
        index
      )) }),
      /* @__PURE__ */ jsxs("div", { className: "sticky top-56 right-0 hidden h-fit w-full items-center justify-center md:flex", children: [
        /* @__PURE__ */ jsx(
          Img,
          {
            src: sections[sections.length - 1].image,
            alt: sections[sections.length - 1].title,
            className: "invisible h-full max-h-[550px] w-full max-w-full object-cover",
            optixFlowConfig
          }
        ),
        sections.map((item, index) => /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "absolute inset-0 flex h-full items-center justify-center rounded-2xl border bg-muted p-4 transition-opacity duration-200",
              index === activeIndex ? "opacity-100" : "opacity-0"
            ),
            children: /* @__PURE__ */ jsx(
              Img,
              {
                src: item.image,
                alt: item.title,
                className: "h-full max-h-full w-full max-w-full rounded-2xl border object-cover",
                optixFlowConfig
              }
            )
          },
          index
        ))
      ] })
    ] })
  ] }) });
}

export { TimelineScrollStickyImage };
//# sourceMappingURL=timeline-scroll-sticky-image.js.map
//# sourceMappingURL=timeline-scroll-sticky-image.js.map