// Ambient background visualisations — slow, faint, decorative.
// Toggle via body[data-ambient]; speed via CSS var --amb-dur. Respect reduced-motion.

function polar(cx, cy, r, deg) {
  const a = (deg - 90) * Math.PI / 180;
  return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
}

// Slowly rotating donut/pie — sits behind the BI reporting demo.
function AmbientPie({ tone = 'light' }) {
  const segs = [13, 9, 7, 6, 4, 3];
  const total = segs.reduce((a, b) => a + b, 0);
  let acc = 0;
  const C = 100, R = 92;
  const arcs = segs.map((s, i) => {
    const a0 = acc / total * 360; acc += s; const a1 = acc / total * 360;
    const large = (a1 - a0) > 180 ? 1 : 0;
    const p0 = polar(C, C, R, a0), p1 = polar(C, C, R, a1);
    return { d: `M ${C} ${C} L ${p0.x.toFixed(2)} ${p0.y.toFixed(2)} A ${R} ${R} 0 ${large} 1 ${p1.x.toFixed(2)} ${p1.y.toFixed(2)} Z`, o: (0.9 - i * 0.13).toFixed(2) };
  });
  const col = tone === 'light' ? '#ffffff' : '#E8611A';
  return (
    <div className="ambient ambient-pie" aria-hidden="true">
      <svg viewBox="0 0 200 200">
        <g className="amb-spin">
          {arcs.map((a, i) => <path key={i} d={a.d} fill={col} opacity={a.o} />)}
          <circle cx={C} cy={C} r="52" fill="none" stroke={col} strokeWidth="0.7" />
          <circle cx={C} cy={C} r="74" fill="none" stroke={col} strokeWidth="0.5" strokeDasharray="1 4" />
        </g>
      </svg>
    </div>
  );
}

// Faint sensor grid with occasional expanding "pings" — behind the data-sources hub.
function AmbientSensors({ tone = 'dark' }) {
  const cols = 16, rows = 10;
  const dots = [];
  for (let y = 0; y < rows; y++)
    for (let x = 0; x < cols; x++)
      dots.push({ x: (x / (cols - 1)) * 100, y: (y / (rows - 1)) * 64, k: (x * 7 + y * 13) % 6 });
  const dotCol = tone === 'dark' ? '#1A1A18' : '#ffffff';
  return (
    <div className="ambient ambient-sensors" aria-hidden="true">
      <svg viewBox="0 0 100 64" preserveAspectRatio="xMidYMid slice">
        {dots.map((d, i) => (
          <circle key={i} cx={d.x} cy={d.y} r="0.45" fill={dotCol} className={`amb-dot amb-dot-${d.k}`} />
        ))}
      </svg>
    </div>
  );
}

window.AmbientPie = AmbientPie;
window.AmbientSensors = AmbientSensors;