// Mark — A4 collapsing aperture, refined for a calm, flowy modern brand.
// Replaces the rigid concentric-rings feel with continuous arcs that ease
// from open to focused. Animates on demand (~3s loop).

// v3 mark — exact match to v2 A4 collapsing aperture: three offset rings
// stepping in weight + opacity, tightening toward an accent dot in the
// upper-right. This is the mark; animations apply on top without changing
// proportions.
//
// `animationMode`: 'breathe' | 'orbit' | 'focus' | 'pulse' | 'none'
function MarkAperture({
  size = 96,
  color = 'oklch(0.18 0.01 60)',
  accent = 'oklch(0.55 0.16 35)',
  animate = true,
  animationMode = 'breathe',
  // 0..1 — collapse parameter for the parametric size scale
  focus = 0,
}) {
  const id = React.useId ? React.useId() : 'apv3-' + Math.random().toString(36).slice(2);
  const mode = animate ? animationMode : 'none';
  const f = Math.max(0, Math.min(1, focus));

  // Exact A4 composition. Focus only nudges the radii inward.
  const rings = [
    { cx: 46, cy: 54, r: 40 - f * 18, w: 2.2, op: 0.28 },
    { cx: 52, cy: 48, r: 26 - f * 12, w: 2.5, op: 0.50 },
    { cx: 58, cy: 44, r: 13 - f *  6, w: 2.8, op: 0.78 },
  ];
  const dot = {
    cx: 62, cy: 42,
    r: 5 + f * 1.2,
  };

  return (
    <svg width={size} height={size} viewBox="0 0 100 100"
         style={{ flexShrink: 0, overflow: 'visible' }}>
      {rings.map((R, i) => (
        <g key={i} style={{ transformOrigin: `${R.cx}px ${R.cy}px` }}>
          <circle cx={R.cx} cy={R.cy} r={R.r}
                  fill="none" stroke={color} strokeWidth={R.w} opacity={R.op}>
            {mode === 'breathe' && (
              <animate attributeName="r"
                values={`${R.r}; ${R.r * (1.04 + i * 0.01)}; ${R.r}`}
                keyTimes="0; 0.5; 1" dur="6s"
                begin={`${i * 0.3}s`} repeatCount="indefinite" />
            )}
            {mode === 'pulse' && (
              <animate attributeName="opacity"
                values={`${R.op}; ${R.op * 1.5}; ${R.op}`}
                keyTimes="0; 0.5; 1" dur="4s"
                begin={`${i * 0.2}s`} repeatCount="indefinite" />
            )}
            {mode === 'focus' && (
              <animate attributeName="r"
                values={`${R.r}; ${R.r * (0.55 + i * 0.05)}; ${R.r}`}
                keyTimes="0; 0.55; 1" dur="5.5s" repeatCount="indefinite" />
            )}
            {mode === 'orbit' && i > 0 && (
              <animateTransform attributeName="transform" type="rotate"
                from={`0 ${R.cx} ${R.cy}`}
                to={`${i % 2 === 0 ? 360 : -360} ${R.cx} ${R.cy}`}
                dur={`${30 - i * 6}s`} repeatCount="indefinite" />
            )}
          </circle>
        </g>
      ))}

      <circle cx={dot.cx} cy={dot.cy} r={dot.r} fill={accent}>
        {mode === 'breathe' && (
          <animate attributeName="r"
            values={`${dot.r}; ${dot.r * 1.25}; ${dot.r}`}
            keyTimes="0; 0.5; 1" dur="3s" repeatCount="indefinite" />
        )}
        {mode === 'pulse' && (
          <animate attributeName="r"
            values={`${dot.r}; ${dot.r * 1.6}; ${dot.r}`}
            keyTimes="0; 0.4; 1" dur="2.4s" repeatCount="indefinite" />
        )}
        {mode === 'focus' && (
          <animate attributeName="r"
            values={`${dot.r}; ${dot.r * 0.7}; ${dot.r * 1.4}; ${dot.r}`}
            keyTimes="0; 0.4; 0.6; 1" dur="5.5s" repeatCount="indefinite" />
        )}
        {mode === 'orbit' && (
          <animateTransform attributeName="transform" type="rotate"
            from={`0 58 44`} to={`360 58 44`}
            dur="22s" repeatCount="indefinite" />
        )}
      </circle>
    </svg>
  );
}

// A static "focused" version — for app icon, favicon, etc. The aperture has
// already collapsed; only the mark (and a soft halo) remain.
// Simplified glyph for ≤18px — same A4 composition tuned for legibility.
function MarkFocused({ size = 96, color = 'oklch(0.18 0.01 60)', accent = 'oklch(0.55 0.16 35)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ flexShrink: 0 }}>
      <circle cx="46" cy="54" r="40" fill="none" stroke={color} strokeWidth="3"   opacity="0.30" />
      <circle cx="52" cy="48" r="26" fill="none" stroke={color} strokeWidth="3.2" opacity="0.55" />
      <circle cx="58" cy="44" r="13" fill="none" stroke={color} strokeWidth="3.6" opacity="0.85" />
      <circle cx="62" cy="42" r="6"  fill={accent} />
    </svg>
  );
}

// Wordmark — same letterforms as the hero so the brand reads consistently.
// Instrument Serif at refined size with tight tracking and an accent period.
function MarkWordmark({ size = 48, color = 'currentColor', accent = 'oklch(0.62 0.13 30)' }) {
  return (
    <span className="display" style={{
      fontSize: size,
      lineHeight: 0.96,
      letterSpacing: '-0.025em',
      color,
    }}>
      Mark<span style={{ color: accent }}>.</span>
    </span>
  );
}

// v2 collapsing aperture — offset rings tightening toward an upper-right dot.
// Static by default; animate=true loops the convergence (~3.6s).
function MarkApertureV2({
  size = 96,
  color = 'oklch(0.22 0.012 250)',
  accent = 'oklch(0.62 0.13 30)',
  animate = false,
}) {
  const baseRings = [
    { cx: 46, cy: 54, r: 40, w: 2.2, op: 0.28 },
    { cx: 52, cy: 48, r: 26, w: 2.5, op: 0.5 },
    { cx: 58, cy: 44, r: 13, w: 2.8, op: 0.78 },
  ];
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ flexShrink: 0, overflow: 'visible' }}>
      {baseRings.map((r, i) => (
        <circle key={i} cx={r.cx} cy={r.cy} r={r.r} fill="none"
          stroke={color} strokeWidth={r.w} opacity={r.op}>
          {animate && (
            <>
              <animate attributeName="r"
                values={`${r.r}; ${r.r * 0.6}; ${r.r}`}
                keyTimes="0; 0.55; 1" dur="3.6s" repeatCount="indefinite" />
              <animate attributeName="opacity"
                values={`${r.op}; ${r.op * 0.35}; ${r.op}`}
                keyTimes="0; 0.55; 1" dur="3.6s" repeatCount="indefinite" />
            </>
          )}
        </circle>
      ))}
      <circle cx="62" cy="42" r="5" fill={accent}>
        {animate && (
          <animate attributeName="r"
            values="5; 4.4; 7; 5"
            keyTimes="0; 0.5; 0.62; 1" dur="3.6s" repeatCount="indefinite" />
        )}
      </circle>
    </svg>
  );
}

Object.assign(window, { MarkAperture, MarkApertureV2, MarkFocused, MarkWordmark });