import {
  // Github,
  Medium,
  Notion,
  Reddit,
  Twitter,
} from "@repo/ui/components/icons";
import Image from "next/image";
const Github = ({ className }: { className?: string }) => {
  return (
    <svg
      fill="#ffffff"
      className={className}
      version="1.1"
      id="svg2"
      xmlns="http://www.w3.org/2000/svg"
      x="0"
      y="0"
      viewBox="0 0 2500 676.1"
      xmlSpace="preserve"
    >
      <g id="layer1" transform="translate(-85.59 -376.905)">
        <g id="g3012" transform="matrix(1.25 0 0 -1.25 85.59 539.248)">
          <g id="g3014" transform="scale(.1)">
            <g id="g3016">
              <g id="g3018">
                <path
                  id="path3024"
                  className="st0"
                  d="M3852.1-1016.2H2171.4c-43.4 0-78.5-35.2-78.5-78.6v-821.7c0-43.4 35.2-78.7 78.5-78.7H2827V-3016s-147.2-50.2-554.2-50.2c-480.2 0-1150.9 175.5-1150.9 1650.5 0 1475.3 698.5 1669.4 1354.2 1669.4 567.6 0 812.2-99.9 967.8-148.1 48.9-15 94.1 33.7 94.1 77.1l187.5 793.9c0 20.3-6.9 44.7-30 61.3-63.2 45.1-448.7 260.8-1422.6 260.8C1150.9 1298.8 0 821.4 0-1473.3S1317.6-4110 2428-4110c919.4 0 1477.1 392.9 1477.1 392.9 23 12.7 25.5 44.8 25.5 59.6v2562.7c0 43.4-35.2 78.6-78.5 78.6"
                />
                <path
                  id="path3026"
                  className="st0"
                  d="M12513.4 1023.8c0 43.7-34.6 79-78 79h-946.3c-43.2 0-78.4-35.3-78.4-79l.3-1828.8H9936v1828.8c0 43.7-34.8 79-78.1 79h-946.3c-43.1 0-78.2-35.3-78.2-79V-3928c0-43.7 35.1-79.2 78.2-79.2h946.3c43.3 0 78.1 35.6 78.1 79.2v2118h1475l-2.6-2118c0-43.7 35.1-79.2 78.4-79.2h948.6c43.4 0 78 35.6 78.1 79.2v4951.8"
                />
                <path
                  id="path3028"
                  className="st0"
                  d="M5637.8 374c0 340.7-273.2 616.1-610.2 616.1-336.7 0-610.1-275.4-610.1-616.1 0-340.4 273.4-616.5 610.1-616.5 337 0 610.2 276.1 610.2 616.5"
                />
                <path
                  id="path3030"
                  className="st0"
                  d="M5570.1-2883.4v2285.8c0 43.4-35 78.9-78.3 78.9h-943.3c-43.3 0-82-44.6-82-88v-3274.8c0-96.3 60-124.9 137.6-124.9H5454c93.2 0 116.1 45.8 116.1 126.4v996.6"
                />
                <path
                  id="path3032"
                  className="st0"
                  d="M16109.8-526.2h-939.1c-43.1 0-78.1-35.5-78.1-79.2v-2428s-238.5-174.5-577.2-174.5c-338.6 0-428.4 153.6-428.4 485.2v2117.4c0 43.7-35 79.2-78.1 79.2h-953.1c-43 0-78.3-35.5-78.3-79.2V-2883c0-984.8 548.8-1225.7 1303.9-1225.7 619.4 0 1118.8 342.2 1118.8 342.2s23.8-180.3 34.5-201.7c10.8-21.3 38.8-42.9 69.1-42.9l606.3 2.7c43 0 78.3 35.6 78.3 79l-.3 3324.1c.1 43.6-35 79.1-78.3 79.1"
                />
                <path
                  id="path3034"
                  className="st0"
                  d="M18306-3205c-325.7 9.9-546.6 157.7-546.6 157.7v1568.1s218 133.6 485.4 157.5c338.2 30.3 664-71.9 664-878.5-.1-850.6-147.1-1018.5-602.8-1004.8zm370.4 2790c-533.4 0-896.1-238-896.1-238v1676.8c0 43.7-34.9 79-78.1 79h-949c-43.1 0-78.2-35.3-78.2-79V-3928c0-43.7 35.1-79.2 78.3-79.2h658.4c29.7 0 52.1 15.3 68.7 42.1 16.4 26.6 40 228.3 40 228.3s388.1-367.7 1122.6-367.7c862.4 0 1357 437.5 1357 1963.8 0 1526.2-789.9 1725.7-1323.6 1725.7"
                />
                <path
                  id="path3036"
                  className="st0"
                  d="M8289.9-518.3H7580l-1.1 937.8c0 35.5-18.3 53.2-59.3 53.2h-967.3c-37.6 0-57.8-16.5-57.8-52.7v-969.1s-484.8-117-517.5-126.5c-32.6-9.5-56.7-39.6-56.7-75.5v-609c0-43.8 35-79.1 78.3-79.1h496v-1465c0-1088.2 763.3-1195.1 1278.4-1195.1 235.3 0 516.9 75.6 563.3 92.8 28.1 10.3 44.4 39.4 44.4 71l.8 669.9c0 43.7-36.9 79-78.5 79-41.4 0-147.2-16.8-256.1-16.8-348.7 0-466.8 162.1-466.8 372v1392.2H8290c43.3 0 78.3 35.3 78.3 79.1v762.8c-.1 43.8-35.2 79-78.4 79"
                />
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>
  );
};
const NotionText = ({ className }: { className?: string }) => {
  return (
    <svg
      className={className}
      version="1.0"
      fill="#ffffff"
      id="katman_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      viewBox="0 0 600 400"
      xmlSpace="preserve"
    >
      <style type="text/css"></style>
      <path
        d="M283.2,228.4v-39.7h0.7l28.6,39.7h9v-58.3h-10v39.6h-0.7l-28.6-39.6h-9v58.3L283.2,228.4L283.2,228.4z M349.8,229.3
	c13.2,0,21.3-8.6,21.3-23c0-14.3-8.1-23-21.3-23c-13.1,0-21.3,8.7-21.3,23C328.6,220.7,336.6,229.3,349.8,229.3z M349.8,220.9
	c-7,0-11-5.3-11-14.6c0-9.2,4-14.6,11-14.6c7,0,11,5.4,11,14.6C360.8,215.6,356.8,220.9,349.8,220.9z M380.2,173.4v11.1h-7v8h7v24.1
	c0,8.6,4,12,14.2,12c1.9,0,3.8-0.2,5.3-0.5v-7.8c-1.2,0.1-2,0.2-3.4,0.2c-4.2,0-6.1-1.9-6.1-6.3v-21.7h9.5v-8h-9.5v-11.1
	L380.2,173.4L380.2,173.4z M405.7,228.4h10v-44.2h-10V228.4z M410.7,176.9c3.3,0,6-2.7,6-6c0-3.4-2.7-6.1-6-6.1c-3.3,0-6,2.7-6,6.1
	C404.7,174.2,407.4,176.9,410.7,176.9L410.7,176.9z M443.1,229.3c13.2,0,21.3-8.6,21.3-23c0-14.3-8.1-23-21.3-23
	c-13.1,0-21.3,8.7-21.3,23C421.8,220.7,429.8,229.3,443.1,229.3z M443.1,220.9c-7,0-11-5.3-11-14.6c0-9.2,4-14.6,11-14.6
	c6.9,0,11,5.4,11,14.6C454,215.6,450,220.9,443.1,220.9z M470.3,228.4h10v-25.7c0-6.5,3.8-10.6,9.7-10.6c6.1,0,8.9,3.4,8.9,10.1
	v26.2h10v-28.6c0-10.6-5.4-16.5-15.2-16.5c-6.6,0-11,3-13.1,8h-0.7v-7.1h-9.7C470.3,184.2,470.3,228.4,470.3,228.4z"
      />
      <g>
        <path
          className="st0"
          d="M120,152.1c4.7,3.8,6.4,3.5,15.2,2.9l82.9-5c1.8,0,0.3-1.8-0.3-2l-13.8-9.9c-2.6-2-6.2-4.4-12.9-3.8l-80.2,5.9
		c-2.9,0.3-3.5,1.8-2.3,2.9L120,152.1z M125,171.4v87.2c0,4.7,2.3,6.4,7.6,6.1l91.1-5.3c5.3-0.3,5.9-3.5,5.9-7.3v-86.6
		c0-3.8-1.5-5.9-4.7-5.6l-95.2,5.6C126.2,165.8,125,167.6,125,171.4L125,171.4z M214.9,176.1c0.6,2.6,0,5.3-2.6,5.6l-4.4,0.9v64.4
		c-3.8,2-7.3,3.2-10.3,3.2c-4.7,0-5.9-1.5-9.4-5.9l-28.7-45.1v43.6l9.1,2c0,0,0,5.3-7.3,5.3l-20.2,1.2c-0.6-1.2,0-4.1,2-4.7l5.3-1.5
		v-57.6l-7.3-0.6c-0.6-2.6,0.9-6.4,5-6.7l21.7-1.5l29.9,45.6V184l-7.6-0.9c-0.6-3.2,1.8-5.6,4.7-5.9L214.9,176.1z M104.2,132.2
		l83.5-6.1c10.2-0.9,12.9-0.3,19.3,4.4l26.6,18.7c4.4,3.2,5.9,4.1,5.9,7.6v102.7c0,6.4-2.3,10.2-10.5,10.8l-96.9,5.9
		c-6.2,0.3-9.1-0.6-12.3-4.7L100.1,246c-3.5-4.7-5-8.2-5-12.3v-91.3C95.1,137.1,97.5,132.8,104.2,132.2z"
        />
      </g>
    </svg>
  );
};
const MediumText = ({ className }: { className?: string }) => {
  return (
    <svg
      className={className}
      fill="#ffffff"
      version="1.1"
      id="layer"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      viewBox="0 0 652 652"
      xmlSpace="preserve"
    >
      <path
        d="M112,321.5c0,25-20.1,45.3-45,45.3s-45-20.3-45-45.3s20.1-45.3,45-45.3S112,296.5,112,321.5 M161.3,321.5
	c0,23.5-10.1,42.6-22.5,42.6c-12.4,0-22.5-19.1-22.5-42.6s10.1-42.6,22.5-42.6C151.2,278.9,161.3,297.9,161.3,321.5 M181.5,321.5
	c0,21.1-3.5,38.2-7.9,38.2c-4.4,0-7.9-17.1-7.9-38.2s3.5-38.2,7.9-38.2S181.5,300.4,181.5,321.5 M305.6,280.1l0.1,0v-1h-25.6
	L256.4,335l-23.8-55.8h-27.6v1l0.1,0c4.7,1.1,7,2.6,7,8.3v66.4c0,5.7-2.4,7.2-7,8.3l-0.1,0v1h18.7v-1l-0.1,0c-4.7-1.1-7-2.6-7-8.3
	v-62.5l30.5,71.8h1.7l31.4-73.8v66.2c-0.4,4.5-2.7,5.9-7,6.8l-0.1,0v1h32.6v-1l-0.1,0c-4.2-1-6.6-2.3-7-6.8l0-68h0
	C298.6,282.8,301,281.2,305.6,280.1 M320.5,324.1c0.5-11.9,4.8-20.5,12-20.7c2.2,0,4.1,0.8,5.5,2.2c3.1,3,4.5,9.2,4.3,18.5H320.5z
	 M320.2,327.4h38.2v-0.2c-0.1-9.1-2.7-16.2-7.8-21.1c-4.4-4.2-10.9-6.5-17.8-6.5h-0.2c-3.6,0-7.9,0.9-11,2.4
	c-3.5,1.6-6.6,4.1-9.2,7.3c-4.2,5.2-6.7,12.1-7.3,20c0,0.2,0,0.5-0.1,0.7c0,0.2,0,0.4,0,0.7c-0.1,1.1-0.1,2.2-0.1,3.3
	c0.4,17.8,10,32,27.1,32c15,0,23.7-10.9,25.9-25.6l-1.1-0.4c-3.8,7.9-10.7,12.7-18.5,12.1C327.6,351.3,319.4,340.5,320.2,327.4
	 M401.5,351.5c-1.3,3-3.9,4.6-7.4,4.6s-6.7-2.4-9-6.8c-2.4-4.7-3.7-11.3-3.7-19.2c0-16.3,5.1-26.9,13-26.9c3.3,0,5.9,1.6,7.1,4.5
	V351.5z M426.9,363.2c-4.7-1.1-7-2.7-7-8.7v-79.3l-28.4,8.4v1l0.2,0c3.9-0.3,6.6,0.2,8.1,1.6c1.2,1.1,1.8,2.8,1.8,5.2v10.9
	c-2.8-1.8-6.1-2.7-10.2-2.7c-8.2,0-15.7,3.4-21.1,9.7c-5.6,6.5-8.6,15.4-8.6,25.8c0,18.5,9.1,30.9,22.6,30.9
	c7.9,0,14.3-4.3,17.2-11.7v9.8H427v-1L426.9,363.2z M451.2,286c0-5.8-4.3-10.1-10.1-10.1c-5.7,0-10.2,4.4-10.2,10.1
	s4.5,10.1,10.2,10.1C446.8,296.1,451.2,291.8,451.2,286 M457.9,363.2c-4.7-1.1-7-2.7-7-8.7h0v-54.6l-25.5,7.3v1l0.2,0
	c5.5,0.5,7,2.4,7,8.8v47.2H458v-1L457.9,363.2z M523.1,363.2c-4.7-1.1-7-2.7-7-8.7v-54.6l-24.2,7.1v1l0.1,0c4.5,0.5,5.8,2.5,5.8,8.9
	v34.5c-1.5,3-4.3,4.7-7.7,4.9c-5.5,0-8.6-3.7-8.6-10.5v-45.9l-25.5,7.3v1l0.2,0c5.5,0.5,7,2.4,7,8.8v29.2c0,2,0.2,4.1,0.5,6.1l0.5,2
	c2.2,7.7,7.8,11.8,16.6,11.8c7.5,0,14.1-4.6,17-11.9v10.1h25.5v-1L523.1,363.2z M622,364.2v-1l-0.1,0c-5.1-1.2-7-3.4-7-7.9v-37.1
	c0-11.6-6.5-18.5-17.4-18.5c-7.9,0-14.6,4.6-17.2,11.7c-2-7.6-7.9-11.7-16.7-11.7c-7.7,0-13.7,4-16.2,10.9v-10.7l-25.5,7v1l0.2,0
	c5.4,0.5,7,2.4,7,8.7v47.6h23.8v-1l-0.1,0c-4-0.9-5.3-2.7-5.3-7.1v-42.6c1.1-2.5,3.2-5.5,7.5-5.5c5.3,0,8,3.7,8,10.9v45.3h23.8v-1
	l-0.1,0c-4-0.9-5.3-2.7-5.3-7.1v-37.9c0-1.4-0.1-2.8-0.3-4.2c1.1-2.7,3.4-5.9,7.8-5.9c5.4,0,8,3.6,8,10.9v45.3H622z"
      />
    </svg>
  );
};
const logos = [
  {
    name: "Github",
    url: <Github className="w-32 brightness-100 invert-1 mx-10" />,
  },
  {
    name: "Medium",
    url: <MediumText className="w-52 h brightness-100 invert-1 mx-10" />,
  },
  {
    name: "Notion",
    url: <NotionText className="w-52 brightness-100 invert-1 mx-10" />,
  },
  {
    name: "Reddit",
    url: <Reddit className="w-16 h-16 brightness-100 invert-1 mx-10" />,
  },
  {
    name: "Twitter",
    url: <Twitter className="w-16 h-16 brightness-100 invert-1 mx-10" />,
  },
];

const AnimatedLogoCloud = () => {
  return (
    <div className="py-2 max-w-4xl">
      <p className="font-normal tracking-tighter text-base text-gray-100 bg-gradient-to-br from-zinc-400 via-zinc-300 to-zinc-700 bg-clip-text text-transparent text-center mt-4">
        Works perfectly with the apps you love.
      </p>
      {/* <hr className="h-[0.1px]  relative bg-white/10" /> */}

      <div className="relative bg-page-gradient h-full mx-auto max-w-full">
        <div className="absolute z-40 mx-auto  h-screen  overflow-hidden bg-inherit bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
      </div>
      <div className="px-4 mx-auto w-full md:px-8 relative ">
        <div
          className="flex overflow-hidden relative gap-6 p-2 mt-[-40px] group"
          style={{
            maskImage:
              "linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)",
          }}
        >
          {Array(5)
            .fill(null)
            .map((index) => (
              <div
                key={`animated-logo-cloud-${index}`}
                className="flex flex-row gap-5 justify-around items-center animate-logo-cloud shrink-0"
              >
                {logos.map((logo, key) => (
                  <>{logo.url}</>
                ))}
              </div>
            ))}
        </div>
      </div>
    </div>
  );
};

export default AnimatedLogoCloud;