/** 編年史羅盤裝飾圖（HD-2D 像素風，取代 emoji） */

export default function CompassArt({ className }: { className?: string }) {
  return (
    <div className={"compass-art" + (className ? " " + className : "")} aria-hidden>
      <svg viewBox="0 0 120 120" className="compass-art-svg">
        <defs>
          <radialGradient id="compassGlow" cx="50%" cy="45%" r="55%">
            <stop offset="0%" stopColor="rgba(231,198,107,.35)" />
            <stop offset="100%" stopColor="rgba(10,13,24,0)" />
          </radialGradient>
        </defs>
        <circle cx="60" cy="60" r="56" fill="url(#compassGlow)" />
        <rect x="8" y="8" width="104" height="104" fill="#12172e" stroke="#e7c66b" strokeWidth="3" rx="4" />
        <rect x="14" y="14" width="92" height="92" fill="#0a0d18" stroke="rgba(231,198,107,.35)" strokeWidth="2" />
        {/* 刻度 */}
        {[0, 45, 90, 135, 180, 225, 270, 315].map((deg) => (
          <line
            key={deg}
            x1="60"
            y1="18"
            x2="60"
            y2="26"
            stroke="rgba(231,198,107,.5)"
            strokeWidth="2"
            transform={`rotate(${deg} 60 60)`}
          />
        ))}
        {/* 指針 */}
        <polygon points="60,24 66,58 60,52 54,58" fill="#f3dd96" stroke="#b9912f" strokeWidth="1" />
        <polygon points="60,96 66,62 60,68 54,62" fill="#6fe0d0" stroke="#3a9e92" strokeWidth="1" />
        <polygon points="24,60 58,54 52,60 58,66" fill="#8fb8ff" stroke="#5a7ec4" strokeWidth="1" />
        <polygon points="96,60 62,66 68,60 62,54" fill="#e86a52" stroke="#b84a38" strokeWidth="1" />
        <circle cx="60" cy="60" r="9" fill="#161b34" stroke="#e7c66b" strokeWidth="2.5" />
        <circle cx="60" cy="60" r="3" fill="#e7c66b" />
        {/* 方位字 */}
        <text x="60" y="20" textAnchor="middle" fill="#e7c66b" fontSize="9" fontFamily="Pixelify Sans, monospace">
          N
        </text>
        <text x="60" y="112" textAnchor="middle" fill="#6fe0d0" fontSize="8" fontFamily="Pixelify Sans, monospace">
          S
        </text>
        <text x="14" y="63" textAnchor="middle" fill="#8fb8ff" fontSize="8" fontFamily="Pixelify Sans, monospace">
          W
        </text>
        <text x="106" y="63" textAnchor="middle" fill="#e86a52" fontSize="8" fontFamily="Pixelify Sans, monospace">
          E
        </text>
      </svg>
    </div>
  );
}