/* global React */
const { useEffect, useRef, useState } = React;

/**
 * DotPattern — pure-CSS grid of dots, with radial mask falloff so the
 * pattern doesn't extend edge-to-edge. Sits at z-0 behind hero content.
 */
function DotPattern({ size = 24, dotColor = "rgba(160,160,160,0.6)", opacity = 0.06, style = {} }) {
  return (
    <div
      aria-hidden="true"
      style={{
        position: "absolute",
        inset: 0,
        opacity,
        backgroundImage: `radial-gradient(circle at 1px 1px, ${dotColor} 1px, transparent 0)`,
        backgroundSize: `${size}px ${size}px`,
        maskImage: "radial-gradient(ellipse at center, #000 30%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse at center, #000 30%, transparent 80%)",
        pointerEvents: "none",
        ...style,
      }}
    />
  );
}

Object.assign(window, { DotPattern });