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

// Animated constellation starfield — drawn on canvas, confined to the hero.
function Constellation() {
  const canvasRef = useRef(null);
  const raf = useRef(0);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
    let stars = [];
    const mouse = { x: -9999, y: -9999 };

    function resize() {
      const r = canvas.getBoundingClientRect();
      w = r.width; h = r.height;
      canvas.width = w * dpr; canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      const count = Math.min(110, Math.floor((w * h) / 12000));
      stars = Array.from({ length: count }, () => ({
        x: Math.random() * w, y: Math.random() * h,
        vx: (Math.random() - 0.5) * 0.12, vy: (Math.random() - 0.5) * 0.12,
        r: Math.random() * 1.4 + 0.5,
        tw: Math.random() * Math.PI * 2,
        hue: Math.random() > 0.55 ? 'c' : 'p',
      }));
    }

    function draw() {
      ctx.clearRect(0, 0, w, h);
      const maxDist = 132;
      for (let i = 0; i < stars.length; i++) {
        const s = stars[i];
        if (!reduce) { s.x += s.vx; s.y += s.vy; s.tw += 0.02; }
        if (s.x < 0) s.x = w; if (s.x > w) s.x = 0;
        if (s.y < 0) s.y = h; if (s.y > h) s.y = 0;

        // links between near stars
        for (let j = i + 1; j < stars.length; j++) {
          const o = stars[j];
          const dx = s.x - o.x, dy = s.y - o.y;
          const d = Math.hypot(dx, dy);
          if (d < maxDist) {
            const a = (1 - d / maxDist) * 0.16;
            ctx.strokeStyle = `rgba(129,140,248,${a})`;
            ctx.lineWidth = 0.7;
            ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(o.x, o.y); ctx.stroke();
          }
        }
        // mouse link
        const mdx = s.x - mouse.x, mdy = s.y - mouse.y;
        const md = Math.hypot(mdx, mdy);
        if (md < 170) {
          const a = (1 - md / 170) * 0.5;
          ctx.strokeStyle = `rgba(34,211,238,${a})`;
          ctx.lineWidth = 0.8;
          ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke();
        }
      }
      // stars on top
      for (const s of stars) {
        const tw = reduce ? 0.7 : (Math.sin(s.tw) * 0.4 + 0.6);
        ctx.beginPath();
        ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
        ctx.fillStyle = s.hue === 'c'
          ? `rgba(125,211,252,${0.45 * tw})`
          : `rgba(199,196,255,${0.6 * tw})`;
        ctx.fill();
      }
      raf.current = requestAnimationFrame(draw);
    }

    function onMove(e) {
      const r = canvas.getBoundingClientRect();
      mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top;
    }
    function onLeave() { mouse.x = -9999; mouse.y = -9999; }

    resize();
    draw();
    window.addEventListener('resize', resize);
    canvas.addEventListener('pointermove', onMove);
    canvas.addEventListener('pointerleave', onLeave);
    return () => {
      cancelAnimationFrame(raf.current);
      window.removeEventListener('resize', resize);
      canvas.removeEventListener('pointermove', onMove);
      canvas.removeEventListener('pointerleave', onLeave);
    };
  }, []);

  return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />;
}

// Soft gradient glow orbs — reusable decorative background blobs.
function GlowOrbs({ className = '' }) {
  return (
    <div className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`} aria-hidden="true">
      <div className="absolute -top-40 -left-32 w-[42rem] h-[42rem] rounded-full blur-3xl opacity-[0.5]"
        style={{ background: 'radial-gradient(circle at center, rgba(99,102,241,0.45), transparent 62%)' }} />
      <div className="absolute -top-20 right-[-12rem] w-[40rem] h-[40rem] rounded-full blur-3xl opacity-[0.45]"
        style={{ background: 'radial-gradient(circle at center, rgba(139,92,246,0.4), transparent 62%)' }} />
      <div className="absolute top-1/3 left-1/4 w-[30rem] h-[30rem] rounded-full blur-3xl opacity-30"
        style={{ background: 'radial-gradient(circle at center, rgba(34,211,238,0.3), transparent 65%)' }} />
    </div>
  );
}

Object.assign(window, { Constellation, GlowOrbs });