"use client";
import AutoScroll from 'embla-carousel-auto-scroll';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Img } from '@page-speed/img';
import * as React from 'react';
import useEmblaCarousel from 'embla-carousel-react';
import { jsxs, jsx } from 'react/jsx-runtime';

// components/blocks/logos/logos-numbered-carousel.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var CarouselContext = React.createContext(null);
function useCarousel() {
  const context = React.useContext(CarouselContext);
  if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />");
  }
  return context;
}
function Carousel({
  orientation = "horizontal",
  opts,
  setApi,
  plugins,
  className,
  children,
  ...props
}) {
  const [carouselRef, api] = useEmblaCarousel(
    {
      ...opts,
      axis: orientation === "horizontal" ? "x" : "y"
    },
    plugins
  );
  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
  const [canScrollNext, setCanScrollNext] = React.useState(false);
  const onSelect = React.useCallback((api2) => {
    if (!api2) return;
    setCanScrollPrev(api2.canScrollPrev());
    setCanScrollNext(api2.canScrollNext());
  }, []);
  const scrollPrev = React.useCallback(() => {
    api?.scrollPrev();
  }, [api]);
  const scrollNext = React.useCallback(() => {
    api?.scrollNext();
  }, [api]);
  const handleKeyDown = React.useCallback(
    (event) => {
      if (event.key === "ArrowLeft") {
        event.preventDefault();
        scrollPrev();
      } else if (event.key === "ArrowRight") {
        event.preventDefault();
        scrollNext();
      }
    },
    [scrollPrev, scrollNext]
  );
  React.useEffect(() => {
    if (!api || !setApi) return;
    setApi(api);
  }, [api, setApi]);
  React.useEffect(() => {
    if (!api) return;
    onSelect(api);
    api.on("reInit", onSelect);
    api.on("select", onSelect);
    return () => {
      api?.off("select", onSelect);
    };
  }, [api, onSelect]);
  return /* @__PURE__ */ jsx(
    CarouselContext.Provider,
    {
      value: {
        carouselRef,
        api,
        opts,
        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
        scrollPrev,
        scrollNext,
        canScrollPrev,
        canScrollNext
      },
      children: /* @__PURE__ */ jsx(
        "div",
        {
          onKeyDownCapture: handleKeyDown,
          className: cn("relative", className),
          role: "region",
          "aria-roledescription": "carousel",
          "data-slot": "carousel",
          ...props,
          children
        }
      )
    }
  );
}
function CarouselContent({ className, ...props }) {
  const { carouselRef, orientation } = useCarousel();
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: carouselRef,
      className: "overflow-hidden",
      "data-slot": "carousel-content",
      children: /* @__PURE__ */ jsx(
        "div",
        {
          className: cn(
            "flex",
            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
            className
          ),
          ...props
        }
      )
    }
  );
}
function CarouselItem({ className, ...props }) {
  const { orientation } = useCarousel();
  return /* @__PURE__ */ jsx(
    "div",
    {
      role: "group",
      "aria-roledescription": "slide",
      "data-slot": "carousel-item",
      className: cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      ),
      ...props
    }
  );
}
var defaultLogos = [
  {
    name: "Company 1",
    logo: "https://cdn.ing/assets/files/record/286222/4w39lhwei0pa97up2wjnay3j96gh"
  },
  {
    name: "Company 2",
    logo: "https://cdn.ing/assets/files/record/286252/xd7hyzbpkjwsauxm5j9yn9v44min"
  },
  {
    name: "Company 3",
    logo: "https://cdn.ing/assets/files/record/286216/bw4zypgflisdtapxy0n4nbmsmtum"
  },
  {
    name: "Company 4",
    logo: "https://cdn.ing/assets/files/record/286284/cz20wf2l2tjokrxu563pcml7pkmu"
  },
  {
    name: "Company 5",
    logo: "https://cdn.ing/assets/files/record/286215/6wwi6yh2ax2nuo2vqa5gn9vozrgq"
  },
  {
    name: "Company 6",
    logo: "https://cdn.ing/assets/files/record/286249/ff7m4wdw0zefj7d96v4ajmljuifc"
  },
  {
    name: "Company 7",
    logo: "https://cdn.ing/assets/files/record/286220/t34kymqu5g9xr85o89cji3kfuypb"
  },
  {
    name: "Company 8",
    logo: "https://cdn.ing/assets/files/record/286251/c64yb2c255uig6vpe4gdlnten7rv"
  }
];
function LogosNumberedCarousel({
  className,
  headline = "Powering the world's best product teams.",
  logos = defaultLogos,
  optixFlowConfig
}) {
  return /* @__PURE__ */ jsxs("section", { className: cn("py-32 overflow-hidden", className), children: [
    /* @__PURE__ */ jsx("div", { className: "container mb-12", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-6 md:flex-row", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: headline }),
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: logos.length.toString().padStart(2, "0") }),
        /* @__PURE__ */ jsx("span", { children: "companies trust us" })
      ] })
    ] }) }),
    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
      /* @__PURE__ */ jsx(
        Carousel,
        {
          opts: { loop: true },
          plugins: [AutoScroll({ playOnInit: true, speed: 0.8 })],
          children: /* @__PURE__ */ jsx(CarouselContent, { className: "ml-0", children: [...logos, ...logos].map((logo, index) => /* @__PURE__ */ jsx(
            CarouselItem,
            {
              className: "flex basis-1/3 justify-center pl-0 sm:basis-1/4 md:basis-1/5 lg:basis-1/6",
              children: /* @__PURE__ */ jsxs("div", { className: "group relative mx-6 flex shrink-0 items-center justify-center", children: [
                /* @__PURE__ */ jsx("span", { className: "absolute -top-4 left-0 text-xs font-medium text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100", children: (index % logos.length + 1).toString().padStart(2, "0") }),
                /* @__PURE__ */ jsx(
                  Img,
                  {
                    src: logo.logo,
                    alt: `${logo.name} logo`,
                    width: 120,
                    height: 40,
                    className: "h-10 w-auto object-contain opacity-60 grayscale transition-all group-hover:opacity-100 group-hover:grayscale-0",
                    optixFlowConfig
                  }
                )
              ] })
            },
            index
          )) })
        }
      ),
      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 w-32 bg-linear-to-r from-background to-transparent" }),
      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-32 bg-linear-to-l from-background to-transparent" })
    ] })
  ] });
}

export { LogosNumberedCarousel };
//# sourceMappingURL=logos-numbered-carousel.js.map
//# sourceMappingURL=logos-numbered-carousel.js.map