// ─────────────────────────────────────────────────────────────
// THE SUPERSET MARK — the COMPANY device (About / Team pages).
//
// Outrun the company holds BOTH product families, so its mark nests
// both product silhouettes around one centre: at every ring radius a
// CIRCLE (the platform Target) and a DODECAGON (the PAS Poly) sit
// together — the dodecagon's flats tangent to the circle, its vertices
// breaking just past it. Same hairline grammar, one red ring + one red
// centre dot, three states ('whole' · 'fragmented' · 'resolved').
//
// Use it the way the product marks are used: whole on the hero,
// fragmented where the copy is about fragmentation, resolved on the CTA.
// ─────────────────────────────────────────────────────────────

const SM_INK = '#37474F';
const SM_RED = '#EE4B46';

// Dodecagon path whose INRADIUS = r (flats tangent to a circle of radius r,
// vertices poking just outside). Flat-top orientation.
function smDodec(cx, cy, r) {
  const n = 12;
  const R = r / Math.cos(Math.PI / n); // circumradius from inradius
  let d = '';
  for (let k = 0; k < n; k++) {
    const a = -Math.PI / 2 + Math.PI / n + k * (2 * Math.PI / n);
    const x = cx + R * Math.cos(a);
    const y = cy + R * Math.sin(a);
    d += (k === 0 ? 'M' : 'L') + x.toFixed(2) + ' ' + y.toFixed(2) + ' ';
  }
  return d + 'Z';
}

function SupersetMark({
  size = 720,
  place = {},
  rings = [0.94, 0.66, 0.46],          // fractions of radius; each draws circle + dodecagon
  redRing = 0.28,
  redWidth = null,
  dot = true,
  dotR = 11,
  crosshair = false,
  inverse = false,
  state = 'whole',
  baseOpacity = 1,
  inkScale = 1,
  redColor = SM_RED,
}) {
  const stroke = inverse ? '#FFFFFF' : SM_INK;
  const c = size / 2;
  const R = size / 2;
  const fragmented = state === 'fragmented';
  const resolved = state === 'resolved';

  // exile vector — up-left, back toward where the owned centre belongs.
  const exile = { x: c - R * 0.34, y: c - R * 0.62 };

  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={stroke} strokeWidth="0.5" opacity={(inverse ? 0.22 : 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) => {
        const broken = fragmented && i === 0; // outermost pair breaks
        const op = ((inverse ? 0.16 : 0.14) + (rings.length - i) * (resolved ? 0.07 : 0.05)) * inkScale;
        const sw = resolved ? 0.9 : 0.75;
        const dash = broken ? '5 9' : undefined;
        return (
          <React.Fragment key={i}>
            <circle cx={c} cy={c} r={R * f} fill="none" stroke={stroke} strokeWidth={sw} strokeDasharray={dash} opacity={op} />
            <path d={smDodec(c, c, R * f)} fill="none" stroke={stroke} strokeWidth={sw} strokeLinejoin="miter" strokeDasharray={dash} opacity={op} />
          </React.Fragment>
        );
      })}
      {redRing != null && !fragmented && (
        <circle cx={c} cy={c} r={R * redRing} fill="none" stroke={redColor}
          strokeWidth={redWidth != null ? redWidth : (resolved ? 2 : 1.6)} />
      )}
      {fragmented && (
        <line x1={c} y1={c} x2={exile.x} y2={exile.y} stroke={redColor} strokeWidth="0.75" opacity="0.5" />
      )}
      {dot && (
        fragmented
          ? <circle cx={exile.x} cy={exile.y} r={dotR} fill={redColor} />
          : <circle cx={c} cy={c} r={resolved ? dotR + 3 : dotR} fill={redColor} />
      )}
    </svg>
  );
}

Object.assign(window, { SupersetMark, SM_INK, SM_RED });