// flippy-splashes-v3.jsx — ambient neon paint splash decorations + micro splats + wallpaper

// Hand-built SVG paint blobs (organic shapes with drips)
const SPLASH_SHAPES = [
  "M40 60 C20 40 30 10 70 20 C110 25 130 0 160 30 C190 50 220 30 230 70 C245 110 200 130 170 120 C140 110 110 140 80 130 C60 125 30 110 40 80 C42 75 38 65 40 60 Z M50 130 L52 145 L48 150 L50 130 Z M180 130 L185 145 L182 155 L180 140 Z M220 100 L228 108 L225 112 Z",
  "M50 50 C30 30 60 0 100 10 C130 18 150 5 175 25 C200 45 195 80 160 90 C130 98 100 115 80 100 C60 88 35 70 50 50 Z M30 70 L20 85 L25 95 L35 80 Z M160 100 L168 120 L163 135 Z M105 110 L102 125 L108 135 Z",
  "M20 80 C0 70 10 40 50 50 C80 56 110 35 140 50 C170 65 210 50 240 70 C270 88 260 110 220 105 C190 102 160 120 130 105 C100 92 60 100 30 95 C18 92 22 84 20 80 Z M50 110 L48 125 Z M180 110 L185 130 Z",
];

const PaintSplashes = () => {
  const splashes = useMemo(() => ([
    { cls: "s1", shape: 0, op: 0.45 },
    { cls: "s2", shape: 1, op: 0.32 },
    { cls: "s3", shape: 2, op: 0.25 },
    { cls: "s4", shape: 0, op: 0.40 },
    { cls: "s5", shape: 1, op: 0.42 },
    { cls: "s6", shape: 2, op: 0.30 },
  ]), []);

  // Generate many tiny micro-splat positions once
  const micro = useMemo(() => {
    const arr = [];
    const N = 90;
    for (let i = 0; i < N; i++) {
      arr.push({
        top: Math.random() * 100,
        left: Math.random() * 100,
        size: 1 + Math.random() * 5,
        delay: Math.random() * 7,
        op: 0.2 + Math.random() * 0.55,
      });
    }
    return arr;
  }, []);

  return (
    <div aria-hidden="true">
      <div className="bg-wallpaper" />
      <div className="micro-splats">
        {micro.map((m, i) => (
          <span
            key={i}
            style={{
              top: m.top + "%",
              left: m.left + "%",
              width: m.size + "px",
              height: m.size + "px",
              animationDelay: -m.delay + "s",
              opacity: m.op,
            }}
          />
        ))}
      </div>
      {splashes.map((s, i) => (
        <div
          key={i}
          className={`paint-splash ${s.cls}`}
          style={{ "--s-op": s.op }}
        >
          <svg viewBox="0 0 280 180" xmlns="http://www.w3.org/2000/svg">
            <path d={SPLASH_SHAPES[s.shape]} fill="var(--acid)" />
          </svg>
        </div>
      ))}
    </div>
  );
};

Object.assign(window, { PaintSplashes });