// Vault logo — stylized V built from a vault-door ring + keyhole core
// Two sizes via a "size" prop. Uses gradient ids suffixed with instance id to avoid collisions.

function VaultLogo({ size = 160, animated = false, idSuffix = 'a' }) {
  const s = size;
  const gid = `vg-${idSuffix}`;
  const gcore = `vc-${idSuffix}`;
  const gring = `vr-${idSuffix}`;
  const gshine = `vs-${idSuffix}`;
  const gbg = `vb-${idSuffix}`;
  const gv = `vv-${idSuffix}`;

  return (
    <svg width={s} height={s} viewBox="0 0 200 200" style={{ overflow: 'visible' }}>
      <defs>
        {/* Outer rounded-square plate */}
        <linearGradient id={gbg} x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="#2a1b5c" />
          <stop offset="0.55" stopColor="#4a2aa8" />
          <stop offset="1" stopColor="#1a0f3d" />
        </linearGradient>
        {/* Ring gradient */}
        <linearGradient id={gring} x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="#e9d7ff" />
          <stop offset="0.5" stopColor="#a378ff" />
          <stop offset="1" stopColor="#5b2fd1" />
        </linearGradient>
        {/* V gradient */}
        <linearGradient id={gv} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#f3e8ff" />
          <stop offset="0.5" stopColor="#c8a6ff" />
          <stop offset="1" stopColor="#7a44ee" />
        </linearGradient>
        {/* Core glow */}
        <radialGradient id={gcore} cx="50%" cy="50%" r="50%">
          <stop offset="0" stopColor="#ffffff" />
          <stop offset="0.35" stopColor="#d8b8ff" />
          <stop offset="0.75" stopColor="#7e3ff2" stopOpacity="0.8" />
          <stop offset="1" stopColor="#7e3ff2" stopOpacity="0" />
        </radialGradient>
        {/* Top sheen */}
        <linearGradient id={gshine} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#ffffff" stopOpacity="0.45" />
          <stop offset="0.6" stopColor="#ffffff" stopOpacity="0" />
        </linearGradient>
        <filter id={`${gid}-blur`} x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="6" />
        </filter>
      </defs>

      {/* outer plate with subtle squircle */}
      <rect x="10" y="10" width="180" height="180" rx="44" fill={`url(#${gbg})`} />
      {/* plate top sheen */}
      <rect x="10" y="10" width="180" height="90" rx="44" fill={`url(#${gshine})`} opacity="0.8" />
      {/* plate inner stroke */}
      <rect x="10.5" y="10.5" width="179" height="179" rx="43.5" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1" />

      {/* outer vault door ring */}
      <circle cx="100" cy="100" r="70" fill="none" stroke={`url(#${gring})`} strokeWidth="3" opacity="0.55" />
      {/* tick marks around ring (vault-dial) */}
      <g stroke="#d8b8ff" strokeWidth="2" strokeLinecap="round" opacity="0.75">
        {Array.from({ length: 12 }).map((_, i) => {
          const a = (i * 30) * Math.PI / 180;
          const x1 = 100 + Math.cos(a) * 64;
          const y1 = 100 + Math.sin(a) * 64;
          const x2 = 100 + Math.cos(a) * 70;
          const y2 = 100 + Math.sin(a) * 70;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} />;
        })}
      </g>

      {/* glow behind core */}
      <circle cx="100" cy="100" r="46" fill={`url(#${gcore})`} opacity="0.95" filter={`url(#${gid}-blur)`} />

      {/* the V — built from two thick strokes meeting at a point, with a keyhole cutout at top */}
      <g>
        {/* V shape: wide at top, point at bottom */}
        <path
          d="M 62 58 L 100 140 L 138 58"
          fill="none"
          stroke={`url(#${gv})`}
          strokeWidth="18"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        {/* V inner highlight */}
        <path
          d="M 66 60 L 100 134 L 134 60"
          fill="none"
          stroke="#ffffff"
          strokeOpacity="0.45"
          strokeWidth="4"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>

      {/* keyhole inside the V */}
      <g transform="translate(100 92)">
        <circle r="8" fill="#1a0f3d" />
        <circle r="8" fill="none" stroke="#e9d7ff" strokeWidth="1.4" />
        <rect x="-2" y="4" width="4" height="10" rx="1.5" fill="#1a0f3d" stroke="#e9d7ff" strokeWidth="1" />
        {/* keyhole inner spark */}
        <circle r="2" fill="#ffffff" opacity="0.9" />
      </g>

      {/* corner accents (vault bolts) */}
      <g fill="#d8b8ff" opacity="0.55">
        <circle cx="32" cy="32" r="2.5" />
        <circle cx="168" cy="32" r="2.5" />
        <circle cx="32" cy="168" r="2.5" />
        <circle cx="168" cy="168" r="2.5" />
      </g>

      {animated && (
        <g>
          <circle cx="100" cy="100" r="78" fill="none" stroke="#c8a6ff" strokeWidth="1" strokeOpacity="0.3" strokeDasharray="4 6">
            <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" repeatCount="indefinite" />
          </circle>
        </g>
      )}
    </svg>
  );
}

window.VaultLogo = VaultLogo;