/* ── Reeve wordmark ──────────────────────────────────────────────────
   Inline SVG of the "reeve" prompt wordmark from /reeve-web/, with the
   cursor block recoloured from the brand blue (#2A4CDB) to the gantry's
   forest-green accent. The blink animation is preserved as SMIL.
   Function name kept as `ReeveWordmark` so existing references in Nav,
   Footer and Compare drop in unchanged.
─────────────────────────────────────────────────────────────────── */

function ReeveWordmark({ size = 22, dark = false, still = false }) {
  const textColor   = dark ? 'var(--paper)' : 'var(--ink)';
  const cursorColor = dark ? 'oklch(72% 0.13 160)' : 'var(--accent)';

  return (
    <span
      className={'reeve-wm' + (dark ? ' dark' : '')}
      style={{ display: 'inline-flex', alignItems: 'center', height: size, lineHeight: 0 }}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="-16 -75.782 323.316 98"
        role="img"
        aria-label="reeve"
        style={{ height: size, width: 'auto', display: 'block' }}
      >
        <text
          x="0"
          y="0"
          fontFamily="'Inter Tight', 'Inter', sans-serif"
          fontWeight="600"
          fontSize="100"
          letterSpacing="-4.5"
          fill={textColor}
        >
          reeve
        </text>
        <rect
          x="251.316"
          y="-59.782"
          width="40"
          height="66"
          fill={cursorColor}
        >
          {!still && (
            <animate
              attributeName="opacity"
              values="1;1;0;0;1"
              keyTimes="0;0.45;0.5;0.95;1"
              dur="1.1s"
              repeatCount="indefinite"
            />
          )}
        </rect>
      </svg>
    </span>
  );
}

/* Back-compat shims — anywhere the old API was used. The standalone
   "mark" is now just a small accent dot at the requested size. */
function ReeveMark({ size = 18, dark = false }) {
  return (
    <span
      style={{
        display: 'inline-block',
        width: Math.round(size * 0.5),
        height: Math.round(size * 0.66),
        background: dark ? 'oklch(72% 0.13 160)' : 'var(--accent)',
        verticalAlign: 'middle',
      }}
    />
  );
}

function GaitLine() {
  return (
    <span className="gait-line" aria-hidden="true" style={{ display: 'inline-block', width: 22, height: 8 }}>
      <svg viewBox="0 0 22 8" style={{ width: '100%', height: '100%', overflow: 'visible' }}>
        <g stroke="currentColor" strokeWidth="1" strokeLinecap="round" fill="none">
          <path d="M1 6 L7 3 L11 5 L20 1" opacity="0.9" />
        </g>
        <circle cx="20" cy="1" r="1.2" fill="var(--accent)" />
      </svg>
    </span>
  );
}

window.ReeveWordmark = ReeveWordmark;
window.ReeveMark = ReeveMark;
window.GaitLine = GaitLine;