"use client";

// src/components/ui/dot-pattern.tsx
import * as React from "react";
import { LazyMotion, domAnimation, m } from "motion/react";

// src/lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/ui/dot-pattern.tsx
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function mulberry32(seed) {
  let s = seed >>> 0;
  return () => {
    s = s + 1831565813 >>> 0;
    let t = s;
    t = Math.imul(t ^ t >>> 15, t | 1);
    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
    return ((t ^ t >>> 14) >>> 0) / 4294967296;
  };
}
function hashString(str) {
  let h = 2166136261;
  for (let i = 0; i < str.length; i++) {
    h ^= str.charCodeAt(i);
    h = Math.imul(h, 16777619);
  }
  return h >>> 0;
}
function DotPattern({
  width = 14,
  height = 14,
  x = 0,
  y = 0,
  cx = 1,
  cy = 1,
  cr = 0.8,
  className,
  glow = false,
  glowCount = 2,
  glowRadius = 240,
  ...props
}) {
  const id = React.useId();
  const maskId = `${id}-mask`;
  const gradId = `${id}-grad`;
  const clouds = React.useMemo(() => {
    const rng = mulberry32(hashString(`${id}|${glowCount}`));
    const rand = (min, max) => min + rng() * (max - min);
    return Array.from({ length: glowCount }).map((_, i) => {
      const startX = rand(85, 120);
      const endX = rand(-20, 15);
      const midX = (startX + endX) / 2 + rand(-6, 6);
      const startY = rand(85, 115);
      const endY = rand(-15, 10);
      const midY = (startY + endY) / 2 + rand(-4, 4);
      const duration = rand(8, 12);
      const delay = -(i / glowCount) * duration;
      return {
        key: i,
        xs: [`${startX}%`, `${midX}%`, `${endX}%`],
        ys: [`${startY}%`, `${midY}%`, `${endY}%`],
        duration,
        delay
      };
    });
  }, [glowCount, id]);
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      "aria-hidden": "true",
      className: cn(
        "pointer-events-none absolute inset-0 size-full fill-neutral-400/80",
        className
      ),
      ...props,
      children: [
        /* @__PURE__ */ jsxs("defs", { children: [
          /* @__PURE__ */ jsx(
            "pattern",
            {
              id,
              width,
              height,
              patternUnits: "userSpaceOnUse",
              patternContentUnits: "userSpaceOnUse",
              x,
              y,
              children: /* @__PURE__ */ jsx("circle", { cx, cy, r: cr })
            }
          ),
          glow ? /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsxs("radialGradient", { id: gradId, children: [
              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "0.9" }),
              /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "white", stopOpacity: "0.55" }),
              /* @__PURE__ */ jsx("stop", { offset: "75%", stopColor: "white", stopOpacity: "0.18" }),
              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
            ] }),
            /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: clouds.map((c) => /* @__PURE__ */ jsx(
              m.circle,
              {
                r: glowRadius,
                fill: `url(#${gradId})`,
                initial: { cx: c.xs[0], cy: c.ys[0], opacity: 0 },
                animate: {
                  cx: c.xs,
                  cy: c.ys,
                  // Long hold with soft fade at both ends.
                  opacity: [0, 1, 1, 0]
                },
                transition: {
                  duration: c.duration,
                  delay: c.delay,
                  repeat: Infinity,
                  ease: "linear",
                  times: [0, 0.3, 0.7, 1]
                }
              },
              `cloud-${c.key}`
            )) }) })
          ] }) : null
        ] }),
        /* @__PURE__ */ jsx(
          "rect",
          {
            width: "100%",
            height: "100%",
            strokeWidth: 0,
            fill: `url(#${id})`,
            mask: glow ? `url(#${maskId})` : void 0
          }
        )
      ]
    }
  );
}
export {
  DotPattern
};
//# sourceMappingURL=dot-pattern.js.map