export const RMSLogo = ({ className = "" }: { className?: string }) => (
  <div
    className={`flex flex-col items-center justify-center select-none shrink-0 ${className}`}
    aria-label="RMS Logo"
  >
    <div className="flex items-center">
      <div className="relative w-12 h-10 flex items-end justify-between mr-1">
        {/* Bars */}
        <div className="w-[10px] h-[40%] bg-[#2596be] rounded-full shadow-sm" />
        <div className="w-[10px] h-[60%] bg-[#2596be] rounded-full shadow-sm" />
        <div className="w-[10px] h-[80%] bg-[#6b478d] rounded-full shadow-sm" />
        {/* Arrow */}
        <div className="absolute inset-0 top-[-5px] right-[-15px] pointer-events-none">
          <svg
            viewBox="0 0 100 100"
            className="w-full h-full overflow-visible drop-shadow-sm"
          >
            {/* Arrow Path */}
            <path
              d="M -10 75 Q 40 60 90 10"
              stroke="#a25da6"
              strokeWidth="12"
              fill="none"
              strokeLinecap="round"
            />
            {/* Arrow Head */}
            <polygon points="65,5 105,0 95,35" fill="#a25da6" />
          </svg>
        </div>
      </div>
      <div className="flex flex-col justify-center">
        <div
          className="flex items-baseline font-black leading-none tracking-tighter"
          style={{ fontSize: "2.5rem" }}
        >
          <span className="text-[#e21b22] drop-shadow-sm z-10">R</span>
          <span
            className="text-[#2596be] drop-shadow-sm z-10"
            style={{ marginLeft: "-2px" }}
          >
            M
          </span>
          <span
            className="text-[#e21b22] drop-shadow-sm z-10"
            style={{ marginLeft: "-2px" }}
          >
            S
          </span>
        </div>
      </div>
    </div>
    <div
      className="font-sans font-bold text-[#e1e1e1] tracking-[0.16em] mt-1 pr-1 text-center"
      style={{ fontSize: "0.45rem" }}
    >
      RESULTS MAKER SYSTEM
    </div>
  </div>
);