export function AnimatedArt() {
  return (
    <div className="absolute inset-0 overflow-hidden bg-[hsl(222_47%_9%)]">
      <div className="absolute inset-0 art-gradient" aria-hidden />

      <div className="absolute -top-24 -left-24 w-[420px] h-[420px] rounded-full art-orb art-orb-a" aria-hidden />
      <div className="absolute top-1/3 -right-32 w-[480px] h-[480px] rounded-full art-orb art-orb-b" aria-hidden />
      <div className="absolute -bottom-32 left-1/4 w-[420px] h-[420px] rounded-full art-orb art-orb-c" aria-hidden />

      <svg
        className="absolute inset-0 w-full h-full"
        viewBox="0 0 800 1000"
        preserveAspectRatio="none"
        aria-hidden
      >
        <defs>
          <linearGradient id="line-a" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="hsl(217 91% 60%)" stopOpacity="0" />
            <stop offset="50%" stopColor="hsl(217 91% 60%)" stopOpacity="0.9" />
            <stop offset="100%" stopColor="hsl(262 83% 70%)" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="line-b" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="hsl(172 70% 55%)" stopOpacity="0" />
            <stop offset="50%" stopColor="hsl(172 70% 55%)" stopOpacity="0.9" />
            <stop offset="100%" stopColor="hsl(217 91% 60%)" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="line-c" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="hsl(262 83% 70%)" stopOpacity="0" />
            <stop offset="50%" stopColor="hsl(262 83% 70%)" stopOpacity="0.85" />
            <stop offset="100%" stopColor="hsl(172 70% 55%)" stopOpacity="0" />
          </linearGradient>
        </defs>

        <path
          d="M -50 200 Q 200 100 400 250 T 850 200"
          stroke="url(#line-a)"
          strokeWidth="1.5"
          fill="none"
          className="art-line art-line-1"
        />
        <path
          d="M -50 400 Q 250 320 450 480 T 850 420"
          stroke="url(#line-b)"
          strokeWidth="1.5"
          fill="none"
          className="art-line art-line-2"
        />
        <path
          d="M -50 600 Q 200 520 400 680 T 850 620"
          stroke="url(#line-c)"
          strokeWidth="1.5"
          fill="none"
          className="art-line art-line-3"
        />
        <path
          d="M -50 800 Q 250 720 450 880 T 850 820"
          stroke="url(#line-a)"
          strokeWidth="1.5"
          fill="none"
          className="art-line art-line-4"
        />
        <path
          d="M -50 100 Q 300 50 500 150 T 850 80"
          stroke="url(#line-b)"
          strokeWidth="1"
          fill="none"
          className="art-line art-line-5"
        />
      </svg>

      <div className="absolute inset-0 art-particles" aria-hidden>
        <span className="art-particle" style={{ left: "12%", top: "18%", animationDelay: "0s" }} />
        <span className="art-particle" style={{ left: "78%", top: "32%", animationDelay: "1.4s" }} />
        <span className="art-particle" style={{ left: "34%", top: "62%", animationDelay: "2.6s" }} />
        <span className="art-particle" style={{ left: "62%", top: "78%", animationDelay: "0.8s" }} />
        <span className="art-particle" style={{ left: "22%", top: "88%", animationDelay: "3.2s" }} />
        <span className="art-particle" style={{ left: "86%", top: "12%", animationDelay: "4s" }} />
      </div>
    </div>
  );
}
