import type { ISvgIcons } from "../type";

export function BuzzwareTechLockup({
  width = "253",
  height = "53",
  className,
  color: _color = "currentColor",
}: ISvgIcons) {
  return (
    <svg
      width={width}
      height={height}
      viewBox="0 0 650 160"
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid meet"
      className={className}
    >
      <defs>
        <filter id="logo-glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur
            stdDeviation="3"
            result="coloredBlur"
          ></feGaussianBlur>
          <feMerge>
            <feMergeNode in="coloredBlur"></feMergeNode>
            <feMergeNode in="SourceGraphic"></feMergeNode>
          </feMerge>
        </filter>
        <filter
          id="logo-strong-glow"
          x="-50%"
          y="-50%"
          width="200%"
          height="200%"
        >
          <feGaussianBlur
            stdDeviation="5"
            result="coloredBlur"
          ></feGaussianBlur>
          <feMerge>
            <feMergeNode in="coloredBlur"></feMergeNode>
            <feMergeNode in="coloredBlur"></feMergeNode>
            <feMergeNode in="SourceGraphic"></feMergeNode>
          </feMerge>
        </filter>
        <linearGradient
          id="text-gradient-light"
          x1="0%"
          y1="0%"
          x2="100%"
          y2="0%"
        >
          <stop offset="0%" stop-color="#000000"></stop>
          <stop offset="50%" stop-color="#1a1a1a"></stop>
          <stop offset="100%" stop-color="#dc2626"></stop>
        </linearGradient>
        <linearGradient
          id="lightning-gradient-light"
          x1="0%"
          y1="0%"
          x2="0%"
          y2="100%"
        >
          <stop offset="0%" stop-color="#dc2626"></stop>
          <stop offset="50%" stop-color="#b91c1c"></stop>
          <stop offset="100%" stop-color="#991b1b"></stop>
        </linearGradient>

        <clipPath id="revealClip">
          <rect x="0" y="0" width="0" height="160">
            <animate
              attributeName="width"
              from="0"
              to="660"
              dur="1.4s"
              begin="0s;reveal.end+1.2s"
              id="reveal"
              fill="freeze"
              calcMode="spline"
              keySplines="0.16 1 0.3 1"
              keyTimes="0;1"
              values="0;660"
            />
          </rect>
        </clipPath>
      </defs>

      <g clip-path="url(#revealClip)">
        <g className="logo-frame">
          <path
            d="M 50 50 L 70 35 L 100 35 L 120 50 L 100 65 L 70 65 Z"
            fill="none"
            stroke="#000000"
            stroke-opacity="0.1"
            stroke-width="1.5"
          ></path>
          <rect
            x="40"
            y="42"
            width="2"
            height="26"
            fill="#dc2626"
            opacity="0.4"
            rx="1"
          ></rect>
        </g>

        <g className="logo-monogram" filter="url(#logo-glow)">
          <path
            d="M 65 45 L 65 60 M 65 45 L 75 45 Q 80 45 80 50 Q 80 52.5 75 52.5 L 65 52.5 M 65 52.5 L 77 52.5 Q 82 52.5 82 56.5 Q 82 60 77 60 L 65 60"
            fill="none"
            stroke="#000000"
            stroke-width="3"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M 87 45 L 90 58 L 95 48 L 100 58 L 103 45"
            fill="none"
            stroke="#000000"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
        </g>

        <g className="logo-text" filter="url(#logo-glow)">
          <path
            d="M 140 35 L 140 110 M 140 35 L 175 35 Q 195 35 195 52 Q 195 65 180 67.5 Q 200 70 200 87.5 Q 200 110 175 110 L 140 110 M 157 35 L 157 67.5 L 175 67.5 Q 180 67.5 180 52 Q 180 48 175 48 L 157 48 M 157 80 L 175 80 Q 185 80 185 95 Q 185 97 175 97 L 157 97 L 157 80"
            fill="#000000"
            stroke="#000000"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M 215 55 L 215 85 Q 215 110 237.5 110 Q 260 110 260 85 L 260 55 M 232 85 L 232 110 M 245 55 L 245 85"
            fill="none"
            stroke="#000000"
            stroke-width="11"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M 275 55 L 318 55 L 275 95 L 318 95"
            fill="none"
            stroke="#000000"
            stroke-width="11"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M 328 55 L 371 55 L 328 95 L 371 95"
            fill="none"
            stroke="#000000"
            stroke-width="11"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M 385 55 L 397 105 L 415 65 L 433 105 L 445 55"
            fill="none"
            stroke="#000000"
            stroke-width="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M 460 80 Q 460 110 482.5 110 Q 505 110 505 85 L 505 55 M 488 55 L 488 60 M 488 72 L 488 85 Q 488 97 482.5 97 Q 477 97 477 85 L 477 80 M 477 67 Q 477 55 485 55 Q 488 55 488 60"
            fill="none"
            stroke="#000000"
            stroke-width="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M 520 55 L 520 110 M 520 67 Q 520 55 533 55 L 542 55"
            fill="none"
            stroke="#000000"
            stroke-width="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M 575 77 L 557 77 Q 557 55 570 55 Q 583 55 583 67 L 583 82.5 Q 583 110 562 110 Q 541 110 541 90 M 557 85 L 583 85"
            fill="none"
            stroke="#000000"
            stroke-width="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
        </g>

        <g transform="translate(390, 45)" filter="url(#logo-strong-glow)">
          <path
            d="M 18 0 L 5 28 L 13 28 L 0 55 L 22 22 L 14 22 L 26 0 Z"
            fill="url(#lightning-gradient-light)"
            opacity="0.3"
          ></path>
          <path
            d="M 16 2 L 6 26 L 12 26 L 2 50 L 20 24 L 14 24 L 22 2 Z"
            fill="url(#lightning-gradient-light)"
          ></path>
          <path
            d="M 15 8 L 10 22 L 12 22 L 8 38 L 17 26 L 14 26 L 18 8 Z"
            fill="#dc2626"
            opacity="0.6"
          ></path>
        </g>

        <text
          x="425"
          y="140"
          font-size="20"
          font-weight="800"
          fill="url(#text-gradient-light)"
          letter-spacing="8"
          font-family="Poppins, sans-serif"
          filter="url(#logo-glow)"
        >
          TECH
        </text>

        <g className="logo-particles" opacity="0.7">
          <circle
            cx="545"
            cy="30"
            r="6"
            fill="none"
            stroke="#dc2626"
            stroke-width="2"
          ></circle>
          <circle cx="545" cy="30" r="3" fill="#dc2626" opacity="0.3"></circle>
          <circle
            cx="568"
            cy="50"
            r="9"
            fill="none"
            stroke="#dc2626"
            stroke-width="2"
          ></circle>
          <circle
            cx="568"
            cy="50"
            r="4.5"
            fill="#dc2626"
            opacity="0.25"
          ></circle>
          <circle
            cx="555"
            cy="68"
            r="4"
            fill="none"
            stroke="#dc2626"
            stroke-width="2"
          ></circle>
          <circle cx="555" cy="68" r="2" fill="#dc2626" opacity="0.4"></circle>
          <circle
            cx="533"
            cy="42"
            r="2.5"
            fill="#dc2626"
            opacity="0.6"
          ></circle>
          <circle cx="580" cy="32" r="2" fill="#dc2626" opacity="0.7"></circle>
        </g>

        <g className="logo-connections" opacity="0.4">
          <path
            d="M 545 30 L 555 68"
            stroke="#dc2626"
            stroke-width="1"
            stroke-dasharray="2,3"
          ></path>
          <path
            d="M 568 50 L 580 32"
            stroke="#dc2626"
            stroke-width="1"
            stroke-dasharray="2,3"
          ></path>
          <path
            d="M 533 42 L 545 30"
            stroke="#dc2626"
            stroke-width="1"
            stroke-dasharray="2,3"
          ></path>
        </g>
      </g>
    </svg>
  );
}