// Three exploratory team-page marks — variants on the Target grammar
// (ink hairline rings + crosshair) that break the single-centre-dot rule.
//   ConstellationMark — cluster of dots at centre, one red (the team)
//   OrbitMark         — dots sitting ON the rings, one red
//   FieldMark         — a scattered field of small targets, one per person

const TMK_INK = '#37474F';
const TMK_RED = '#EE4B46';
const TMK_TEAL = '#00A4B4';

// ── Option 1: Constellation — rings + crosshair, cluster of dots centred.
function ConstellationMark({ size = 720, place = {}, rings = [0.94, 0.78, 0.62, 0.46], crosshair = true, inkScale = 0.85, baseOpacity = 1, dots = null }) {
  const c = size / 2, R = size / 2;
  // default cluster: 5 nodes (one red), loosely scattered near centre
  const cluster = dots || [
    { x: 0.00, y: 0.00, r: 11, red: true },
    { x: -0.18, y: -0.10, r: 6 },
    { x: 0.15, y: -0.14, r: 6 },
    { x: -0.11, y: 0.16, r: 6 },
    { x: 0.18, y: 0.10, r: 6 },
    { x: 0.04, y: -0.21, r: 6 },
    { x: -0.22, y: 0.05, r: 6 },
    { x: 0.11, y: 0.22, r: 6 },
  ];
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}
      style={{ position: 'absolute', display: 'block', overflow: 'visible', opacity: baseOpacity, ...place }} aria-hidden="true">
      {crosshair && (
        <g stroke={TMK_INK} strokeWidth="0.5" opacity={0.16 * inkScale}>
          <line x1={c - R} y1={c} x2={c + R} y2={c} />
          <line x1={c} y1={c - R} x2={c} y2={c + R} />
        </g>
      )}
      {rings.map((f, i) => (
        <circle key={i} cx={c} cy={c} r={R * f} fill="none" stroke={TMK_INK} strokeWidth="0.75"
          opacity={(0.14 + (rings.length - i) * 0.05) * inkScale} />
      ))}
      {/* faint connecting hairlines from centre to each node */}
      <g stroke={TMK_INK} strokeWidth="0.6" opacity={0.22 * inkScale}>
        {cluster.filter(d => !(d.x === 0 && d.y === 0)).map((d, i) => (
          <line key={i} x1={c} y1={c} x2={c + d.x * R} y2={c + d.y * R} />
        ))}
      </g>
      {cluster.map((d, i) => (
        <circle key={i} cx={c + d.x * R} cy={c + d.y * R} r={d.r} fill={d.red ? TMK_RED : TMK_TEAL}
          opacity={d.red ? 1 : 0.9} />
      ))}
    </svg>
  );
}

// ── Option 2: Orbits — dots positioned ON the ring paths, one red.
function OrbitMark({ size = 720, place = {}, rings = [0.94, 0.78, 0.62, 0.46], crosshair = true, inkScale = 0.85, baseOpacity = 1 }) {
  const c = size / 2, R = size / 2;
  // a node on a given ring fraction at a given angle (deg). one red.
  const nodes = [
    { ring: 0.62, deg: -118, r: 11, red: true },
    { ring: 0.94, deg: -38, r: 7 },
    { ring: 0.78, deg: 28, r: 7 },
    { ring: 0.78, deg: -150, r: 7 },
    { ring: 0.46, deg: 96, r: 7 },
  ];
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}
      style={{ position: 'absolute', display: 'block', overflow: 'visible', opacity: baseOpacity, ...place }} aria-hidden="true">
      {crosshair && (
        <g stroke={TMK_INK} strokeWidth="0.5" opacity={0.16 * inkScale}>
          <line x1={c - R} y1={c} x2={c + R} y2={c} />
          <line x1={c} y1={c - R} x2={c} y2={c + R} />
        </g>
      )}
      {rings.map((f, i) => (
        <circle key={i} cx={c} cy={c} r={R * f} fill="none" stroke={TMK_INK} strokeWidth="0.75"
          opacity={(0.14 + (rings.length - i) * 0.05) * inkScale} />
      ))}
      {nodes.map((n, i) => {
        const a = n.deg * Math.PI / 180;
        return <circle key={i} cx={c + Math.cos(a) * R * n.ring} cy={c + Math.sin(a) * R * n.ring}
          r={n.r} fill={n.red ? TMK_RED : TMK_INK} opacity={n.red ? 1 : 0.8} />;
      })}
    </svg>
  );
}

// ── Option 3: Field — scattered small targets, one per person, one red dot.
function FieldMark({ size = 720, place = {}, baseOpacity = 1, inkScale = 0.85 }) {
  // each: position fraction + small target size fraction. one has a red dot.
  const marks = [
    { x: 0.74, y: 0.30, s: 0.30, red: true },
    { x: 0.30, y: 0.16, s: 0.20 },
    { x: 0.18, y: 0.62, s: 0.24 },
    { x: 0.60, y: 0.74, s: 0.18 },
  ];
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}
      style={{ position: 'absolute', display: 'block', overflow: 'visible', opacity: baseOpacity, ...place }} aria-hidden="true">
      {marks.map((m, i) => {
        const cx = m.x * size, cy = m.y * size, r = m.s * size / 2;
        return (
          <g key={i}>
            <circle cx={cx} cy={cy} r={r} fill="none" stroke={TMK_INK} strokeWidth="0.75" opacity={0.28 * inkScale} />
            <circle cx={cx} cy={cy} r={r * 0.55} fill="none" stroke={m.red ? TMK_RED : TMK_INK} strokeWidth={m.red ? 1.4 : 0.75} opacity={m.red ? 1 : 0.34 * inkScale} />
            <circle cx={cx} cy={cy} r={m.red ? 5 : 3.4} fill={m.red ? TMK_RED : TMK_INK} opacity={m.red ? 1 : 0.7} />
          </g>
        );
      })}
    </svg>
  );
}

Object.assign(window, { ConstellationMark, OrbitMark, FieldMark });