"use client";
import { TimelineContent } from "@/components/ui/timeline-animation";
import VerticalCutReveal from "@/components/ui/vertical-cut-reveal";
import { useMediaQuery } from "@/hooks/use-media-query";
import { AlignJustify, Play, X } from "lucide-react";
import { motion } from "motion/react";
import { useRef, useState } from "react";
import { Drawer } from "vaul";

function FlowSyncHero() {
  const heroRef = useRef<HTMLDivElement>(null);
  const isMobile = useMediaQuery("(max-width: 992px)");
  const [isOpen, setIsOpen] = useState(false);
  const revealVariants = {
    visible: (i: number) => ({
      y: 0,
      opacity: 1,
      filter: "blur(0px)",
      transition: {
        delay: i * 0.4,
        duration: 0.5,
      },
    }),
    hidden: {
      filter: "blur(10px)",
      y: -20,
      opacity: 0,
    },
  };

  const svgVariants = {
    hidden: { opacity: 0, scale: 0.8 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 1.5,
        ease: "easeOut",
      },
    },
  };

  const pathVariants = {
    hidden: { pathLength: 0, opacity: 0 },
    visible: {
      pathLength: 1,
      opacity: 1,
      transition: {
        duration: 2,
        ease: "easeInOut",
      },
    },
  };

  return (
    <section className="bg-black relative" ref={heroRef}>
      <div className="absolute bottom-0 left-0 inset-0 right-0 top-0 bg-[radial-gradient(#53535333_1px,#000000_1px)] bg-size-[20px_20px] mask-[radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>

      <motion.svg
        width="1440"
        height="697"
        viewBox="0 0 1440 697"
        className="absolute top-0 w-full h-full"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        variants={svgVariants}
        initial="hidden"
        animate="visible"
        transition={{ delay: 0.8 }}
      >
        <motion.g
          initial={{ opacity: 0.5 }}
          animate={{
            opacity: [0.5, 0.8, 0.6, 0.9, 0.5],
            y: [0, -5, 2, -3, 0],
            scale: [1, 1.02, 0.98, 1.01, 1],
          }}
          transition={{
            duration: 4,
            repeat: Infinity,
            repeatType: "loop",
            ease: "easeInOut",
            delay: 3,
          }}
        >
          <g opacity="0.4" filter="url(#filter0_f_4775_1318)">
            <motion.ellipse
              cx="420.574"
              cy="358.073"
              rx="420.574"
              ry="358.073"
              transform="matrix(-1 8.74228e-08 8.74228e-08 1 1124.43 -565.671)"
              fill="url(#paint0_linear_4775_1318)"
              initial={{ scale: 0 }}
              animate={{
                scale: [0, 1, 1],
                opacity: [0, 0.4, 0.7, 0.4],
              }}
              transition={{
                scale: { delay: 1, duration: 1.5 },
                opacity: {
                  delay: 2.5,
                  duration: 3,
                  repeat: Infinity,
                  repeatType: "reverse",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
          <g opacity="0.6" filter="url(#filter1_f_4775_1318)">
            <motion.path
              d="M411.846 -176.193C594.686 103.757 675.083 492.136 692.426 651.332C673.102 100.236 330.089 -479.179 160.998 -700C168.431 -642.044 229.006 -456.144 411.846 -176.193Z"
              fill="url(#paint1_linear_4775_1318)"
              initial={{ pathLength: 0, opacity: 0 }}
              animate={{
                pathLength: [0, 1, 1],
                opacity: [0, 0.6, 0.9, 0.5, 0.8],
              }}
              transition={{
                pathLength: { delay: 1.2, duration: 2 },
                opacity: {
                  delay: 3.2,
                  duration: 2.5,
                  repeat: Infinity,
                  repeatType: "loop",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
          <g opacity="0.6" filter="url(#filter2_f_4775_1318)">
            <motion.path
              d="M995.865 -176.194C813.025 103.757 732.628 492.136 715.285 651.332C734.61 100.236 1077.62 -479.179 1246.71 -700C1239.28 -642.044 1178.7 -456.144 995.865 -176.194Z"
              fill="url(#paint2_linear_4775_1318)"
              initial={{ pathLength: 0, opacity: 0 }}
              animate={{
                pathLength: [0, 1, 1],
                opacity: [0, 0.6, 0.8, 0.5, 0.9],
              }}
              transition={{
                pathLength: { delay: 1.4, duration: 2 },
                opacity: {
                  delay: 3.4,
                  duration: 2.8,
                  repeat: Infinity,
                  repeatType: "loop",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
          <g opacity="0.3" filter="url(#filter3_f_4775_1318)">
            <motion.path
              d="M667.946 521.393C663.014 375.579 638.801 12.7186 581.4 -272.21C617.399 -173.194 685.108 124.148 667.946 521.393Z"
              fill="url(#paint3_linear_4775_1318)"
              initial={{ pathLength: 0, opacity: 0 }}
              animate={{
                pathLength: [0, 1, 1],
                opacity: [0, 0.3, 0.6, 0.2, 0.5],
              }}
              transition={{
                pathLength: { delay: 1.6, duration: 1.8 },
                opacity: {
                  delay: 3.6,
                  duration: 3.2,
                  repeat: Infinity,
                  repeatType: "loop",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
          <g opacity="0.3" filter="url(#filter4_f_4775_1318)">
            <motion.path
              d="M739.761 521.393C744.693 375.579 768.906 12.7186 826.307 -272.21C790.308 -173.194 722.6 124.148 739.761 521.393Z"
              fill="url(#paint4_linear_4775_1318)"
              initial={{ pathLength: 0, opacity: 0 }}
              animate={{
                pathLength: [0, 1, 1],
                opacity: [0, 0.3, 0.5, 0.2, 0.6],
              }}
              transition={{
                pathLength: { delay: 1.8, duration: 1.8 },
                opacity: {
                  delay: 3.8,
                  duration: 3.5,
                  repeat: Infinity,
                  repeatType: "loop",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
          <g opacity="0.6" filter="url(#filter5_f_4775_1318)">
            <motion.path
              d="M649.453 323.53C608.277 125.668 468.818 -283.176 240.399 -335.653C363.189 -423.115 616.906 -413.724 649.453 323.53Z"
              fill="url(#paint5_linear_4775_1318)"
              initial={{ pathLength: 0, opacity: 0 }}
              animate={{
                pathLength: [0, 1, 1],
                opacity: [0, 0.6, 0.9, 0.4, 0.7],
              }}
              transition={{
                pathLength: { delay: 2.0, duration: 2.2 },
                opacity: {
                  delay: 4.0,
                  duration: 2.2,
                  repeat: Infinity,
                  repeatType: "loop",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
          <g opacity="0.6" filter="url(#filter6_f_4775_1318)">
            <motion.path
              d="M758.258 323.53C799.434 125.668 938.892 -283.176 1167.31 -335.653C1044.52 -423.115 790.805 -413.724 758.258 323.53Z"
              fill="url(#paint6_linear_4775_1318)"
              initial={{ pathLength: 0, opacity: 0 }}
              animate={{
                pathLength: [0, 1, 1],
                opacity: [0, 0.6, 0.8, 0.4, 0.9],
              }}
              transition={{
                pathLength: { delay: 2.2, duration: 2.2 },
                opacity: {
                  delay: 4.2,
                  duration: 2.7,
                  repeat: Infinity,
                  repeatType: "loop",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
          <g opacity="0.6" filter="url(#filter7_f_4775_1318)">
            <motion.path
              d="M703.856 537.591C703.997 539.6 704.135 541.608 704.269 543.615C704.516 534.83 704.955 525.323 705.577 515.169C734.382 168.435 865.029 -201.635 906.386 -282.666C914.106 -289.102 921.802 -310.429 929.426 -310.429L478.286 -310.429C485.91 -310.429 493.606 -289.102 501.325 -282.666C542.683 -201.635 673.33 168.435 702.135 515.169C702.757 525.323 703.196 534.83 703.443 543.615C703.577 541.608 703.715 539.6 703.856 537.591Z"
              fill="url(#paint7_linear_4775_1318)"
              initial={{ pathLength: 0, opacity: 0 }}
              animate={{
                pathLength: [0, 1, 1],
                opacity: [0, 0.6, 1, 0.5, 0.8],
              }}
              transition={{
                pathLength: { delay: 2.4, duration: 2.5 },
                opacity: {
                  delay: 4.4,
                  duration: 3,
                  repeat: Infinity,
                  repeatType: "loop",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
          <g opacity="0.6" filter="url(#filter8_f_4775_1318)">
            <motion.ellipse
              cx="225.57"
              cy="100.198"
              rx="225.57"
              ry="100.198"
              transform="matrix(-1 8.74228e-08 8.74228e-08 1 929.426 -417.015)"
              fill="url(#paint8_linear_4775_1318)"
              initial={{ scale: 0 }}
              animate={{
                scale: [0, 1, 1],
                opacity: [0, 0.6, 0.9, 0.4, 0.7],
              }}
              transition={{
                scale: { delay: 2.6, duration: 1 },
                opacity: {
                  delay: 3.6,
                  duration: 2.8,
                  repeat: Infinity,
                  repeatType: "loop",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
        </motion.g>
        <defs>
          <filter
            id="filter0_f_4775_1318"
            x="-129.719"
            y="-978.671"
            width="1667.15"
            height="1542.15"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="206.5"
              result="effect1_foregroundBlur_4775_1318"
            />
          </filter>
          <filter
            id="filter1_f_4775_1318"
            x="116.3"
            y="-744.7"
            width="620.826"
            height="1440.73"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="22.35"
              result="effect1_foregroundBlur_4775_1318"
            />
          </filter>
          <filter
            id="filter2_f_4775_1318"
            x="670.585"
            y="-744.7"
            width="620.826"
            height="1440.73"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="22.35"
              result="effect1_foregroundBlur_4775_1318"
            />
          </filter>
          <filter
            id="filter3_f_4775_1318"
            x="553.598"
            y="-300.01"
            width="144.885"
            height="849.203"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="13.9"
              result="effect1_foregroundBlur_4775_1318"
            />
          </filter>
          <filter
            id="filter4_f_4775_1318"
            x="709.223"
            y="-300.01"
            width="144.885"
            height="849.203"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="13.9"
              result="effect1_foregroundBlur_4775_1318"
            />
          </filter>
          <filter
            id="filter5_f_4775_1318"
            x="168.498"
            y="-445.13"
            width="552.855"
            height="840.561"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="35.95"
              result="effect1_foregroundBlur_4775_1318"
            />
          </filter>
          <filter
            id="filter6_f_4775_1318"
            x="686.358"
            y="-445.13"
            width="552.855"
            height="840.561"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="35.95"
              result="effect1_foregroundBlur_4775_1318"
            />
          </filter>
          <filter
            id="filter7_f_4775_1318"
            x="424.485"
            y="-364.229"
            width="558.741"
            height="961.644"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="26.9"
              result="effect1_foregroundBlur_4775_1318"
            />
          </filter>
          <filter
            id="filter8_f_4775_1318"
            x="252.985"
            y="-642.315"
            width="901.741"
            height="650.996"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="112.65"
              result="effect1_foregroundBlur_4775_1318"
            />
          </filter>
          <linearGradient
            id="paint0_linear_4775_1318"
            x1="420.574"
            y1="105.144"
            x2="420.574"
            y2="872.299"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#16A34A" />
            <stop offset="1" stopColor="#16A34A" />
          </linearGradient>
          <linearGradient
            id="paint1_linear_4775_1318"
            x1="426.712"
            y1="-700"
            x2="426.712"
            y2="651.332"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#16A34A" />
            <stop offset="1" stopColor="#16A34A" stopOpacity="0" />
          </linearGradient>
          <linearGradient
            id="paint2_linear_4775_1318"
            x1="980.999"
            y1="-700"
            x2="980.999"
            y2="651.332"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#16A34A" />
            <stop offset="1" stopColor="#16A34A" stopOpacity="0" />
          </linearGradient>
          <linearGradient
            id="paint3_linear_4775_1318"
            x1="626.042"
            y1="-272.21"
            x2="626.042"
            y2="521.393"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#16A34A" />
            <stop offset="1" stopColor="#16A34A" stopOpacity="0" />
          </linearGradient>
          <linearGradient
            id="paint4_linear_4775_1318"
            x1="781.665"
            y1="-272.21"
            x2="781.665"
            y2="521.393"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#16A34A" />
            <stop offset="1" stopColor="#16A34A" stopOpacity="0" />
          </linearGradient>
          <linearGradient
            id="paint5_linear_4775_1318"
            x1="444.926"
            y1="-373.23"
            x2="444.926"
            y2="323.53"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#16A34A" />
            <stop offset="1" stopColor="#16A34A" stopOpacity="0" />
          </linearGradient>
          <linearGradient
            id="paint6_linear_4775_1318"
            x1="962.785"
            y1="-373.23"
            x2="962.785"
            y2="323.53"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#16A34A" />
            <stop offset="1" stopColor="#16A34A" stopOpacity="0" />
          </linearGradient>
          <linearGradient
            id="paint7_linear_4775_1318"
            x1="703.856"
            y1="-292.531"
            x2="703.856"
            y2="543.615"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#16A34A" />
            <stop offset="1" stopColor="#16A34A" stopOpacity="0" />
          </linearGradient>
          <linearGradient
            id="paint8_linear_4775_1318"
            x1="224.593"
            y1="5.47467e-06"
            x2="224.593"
            y2="200.396"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#22C55E" />
            <stop offset="1" stopColor="#16A34A" />
          </linearGradient>
        </defs>
      </motion.svg>

      <TimelineContent
        as="header"
        animationNum={0}
        timelineRef={heroRef}
        customVariants={revealVariants}
        className="flex gap-2 bg-black/50 z-50 backdrop-blur-md text-white max-w-6xl items-center justify-between mx-auto p-2 sticky top-1"
      >
        {isMobile && (
          <Drawer.Root direction="left" open={isOpen} onOpenChange={setIsOpen}>
            <Drawer.Trigger className="px-2 text-white h-9 grid place-content-center bg-green-600 w-fit rounded-lg">
              <AlignJustify />
            </Drawer.Trigger>
            <Drawer.Portal>
              <Drawer.Overlay className="fixed inset-0 bg-black/40 z-50" />
              <Drawer.Content
                className="left-2 top-2 bottom-2 fixed z-50 outline-hidden w-72 flex"
                style={
                  {
                    "--initial-transform": "calc(100% + 8px)",
                  } as React.CSSProperties
                }
              >
                <div className="bg-linear-to-t from-green-900 via-neutral-900 to-neutral-900 border border-neutral-800 text-white p-2 h-full w-full grow flex flex-col rounded-[16px]">
                  <div className="w-full flex justify-between">
                    <div className="flex gap-2 px-4 shrink-0 items-center text-2xl font-semibold  ">
                      <span>LOGO</span>
                    </div>
                    <button
                      className="rounded-md w-fit bg-neutral-950 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-neutral-800 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
                      onClick={() => setIsOpen(false)}
                    >
                      <X />
                    </button>
                  </div>
                  <div className="rounded-b-md py-2 px-3">
                    <ul className="space-y-2">
                      <li className="hover:bg-neutral-800 cursor-pointer p-1.5 px-2 rounded-md">
                        Features
                      </li>
                      <li className="hover:bg-neutral-800 cursor-pointer p-1.5 px-2 rounded-md">
                        Pricing
                      </li>
                      <li className="hover:bg-neutral-800 cursor-pointer p-1.5 px-2 rounded-md">
                        Solutions
                      </li>
                      <li className="hover:bg-neutral-800 cursor-pointer p-1.5 px-2 rounded-md">
                        Resources
                      </li>
                      <li className="hover:bg-neutral-800 cursor-pointer p-1.5 px-2 rounded-md">
                        Blog
                      </li>
                    </ul>
                  </div>
                </div>
              </Drawer.Content>
            </Drawer.Portal>
          </Drawer.Root>
        )}
        {!isMobile && (
          <>
            <h1 className="text-xl uppercase">Logo</h1>
            <nav className="flex gap-4 font-medium">
              <a href="#">Features</a>
              <a href="#">Pricing</a>
              <a href="#">Solutions</a>
              <a href="#">Resources</a>
              <a href="#">Blog</a>
            </nav>
            <button className="text-lg h-10 px-4 rounded-lg text-white flex items-center gap-2 bg-green-600 relative before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-2 before:bg-linear-to-t before:from-green-600 before:to-green-300 before:rounded-t-lg  transition-all group">
              Log In
            </button>
          </>
        )}
      </TimelineContent>

      <article className="text-white py-32 w-fit max-w-4xl mx-auto text-center space-y-4 relative z-10">
        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl capitalize font-medium leading-[120%]">
          <VerticalCutReveal
            splitBy="words"
            staggerDuration={0.15}
            staggerFrom="first"
            containerClassName="justify-center"
            reverse={true}
            transition={{
              type: "spring",
              stiffness: 250,
              damping: 40,
              delay: 0.3,
            }}
          >
            Workflow Automation for growing teams
          </VerticalCutReveal>
        </h1>

        <TimelineContent
          as="p"
          animationNum={1}
          timelineRef={heroRef}
          customVariants={revealVariants}
          className="max-w-xl mx-auto  text-sm sm:text-base"
        >
          Our Sass integrates your favorite tools into one simple dashboard, so
          you can focus on what truly matters: building, collaborating, and
          delivering results.
        </TimelineContent>

        <TimelineContent
          as="div"
          animationNum={2}
          timelineRef={heroRef}
          customVariants={revealVariants}
          className="flex flex-col sm:flex-row gap-4 sm:gap-6 mt-8 sm:mt-10 mx-auto w-fit px-4"
        >
          <button className="text-lg h-12 px-4 rounded-lg text-white flex items-center gap-2 bg-green-600 relative before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-2 before:bg-linear-to-t before:from-green-600 before:to-green-300 before:rounded-t-lg  transition-all group">
            Start Your Free Trial{" "}
          </button>
          <button className="text-lg h-12 px-4 text-white flex items-center gap-1 rounded-lg group">
            Book a Free Demo
            <Play className="w-5 h-5 mr-2 fill-white" />
          </button>
        </TimelineContent>
      </article>

      <motion.svg
        width="1440"
        height="941"
        className="absolute top-0 left-0 w-full h-full"
        viewBox="0 0 1440 941"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        variants={svgVariants}
        initial="hidden"
        animate="visible"
        transition={{ delay: 3.2 }}
      >
        <g opacity="0.3">
          <g filter="url(#filter0_f_4775_1366)">
            <motion.path
              d="M709.8 22.2412L768.26 314.596C794.078 443.705 861.646 560.738 960.55 647.651L1184.51 844.457L709.8 683.851L235.094 844.457L459.05 647.651C557.954 560.738 625.523 443.706 651.34 314.596L709.8 22.2412Z"
              fill="url(#paint0_linear_4775_1366)"
              variants={pathVariants}
              initial="hidden"
              animate="visible"
              transition={{ delay: 3.4 }}
            />
          </g>
          <g opacity="0.4" filter="url(#filter1_f_4775_1366)">
            <motion.path
              d="M700.804 -48.0352L776.779 331.91C802.596 461.02 870.165 578.052 969.068 664.965L1260.12 920.734L700.804 731.501L141.484 920.734L432.539 664.965C531.443 578.052 599.011 461.02 624.829 331.91L700.804 -48.0352Z"
              fill="url(#paint1_linear_4775_1366)"
              variants={pathVariants}
              initial="hidden"
              animate="visible"
              transition={{ delay: 3.6 }}
            />
          </g>
          <g filter="url(#filter2_f_4775_1366)">
            <motion.ellipse
              cx="709.802"
              cy="780.559"
              rx="267.912"
              ry="189.309"
              fill="url(#paint2_linear_4775_1366)"
              initial={{ scale: 0, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ delay: 3.8, duration: 1.2 }}
            />
          </g>
        </g>
        <defs>
          <filter
            id="filter0_f_4775_1366"
            x="35.0938"
            y="-177.759"
            width="1349.41"
            height="1222.22"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="100"
              result="effect1_foregroundBlur_4775_1366"
            />
          </filter>
          <filter
            id="filter1_f_4775_1366"
            x="-58.5156"
            y="-248.035"
            width="1518.64"
            height="1368.77"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="100"
              result="effect1_foregroundBlur_4775_1366"
            />
          </filter>
          <filter
            id="filter2_f_4775_1366"
            x="211.191"
            y="360.55"
            width="997.224"
            height="840.018"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="115.35"
              result="effect1_foregroundBlur_4775_1366"
            />
          </filter>
          <linearGradient
            id="paint0_linear_4775_1366"
            x1="707.745"
            y1="22.2412"
            x2="707.745"
            y2="844.457"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#22C55E" />
            <stop offset="1" stopColor="#16A34A" />
          </linearGradient>
          <linearGradient
            id="paint1_linear_4775_1366"
            x1="707.382"
            y1="-51.0351"
            x2="707.382"
            y2="917.734"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#22C55E" />
            <stop offset="1" stopColor="#16A34A" />
          </linearGradient>
          <linearGradient
            id="paint2_linear_4775_1366"
            x1="708.643"
            y1="591.25"
            x2="708.643"
            y2="969.868"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#22C55E" />
            <stop offset="1" stopColor="#16A34A" />
          </linearGradient>
        </defs>
      </motion.svg>

      <figure className="relative max-w-6xl mx-auto pt-5">
        <motion.svg
          width="863"
          height="32"
          viewBox="0 0 863 32"
          className="absolute top-0 left-0 w-full"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          initial={{ opacity: 0, y: 20 }}
          animate={{
            opacity: [0, 1, 1],
            y: [20, 0, 0],
          }}
          transition={{
            delay: 1.8,
            duration: 0.8,
            times: [0, 0.5, 1],
          }}
        >
          <g
            style={{ mixBlendMode: "plus-lighter" }}
            filter="url(#filter0_f_4775_1371)"
          >
            <motion.path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M854.428 23.5642C765.009 21.618 630.311 19.5688 417.796 19.5688C234.253 19.5688 100.203 19.569 9.15625 21.2882C44.8863 14.0817 124.337 16.1185 441.002 8.5C773.495 18.0485 810.137 16.898 845.827 22.1809C848.651 22.5989 851.469 23.0572 854.428 23.5642Z"
              fill="url(#paint0_linear_4775_1371)"
              initial={{ pathLength: 0 }}
              animate={{
                pathLength: [0, 1, 1],
                opacity: [0.3, 0.8, 0.5, 0.8],
              }}
              transition={{
                pathLength: { delay: 1.4, duration: 1.5 },
                opacity: {
                  delay: 2.9,
                  duration: 2,
                  repeat: Infinity,
                  repeatType: "reverse",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
          <defs>
            <filter
              id="filter0_f_4775_1371"
              x="0.85625"
              y="0.2"
              width="861.87"
              height="31.6645"
              filterUnits="userSpaceOnUse"
              colorInterpolationFilters="sRGB"
            >
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
              />
              <feGaussianBlur
                stdDeviation="4.15"
                result="effect1_foregroundBlur_4775_1371"
              />
            </filter>
            <linearGradient
              id="paint0_linear_4775_1371"
              x1="429.962"
              y1="8.5"
              x2="429.962"
              y2="23.5642"
              gradientUnits="userSpaceOnUse"
            >
              <stop stopColor="#22C55E" />
              <stop offset="1" stopColor="#16A34A" />
            </linearGradient>
          </defs>
        </motion.svg>

        <motion.svg
          width="1288"
          height="162"
          viewBox="0 0 1288 162"
          className="absolute -top-9 left-0 w-full"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{
            opacity: [0, 1, 1],
            scale: [0.8, 1, 1],
          }}
          transition={{
            delay: 1.8,
            duration: 1,
            times: [0, 0.6, 1],
          }}
        >
          <g
            style={{ mixBlendMode: "plus-lighter" }}
            filter="url(#filter0_f_4775_1370)"
          >
            <motion.path
              d="M1223 95.5007C1082 95.5007 920.76 94.5 649.5 94.5C378.239 94.5 182.5 96.9996 65 96.9996C217 75.5 362.793 65 638.646 65C914.498 65 1078.5 75 1223 95.5007Z"
              fill="url(#paint0_linear_4775_1370)"
              initial={{ pathLength: 0 }}
              animate={{
                pathLength: [0, 1, 1],
                opacity: [0.4, 0.9, 0.6, 0.9],
              }}
              transition={{
                pathLength: { delay: 1.8, duration: 1.8 },
                opacity: {
                  delay: 3.6,
                  duration: 2.5,
                  repeat: Infinity,
                  repeatType: "reverse",
                  ease: "easeInOut",
                },
              }}
            />
          </g>
          <defs>
            <filter
              id="filter0_f_4775_1370"
              x="0.599998"
              y="0.599998"
              width="1286.8"
              height="160.8"
              filterUnits="userSpaceOnUse"
              colorInterpolationFilters="sRGB"
            >
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
              />
              <feGaussianBlur
                stdDeviation="32.2"
                result="effect1_foregroundBlur_4775_1370"
              />
            </filter>
            <linearGradient
              id="paint0_linear_4775_1370"
              x1="641.493"
              y1="65"
              x2="641.493"
              y2="96.9996"
              gradientUnits="userSpaceOnUse"
            >
              <stop stopColor="#22C55E" />
              <stop offset="1" stopColor="#16A34A" />
            </linearGradient>
          </defs>
        </motion.svg>

        <TimelineContent
          as="img"
          animationNum={3}
          timelineRef={heroRef}
          customVariants={revealVariants}
          src={`https://pro-section.ui-layouts.com/hero/flowsync.png`}
          className="w-full relative z-10"
        />
      </figure>
    </section>
  );
}

export default FlowSyncHero;
flowsync-hero

flowsync-hero
