// MiraMark — mascot component. Do NOT import into pages yet.
// size prop (default 48) sets both width and height of the SVG.
// Stroke is currentColor — monochrome, inherits surrounding text colour.
// Blink uses SMIL <animate> on path d; reduced-motion gets a static face.
// blinkInterval (optional, seconds): simple even single-blink every N seconds,
//   using calcMode="linear" to avoid spline interpolation issues on d morphing.
//   Omit for the default 8s double-blink pattern used everywhere else.

function MiraMark({ size = 48, blinkInterval }) {
  const noMotion =
    typeof window !== 'undefined' &&
    window.matchMedia &&
    window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  // Eye geometry — flat dashes (open) and downward-bowed arcs (squint).
  // viewBox is 100×100; eyes sit at y≈40, smile at y≈62→74.
  const L_OPEN = 'M22,40 Q32,40 42,40';
  const L_SQNT = 'M22,38 Q32,50 42,38';
  const R_OPEN = 'M58,40 Q68,40 78,40';
  const R_SQNT = 'M58,38 Q68,50 78,38';

  // Default: 8s spline cycle with single + double-blink pattern (11 keyframes).
  const KT_DEF = '0;0.188;0.213;0.25;0.5;0.525;0.556;0.594;0.619;0.656;1';
  const KS_DEF = '0 0 1 1;0.4 0 1 1;0 0 0.6 1;0 0 1 1;0.4 0 1 1;0 0 0.6 1;0 0 1 1;0.4 0 1 1;0 0 0.6 1;0 0 1 1';
  const LV_DEF = `${L_SQNT};${L_SQNT};${L_OPEN};${L_SQNT};${L_SQNT};${L_OPEN};${L_SQNT};${L_SQNT};${L_OPEN};${L_SQNT};${L_SQNT}`;
  const RV_DEF = `${R_SQNT};${R_SQNT};${R_OPEN};${R_SQNT};${R_SQNT};${R_OPEN};${R_SQNT};${R_SQNT};${R_OPEN};${R_SQNT};${R_SQNT}`;

  // blinkInterval: linear 4-keyframe — rest open, close, open, hold open.
  // calcMode="linear" avoids spline d-morphing issues; no keySplines needed.
  const dur   = blinkInterval ? `${blinkInterval}s` : '8s';
  const KT_BL = '0;0.083;0.167;1';
  const LV_BL = `${L_SQNT};${L_OPEN};${L_SQNT};${L_SQNT}`;
  const RV_BL = `${R_SQNT};${R_OPEN};${R_SQNT};${R_SQNT}`;

  return (
    <svg
      viewBox="0 0 100 100"
      width={size}
      height={size}
      role="img"
      aria-label="MiraMark"
      fill="none"
      stroke="currentColor"
      strokeWidth="7"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d={L_SQNT}>
        {!noMotion && (blinkInterval ? (
          <animate attributeName="d"
            dur={dur} repeatCount="indefinite"
            keyTimes={KT_BL} values={LV_BL}
            calcMode="linear" />
        ) : (
          <animate attributeName="d"
            dur="8s" repeatCount="indefinite"
            keyTimes={KT_DEF} values={LV_DEF}
            calcMode="spline" keySplines={KS_DEF} />
        ))}
      </path>
      <path d={R_SQNT}>
        {!noMotion && (blinkInterval ? (
          <animate attributeName="d"
            dur={dur} repeatCount="indefinite"
            keyTimes={KT_BL} values={RV_BL}
            calcMode="linear" />
        ) : (
          <animate attributeName="d"
            dur="8s" repeatCount="indefinite"
            keyTimes={KT_DEF} values={RV_DEF}
            calcMode="spline" keySplines={KS_DEF} />
        ))}
      </path>
      <path d="M28,62 Q50,76 72,62" />
    </svg>
  );
}