// QRJam brand mark — Vinyl Q (Neon edition).
// One source of truth used in the topbar, the loading flipper, favicons,
// and exported app icons. Scales cleanly from 16px → 1024px because it's
// all relative-unit SVG.

function VinylQLogo({ size = 32, withBackground = true, rounded = 0.225 }) {
  const cx = size / 2, cy = size / 2;
  const R = size * 0.42;
  const r = size * rounded;
  // Suffix every defs id with a unique token so multiple instances on one
  // page don't collide on their filter / gradient ids.
  const uid = React.useId();
  const id = `vq-${uid.replace(/[:]/g, "")}-${size}`;

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-label="QRJam">
      <defs>
        <radialGradient id={`${id}-bg`} cx="50%" cy="50%" r="75%">
          <stop offset="0%" stopColor="#181030" />
          <stop offset="100%" stopColor="#0b0716" />
        </radialGradient>
        <radialGradient id={`${id}-vinyl`} cx="35%" cy="30%" r="75%">
          <stop offset="0%" stopColor="#1a1322" />
          <stop offset="100%" stopColor="#020108" />
        </radialGradient>
        <filter id={`${id}-glow`} x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation={size * 0.012} />
        </filter>
      </defs>

      {withBackground && (
        <rect x="0" y="0" width={size} height={size}
              fill={`url(#${id}-bg)`} rx={r} />
      )}

      {/* glow halo behind disc */}
      <circle cx={cx} cy={cy} r={R + size * 0.03}
              fill="#ff2bd1" opacity=".22" filter={`url(#${id}-glow)`} />

      {/* black vinyl disc */}
      <circle cx={cx} cy={cy} r={R} fill={`url(#${id}-vinyl)`} />

      {/* subtle cyan-tinted grooves */}
      {[0.40, 0.37, 0.34, 0.31, 0.28].map((g, i) => (
        <circle key={i} cx={cx} cy={cy} r={size * g} fill="none"
                stroke="#00ffe5" strokeWidth={size * 0.0045}
                opacity={0.18 - i * 0.018}/>
      ))}

      {/* hot-pink label */}
      <circle cx={cx} cy={cy} r={size * 0.23} fill="#ff2bd1" />
      <circle cx={cx} cy={cy} r={size * 0.22} fill="none"
              stroke="#fff" strokeWidth={size * 0.003} opacity=".25" />

      {/* tiny QR finder pattern in label center */}
      <rect x={cx - size * 0.085} y={cy - size * 0.085}
            width={size * 0.17} height={size * 0.17}
            fill="#fff" rx={size * 0.02} />
      <rect x={cx - size * 0.06} y={cy - size * 0.06}
            width={size * 0.12} height={size * 0.12}
            fill="#ff2bd1" rx={size * 0.012} />
      <rect x={cx - size * 0.035} y={cy - size * 0.035}
            width={size * 0.07} height={size * 0.07}
            fill="#fff" />

      {/* glowing cyan Q tail */}
      <g filter={`url(#${id}-glow)`}>
        <rect x={cx + size * 0.18} y={cy + size * 0.18}
              width={size * 0.045} height={size * 0.24}
              fill="#00ffe5" opacity=".7"
              transform={`rotate(-45 ${cx + size * 0.2} ${cy + size * 0.3})`} />
      </g>
      <rect x={cx + size * 0.18} y={cy + size * 0.18}
            width={size * 0.04} height={size * 0.22}
            fill="#00ffe5"
            transform={`rotate(-45 ${cx + size * 0.2} ${cy + size * 0.29})`} />
    </svg>
  );
}

window.VinylQLogo = VinylQLogo;