"use client"

export function CrossedLightsabers() {
  return (
    <svg
      width="120"
      height="120"
      viewBox="0 0 200 200"
      className="pointer-events-none select-none overflow-visible shrink-0"
      style={{ overflow: "visible" }}
      aria-hidden="true"
    >
      <defs>
        <radialGradient id="purpleGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#a855f7" stopOpacity="0.6" />
          <stop offset="40%" stopColor="#a855f7" stopOpacity="0.25" />
          <stop offset="100%" stopColor="#a855f7" stopOpacity="0" />
        </radialGradient>
      </defs>

      <circle cx="100" cy="73" r="24" fill="url(#purpleGlow)" className="animate-pulse-intersection" />

      <g className="animate-pulse-red">
        <line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" opacity="0.12" className="stroke-[#dc2626] dark:stroke-[#ef4444] saber-outer" />
        <line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" opacity="0.25" className="stroke-[#dc2626] dark:stroke-[#ef4444] saber-mid" />
        <line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" className="stroke-[#f87171] dark:stroke-[#fca5a5] saber-core" />
      </g>

      <g className="animate-pulse-blue">
        <line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" opacity="0.12" className="stroke-[#1d4ed8] dark:stroke-[#3b82f6] saber-blue-outer" />
        <line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" opacity="0.25" className="stroke-[#1d4ed8] dark:stroke-[#3b82f6] saber-blue-mid" />
        <line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" className="stroke-[#60a5fa] dark:stroke-[#93c5fd] saber-blue-core" />
      </g>

      <rect x="30" y="145" width="10" height="55" rx="2" fill="#374151" />
      <rect x="160" y="145" width="10" height="55" rx="2" fill="#374151" />

      <rect x="30" y="155" width="10" height="5" fill="#1f2937" />
      <rect x="30" y="166" width="10" height="5" fill="#1f2937" />
      <rect x="30" y="177" width="10" height="5" fill="#1f2937" />
      <rect x="160" y="155" width="10" height="5" fill="#1f2937" />
      <rect x="160" y="166" width="10" height="5" fill="#1f2937" />
      <rect x="160" y="177" width="10" height="5" fill="#1f2937" />

      <rect x="32" y="143" width="6" height="4" rx="1" fill="#6b7280" />
      <rect x="162" y="143" width="6" height="4" rx="1" fill="#6b7280" />
    </svg>
  )
}