// Starfield dot background + subtle grid, fixed behind content.
const { useRef, useEffect } = React;

function Starfield({ density = 0.00022, opacity = 0.55 }) {
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    let raf;
    let stars = [];
    const dpr = Math.min(window.devicePixelRatio || 1, 2);

    function resize() {
      const w = window.innerWidth;
      const h = Math.max(window.innerHeight, document.body.scrollHeight);
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      canvas.style.width = w + "px";
      canvas.style.height = h + "px";
      const count = Math.floor(w * h * density);
      stars = Array.from({ length: count }, () => ({
        x: Math.random() * w,
        y: Math.random() * h,
        bx: 0, by: 0,
        r: Math.random() < 0.92 ? Math.random() * 0.9 + 0.2 : Math.random() * 1.6 + 0.8,
        a: Math.random() * 0.7 + 0.15,
        tw: Math.random() * Math.PI * 2,
        sp: Math.random() * 0.004 + 0.001,
        // drift parameters per-star
        dax: Math.random() * 8 + 2,
        day: Math.random() * 8 + 2,
        dpx: Math.random() * Math.PI * 2,
        dpy: Math.random() * Math.PI * 2,
        dfx: 0.00015 + Math.random() * 0.0003,
        dfy: 0.00015 + Math.random() * 0.0003,
        depth: Math.random(),
      }));
      stars.forEach((s) => { s.bx = s.x; s.by = s.y; });
    }
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(document.body);
    window.addEventListener("resize", resize);

    function tick(now) {
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
      for (const s of stars) {
        s.tw += s.sp;
        const a = s.a * (0.6 + 0.4 * Math.sin(s.tw));
        // gentle per-star drift (parallax feel)
        const dx = Math.sin(now * s.dfx + s.dpx) * s.dax * (0.3 + s.depth);
        const dy = Math.cos(now * s.dfy + s.dpy) * s.day * (0.3 + s.depth);
        ctx.fillStyle = `rgba(243,240,234,${a * opacity})`;
        ctx.beginPath();
        ctx.arc(s.bx + dx, s.by + dy, s.r, 0, Math.PI * 2);
        ctx.fill();
      }
      raf = requestAnimationFrame(tick);
    }
    tick(performance.now());
    return () => {
      cancelAnimationFrame(raf);
      ro.disconnect();
      window.removeEventListener("resize", resize);
    };
  }, []);
  return (
    <canvas
      ref={canvasRef}
      style={{
        position: "absolute",
        inset: 0,
        width: "100%",
        height: "100%",
        pointerEvents: "none",
        zIndex: 0,
      }}
    />
  );
}

function GridBackdrop() {
  return (
    <div
      aria-hidden
      style={{
        position: "absolute",
        inset: 0,
        backgroundImage:
          "linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)",
        backgroundSize: "80px 80px",
        maskImage:
          "radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 80%)",
        WebkitMaskImage:
          "radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 80%)",
        pointerEvents: "none",
        zIndex: 0,
      }}
    />
  );
}

function SectionDivider() {
  return (
    <div
      aria-hidden
      style={{
        height: 1,
        background:
          "linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent)",
        margin: "0 auto",
        maxWidth: 1200,
      }}
    />
  );
}

Object.assign(window, { Starfield, GridBackdrop, SectionDivider });