"use client";

import { motion } from "motion/react";

export const GlobeLight = () => {
  return (
    <motion.svg
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.8, delay: 0.3 }}
      width="1951"
      height="1806"
      viewBox="0 0 1951 1806"
      fill="none"
      overflow="visible"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M975.5 255C1402.88 255 1749 569.029 1749 956C1749 1342.97 1402.88 1657 975.5 1657C548.119 1657 202 1342.97 202 956C202 569.029 548.119 255 975.5 255Z"
        stroke="url(#paint0_linear_2693_2731)"
        strokeWidth="4"
      />
      <path
        opacity="0.4"
        d="M975.5 253.5C1403.57 253.5 1750.5 568.065 1750.5 956C1750.5 1343.93 1403.57 1658.5 975.5 1658.5C547.432 1658.5 200.5 1343.93 200.5 956C200.5 568.065 547.432 253.5 975.5 253.5Z"
        stroke="url(#paint1_linear_2693_2731)"
      />
      <g style={{ filter: "blur(12px)", mixBlendMode: "plus-lighter" }}>
        <path
          d="M975.5 255C1402.88 255 1749 569.029 1749 956C1749 1342.97 1402.88 1657 975.5 1657C548.119 1657 202 1342.97 202 956C202 569.029 548.119 255 975.5 255Z"
          stroke="url(#paint2_linear_2693_2731)"
          strokeWidth="4"
        />
      </g>
      <g
        opacity="0.4"
        style={{ filter: "blur(30px)", mixBlendMode: "plus-lighter" }}
      >
        <path
          d="M975.5 255C1398.3 255 1739 565.452 1739 946C1739 1326.55 1398.3 1637 975.5 1637C552.695 1637 212 1326.55 212 946C212 565.452 552.695 255 975.5 255Z"
          stroke="url(#paint3_linear_2693_2731)"
          strokeWidth="24"
        />
      </g>
      <g
        opacity="0.4"
        style={{ filter: "blur(30px)", mixBlendMode: "plus-lighter" }}
      >
        <path
          d="M975.5 255C1398.3 255 1739 565.452 1739 946C1739 1326.55 1398.3 1637 975.5 1637C552.695 1637 212 1326.55 212 946C212 565.452 552.695 255 975.5 255Z"
          stroke="url(#paint4_linear_2693_2731)"
          strokeWidth="24"
        />
      </g>
      <g
        opacity="0.4"
        style={{ filter: "blur(40px)", mixBlendMode: "plus-lighter" }}
      >
        <path
          d="M975.5 255C1398.3 255 1739 565.452 1739 946C1739 1326.55 1398.3 1637 975.5 1637C552.695 1637 212 1326.55 212 946C212 565.452 552.695 255 975.5 255Z"
          stroke="url(#paint5_linear_2693_2731)"
          strokeWidth="24"
        />
      </g>
      <g
        opacity="0.4"
        style={{ filter: "blur(50px)", mixBlendMode: "plus-lighter" }}
      >
        <path
          d="M975.5 255C1398.3 255 1739 565.452 1739 946C1739 1326.55 1398.3 1637 975.5 1637C552.695 1637 212 1326.55 212 946C212 565.452 552.695 255 975.5 255Z"
          stroke="url(#paint6_linear_2693_2731)"
          strokeWidth="24"
        />
      </g>
      <g
        opacity="0.4"
        style={{ filter: "blur(50px)", mixBlendMode: "plus-lighter" }}
      >
        <path
          d="M975.5 212C1398.3 212 1739 522.452 1739 903C1739 1283.55 1398.3 1594 975.5 1594C552.695 1594 212 1283.55 212 903C212 522.452 552.695 212 975.5 212Z"
          stroke="url(#paint7_linear_2693_2731)"
          strokeWidth="24"
        />
      </g>
      <g
        opacity="0.4"
        style={{ filter: "blur(100px)", mixBlendMode: "plus-lighter" }}
      >
        <path
          d="M975.5 212C1398.3 212 1739 522.452 1739 903C1739 1283.55 1398.3 1594 975.5 1594C552.695 1594 212 1283.55 212 903C212 522.452 552.695 212 975.5 212Z"
          stroke="url(#paint8_linear_2693_2731)"
          strokeWidth="24"
        />
      </g>
      <defs>
        <linearGradient
          id="paint0_linear_2693_2731"
          x1="976"
          y1="108.5"
          x2="976"
          y2="313.5"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FA9A63" />
          <stop offset="1" stopColor="#FA9A63" stopOpacity="0" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_2693_2731"
          x1="976"
          y1="108.5"
          x2="976"
          y2="582"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FA9A63" />
          <stop offset="1" stopColor="#FA9A63" stopOpacity="0" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_2693_2731"
          x1="975.5"
          y1="253"
          x2="976"
          y2="392"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FA9A63" />
          <stop offset="1" stopColor="#FA9A63" stopOpacity="0" />
        </linearGradient>
        <linearGradient
          id="paint3_linear_2693_2731"
          x1="975.5"
          y1="243"
          x2="976"
          y2="468.5"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FA9A63" />
          <stop offset="1" stopColor="#FA9A63" stopOpacity="0" />
        </linearGradient>
        <linearGradient
          id="paint4_linear_2693_2731"
          x1="975.5"
          y1="243"
          x2="976"
          y2="328.5"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FA9A63" />
          <stop offset="1" stopColor="#FA9A63" stopOpacity="0" />
        </linearGradient>
        <linearGradient
          id="paint5_linear_2693_2731"
          x1="975.5"
          y1="243"
          x2="976"
          y2="334"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#CDA63C" />
          <stop offset="1" stopColor="#CDA63C" stopOpacity="0" />
        </linearGradient>
        <linearGradient
          id="paint6_linear_2693_2731"
          x1="975.5"
          y1="243"
          x2="976"
          y2="361"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#CDA63C" />
          <stop offset="1" stopColor="#CDA63C" stopOpacity="0" />
        </linearGradient>
        <linearGradient
          id="paint7_linear_2693_2731"
          x1="975.5"
          y1="200"
          x2="976"
          y2="336.5"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#CDA63C" />
          <stop offset="1" stopColor="#CDA63C" stopOpacity="0" />
        </linearGradient>
        <linearGradient
          id="paint8_linear_2693_2731"
          x1="975.5"
          y1="200"
          x2="976"
          y2="780.5"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="white" />
          <stop offset="1" stopColor="white" stopOpacity="0" />
        </linearGradient>
      </defs>
    </motion.svg>
  );
};