export default function LogoMark({ className = "" }) {
  return (
    <svg
      className={className}
      viewBox="0 0 64 64"
      role="img"
      aria-label="FrameVis logo"
    >
      <defs>
        <linearGradient id="fv-gold" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="var(--accent)" />
          <stop offset="100%" stopColor="var(--accent-soft)" />
        </linearGradient>
      </defs>

      <rect
        x="5"
        y="5"
        width="54"
        height="54"
        rx="9"
        fill="rgba(200, 169, 110, 0.04)"
        stroke="rgba(200, 169, 110, 0.28)"
      />

      {/* "Frame" corners to convey perspective/framing */}
      <path
        d="M14 22V14H22M42 14H50V22M50 42V50H42M22 50H14V42"
        stroke="url(#fv-gold)"
        strokeWidth="2.5"
        strokeLinecap="round"
        fill="none"
      />

      {/* Globe to represent worldwide coverage */}
      <circle
        cx="32"
        cy="32"
        r="14"
        fill="none"
        stroke="url(#fv-gold)"
        strokeWidth="2.2"
      />
      <path
        d="M18 32H46M32 18V46"
        fill="none"
        stroke="url(#fv-gold)"
        strokeWidth="1.7"
        strokeLinecap="round"
      />
      <path
        d="M23 21.5C27 25 27 39 23 42.5M41 21.5C37 25 37 39 41 42.5"
        fill="none"
        stroke="url(#fv-gold)"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
}