// hub-bg.jsx — living "aquarium" background: slow-drifting light motes with bloom.
// Sparser, dimmer, slower than the landing. Reduced-motion -> static field.
// Props: intensity ('alive' | 'calm' | 'static'), motion (bool)

function LivingBackground({ intensity = 'calm', motion = true }) {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const prefersReduced = window.matchMedia &&
      window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    const animate = motion && intensity !== 'static' && !prefersReduced;

    // density / brightness per intensity
    const cfg = {
      alive:  { divisor: 11000, bright: 1.0,  speed: 1.0 },
      calm:   { divisor: 17000, bright: 0.8,  speed: 0.62 },
      static: { divisor: 17000, bright: 0.85, speed: 0 },
    }[intensity] || { divisor: 17000, bright: 0.8, speed: 0.62 };

    // mote palette — weighted warm, occasional blue, rare white-gold bloom
    const palette = [
      [231, 200, 122],  // gold
      [231, 200, 122],
      [245, 197, 24],   // bright gold
      [127, 178, 224],  // blue
      [200, 190, 210],  // pale violet-white
      [255, 246, 224],  // warm white
    ];

    let w, h, motes = [], blooms = [], raf, t = 0;

    function build() {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      w = canvas.offsetWidth;
      h = canvas.offsetHeight;
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

      const n = Math.min(Math.round((w * h) / cfg.divisor), 150);
      motes = [];
      for (let i = 0; i < n; i++) {
        const c = palette[(Math.random() * palette.length) | 0];
        motes.push({
          x: Math.random() * w,
          y: Math.random() * h,
          r: Math.random() * 1.5 + 0.35,
          a: (Math.random() * 0.38 + 0.10) * cfg.bright,
          vy: -(Math.random() * 0.16 + 0.03) * cfg.speed,
          vx: (Math.random() - 0.5) * 0.05 * cfg.speed,
          p: Math.random() * Math.PI * 2,
          tw: Math.random() * 0.011 + 0.005,
          c,
        });
      }
      // a few large soft blooms (gold), very faint — the "warm depth"
      blooms = [];
      const bn = Math.max(2, Math.round(w / 620));
      for (let i = 0; i < bn; i++) {
        blooms.push({
          x: Math.random() * w,
          y: Math.random() * h * 0.9 + h * 0.05,
          r: Math.random() * 120 + 90,
          a: Math.random() * 0.05 + 0.02,
          hue: Math.random() > 0.5 ? [231, 200, 122] : [90, 120, 180],
        });
      }
    }

    function dot(m, alpha) {
      const [r, g, b] = m.c;
      const grad = ctx.createRadialGradient(m.x, m.y, 0, m.x, m.y, m.r * 4.5);
      grad.addColorStop(0, `rgba(${r},${g},${b},${alpha})`);
      grad.addColorStop(0.4, `rgba(${r},${g},${b},${alpha * 0.35})`);
      grad.addColorStop(1, `rgba(${r},${g},${b},0)`);
      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.arc(m.x, m.y, m.r * 4.5, 0, 7);
      ctx.fill();
    }

    function frame() {
      ctx.clearRect(0, 0, w, h);
      ctx.globalCompositeOperation = 'lighter';

      for (const b of blooms) {
        const [r, g, bl] = b.hue;
        const grad = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, b.r);
        grad.addColorStop(0, `rgba(${r},${g},${bl},${b.a})`);
        grad.addColorStop(1, `rgba(${r},${g},${bl},0)`);
        ctx.fillStyle = grad;
        ctx.beginPath();
        ctx.arc(b.x, b.y, b.r, 0, 7);
        ctx.fill();
      }

      for (const m of motes) {
        const twinkle = animate ? (0.62 + 0.38 * Math.sin(m.p)) : 1;
        dot(m, m.a * twinkle);
        if (animate) {
          m.y += m.vy;
          m.x += m.vx;
          m.p += m.tw;
          if (m.y < -8) { m.y = h + 8; m.x = Math.random() * w; }
          if (m.x < -8) m.x = w + 8;
          else if (m.x > w + 8) m.x = -8;
        }
      }
      ctx.globalCompositeOperation = 'source-over';
      if (animate) raf = requestAnimationFrame(frame);
    }

    build();
    frame();
    const onResize = () => { build(); if (!animate) frame(); };
    window.addEventListener('resize', onResize);
    return () => { window.removeEventListener('resize', onResize); if (raf) cancelAnimationFrame(raf); };
  }, [intensity, motion]);

  return React.createElement('canvas', { ref, className: 'hub-canvas', 'aria-hidden': 'true' });
}

window.LivingBackground = LivingBackground;