// ─────────────────────────────────────────────────────────────
// THE TARGET — Outrun's geometric brand device (Phase 2).
//
// Concept: the CENTRE DOT is your product; the RINGS are the layers
// you normally don't control (software house, infra, distribution),
// drawn as quiet structure around a centre that's yours.
// "The centre is yours" → carries the real-ownership / on-your-terms
// message wherever the mark appears.
//
// Discipline (locked):
//   1. One red element per view — one red ring + one red dot, max.
//   2. Always anchored to a corner/margin and bleeding off-edge.
//      Never floats centred (except the deliberate CTA payoff).
//   3. Ink hairlines only; the supporting brand colours never enter
//      the mark (they stay as the tiny existing status indicators).
//
// State drives meaning:
//   'whole'      — rings + red ring + centred dot (ownership intact)
//   'fragmented' — hollow centre, a broken (dashed) ring, dot exiled
//                  OUTSIDE on a leader line (you don't own the centre)
//   'resolved'   — crisp, higher-contrast, solid red centre (the payoff)
// ─────────────────────────────────────────────────────────────

const TM_INK = '#37474F';
const TM_RED = '#EE4B46';

// Low-level: draws a target into an absolutely-positioned SVG so it can
// be anchored to a corner/margin and bleed off-edge precisely (no
// viewBox-slice distortion). `place` is raw CSS positioning.
function TargetMark({
  size = 720,
  place = {},
  rings = [0.94, 0.78, 0.62, 0.46],   // fractions of radius
  redRing = 0.30,
  redWidth = null,   // override red ring stroke width
  dot = true,
  dotR = 11,
  crosshair = false,
  inverse = false,
  state = 'whole',
  baseOpacity = 1,
  inkScale = 1,   // multiplies ink hairline + crosshair opacity only (red stays)
  reveal = true,
  revealDelay = 0,
}) {
  const stroke = inverse ? '#FFFFFF' : TM_INK;
  const c = size / 2;
  const R = size / 2;
  const fragmented = state === 'fragmented';
  const resolved = state === 'resolved';

  // exile vector for the fragmented dot — up-left, back toward where the
  // owned centre belongs (and away from the section's bottom/right edges).
  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 ring breaks
        return (
          <circle key={i} cx={c} cy={c} r={R * f} fill="none"
            stroke={stroke}
            strokeWidth={resolved ? 0.9 : 0.75}
            strokeDasharray={broken ? '5 9' : undefined}
            opacity={((inverse ? 0.16 : 0.14) + (rings.length - i) * (resolved ? 0.07 : 0.05)) * inkScale} />
        );
      })}
      {redRing != null && !fragmented && (
        <circle cx={c} cy={c} r={R * redRing} fill="none" stroke={TM_RED} strokeWidth={redWidth != null ? redWidth : (resolved ? 2 : 1.5)} />
      )}
      {fragmented && (
        <line x1={c} y1={c} x2={exile.x} y2={exile.y} stroke={TM_RED} strokeWidth="0.75" opacity="0.5" />
      )}
      {dot && (
        fragmented
          ? <circle cx={exile.x} cy={exile.y} r={dotR} fill={TM_RED} />
          : <circle cx={c} cy={c} r={resolved ? dotR + 3 : dotR} fill={TM_RED} />
      )}
    </svg>
  );
}

// Small inline composing-ring used on the three pillar cards: completeness
// grows step 0→2 so the three cards together "rebuild" one target.
function PillarRing({ step = 0, size = 56 }) {
  const c = size / 2;
  const arcs = [
    // step 0: one open outer arc
    () => <path d={`M ${c} 4 A ${c - 4} ${c - 4} 0 0 1 ${size - 4} ${c}`} fill="none" stroke={TM_INK} strokeWidth="1" opacity="0.55" />,
    // step 1: outer arc + mid ring
    () => <>
      <circle cx={c} cy={c} r={c - 4} fill="none" stroke={TM_INK} strokeWidth="0.9" opacity="0.4" strokeDasharray="3 6" />
      <circle cx={c} cy={c} r={(c - 4) * 0.6} fill="none" stroke={TM_INK} strokeWidth="1" opacity="0.6" />
    </>,
    // step 2: complete target + red centre
    () => <>
      <circle cx={c} cy={c} r={c - 4} fill="none" stroke={TM_INK} strokeWidth="0.9" opacity="0.5" />
      <circle cx={c} cy={c} r={(c - 4) * 0.55} fill="none" stroke={TM_RED} strokeWidth="1.6" />
      <circle cx={c} cy={c} r={4.5} fill={TM_RED} />
    </>,
  ];
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block', overflow: 'visible' }} aria-hidden="true">
      {arcs[step]()}
    </svg>
  );
}

Object.assign(window, { TargetMark, PillarRing, TM_INK, TM_RED });