export default function LogoHorizontal({
  height = 44,
  className = "",
}: {
  height?: number;
  className?: string;
}) {
  const width = height * 4.85;

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 214 58"
      width={width}
      height={height}
      className={className}
      aria-label="TimeToLeave"
      role="img"
    >
      <defs>
        <linearGradient id="ttl-header-gradient" x1="280" y1="210" x2="900" y2="720" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#8B5CF6" />
          <stop offset="42%" stopColor="#B23CFF" />
          <stop offset="72%" stopColor="#D946EF" />
          <stop offset="100%" stopColor="#FF2D8D" />
        </linearGradient>
        <linearGradient id="ttl-header-text-gradient" x1="116" y1="17" x2="155" y2="43" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#B23CFF" />
          <stop offset="100%" stopColor="#FF2D8D" />
        </linearGradient>
        <filter id="ttl-header-glow" x="-35%" y="-35%" width="170%" height="170%">
          <feGaussianBlur stdDeviation="1.6" result="blur" />
          <feColorMatrix
            in="blur"
            type="matrix"
            values="0.72 0 0 0 0.26 0 0.18 0 0 0.92 0 0 0.34 0 1 0 0 0 0.32 0"
            result="glow"
          />
          <feMerge>
            <feMergeNode in="glow" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      <g filter="url(#ttl-header-glow)" transform="matrix(0.108 0 0 0.108 -31.6 -27.7)">
        <path
          d="M334 552 C324 498 335 437 370 388 C415 324 486 290 562 293 C660 297 744 372 758 471 C763 508 758 541 753 565 C748 589 756 610 779 622 C808 637 810 594 832 590 C855 586 860 620 851 644 C842 669 824 682 803 678"
          fill="none"
          stroke="url(#ttl-header-gradient)"
          strokeWidth="42"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M334 552 C322 588 331 622 365 628 C395 633 386 581 415 580 C447 579 441 641 475 641 C510 641 506 585 544 585 C579 585 571 651 604 670 C650 697 733 695 797 657"
          fill="none"
          stroke="url(#ttl-header-gradient)"
          strokeWidth="42"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M475 641 C472 690 474 724 489 724 C506 724 506 690 509 651"
          fill="none"
          stroke="url(#ttl-header-gradient)"
          strokeWidth="42"
          strokeLinecap="round"
        />
        <path
          d="M797 657 C830 639 862 624 898 615"
          fill="none"
          stroke="url(#ttl-header-gradient)"
          strokeWidth="42"
          strokeLinecap="round"
        />
        <path d="M882 572 L1010 620 L904 708 L917 650 Z" fill="#FF2D8D" />
        <ellipse cx="505" cy="725" rx="17" ry="26" fill="#B23CFF" />

        <g stroke="currentColor" strokeLinecap="round" opacity="0.96">
          <line x1="556" y1="334" x2="556" y2="360" strokeWidth="15" />
          <line x1="694" y1="391" x2="716" y2="378" strokeWidth="15" />
          <line x1="733" y1="526" x2="762" y2="526" strokeWidth="15" />
          <line x1="405" y1="655" x2="425" y2="633" strokeWidth="15" />
          <line x1="362" y1="526" x2="390" y2="526" strokeWidth="15" />
          <line x1="405" y1="398" x2="425" y2="420" strokeWidth="15" />
          <line x1="658" y1="420" x2="671" y2="398" strokeWidth="15" />
          <line x1="556" y1="526" x2="556" y2="405" strokeWidth="19" />
          <line x1="556" y1="526" x2="665" y2="590" strokeWidth="19" />
        </g>
        <circle cx="556" cy="526" r="25" fill="currentColor" />
      </g>

      <g fontFamily="Inter, Poppins, Montserrat, Avenir Next, Arial, sans-serif" fontSize="26" fontWeight="800">
        <text x="83" y="37" fill="currentColor">
          Time
        </text>
        <text x="139" y="37" fill="url(#ttl-header-text-gradient)">
          To
        </text>
        <text x="166" y="37" fill="currentColor">
          Leave
        </text>
      </g>
    </svg>
  );
}