// brandmark.jsx
// Retrace mark — a coral disc with the "R" / return-arrow carved out via a mask.
// The mask paints the disc white (visible) and the glyph black (cut away), so the
// coral shows only where the mask is white. Coral resolves from --coral at paint.

function RetraceBrandmark({ size = 50, className = '' }) {
  return (
    <svg
      className={className}
      width={size}
      height={size}
      viewBox="0 0 1024 1024"
      role="img"
      aria-label="Retrace by Sauvrn AI"
      style={{
        display: 'block',
        filter: 'drop-shadow(0 6px 20px color-mix(in srgb, var(--coral) 22%, transparent))',
      }}
    >
      <defs>
        <mask id="rc-logo" maskUnits="userSpaceOnUse" x="0" y="0" width="1024" height="1024">
          <rect width="1024" height="1024" fill="white" />
          <g fill="black">
            {/* Rounded "R" bowl */}
            <path fillRule="evenodd" clipRule="evenodd" d="M 365 201 H 590 C 690 201 770 283 770 384 C 770 485 690 567 590 567 H 316 V 250 C 316 223 338 201 365 201 Z M 413 298 V 470 H 590 C 636 470 673 432 673 384 C 673 336 636 298 590 298 Z M 316 443 H 413 V 470 H 316 Z" />
            {/* Left-facing return arrow */}
            <path d="M 289 433 L 145 517 L 289 600 V 567 H 421 V 470 H 289 Z" />
            {/* Vertical leg */}
            <rect x="316" y="594" width="97" height="175" />
            {/* Diagonal leg */}
            <path d="M 429 594 H 602 L 804 730 L 749 811 Z" />
          </g>
        </mask>
      </defs>
      <g style={{ fill: 'var(--coral)' }} mask="url(#rc-logo)">
        <circle cx="512" cy="512" r="512" />
      </g>
    </svg>
  );
}

Object.assign(window, { RetraceBrandmark });