"use client";
import { TimelineContent } from "@/components/ui/timeline-animation";
import { ArrowRight, Sparkles } from "lucide-react";
import { motion } from "motion/react";
import { useRef } from "react";
import Header from "./header";
import VerticalBarsNoise from "@/components/ui/horizontal-bar-pattern";

// use that link for diagonal lines
const diagonalLines = `${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/diagonal-lines.png`;

function index() {
  const heroRef = useRef<HTMLElement | null>(null);

  const satisfactionLevels = [
    {
      id: "very-satisfied",
      label: "Very Satisfied",
      color: "bg-green-400",
      width: "90%",
    },
    {
      id: "somewhat-satisfied",
      label: "Somewhat satisfied",
      color: "bg-blue-400",
      width: "70%",
    },
    { id: "neutral", label: "Neutral", color: "bg-orange-300", width: "40%" },
    {
      id: "very-dissatisfied",
      label: "Very Dissatisfied",
      color: "bg-red-400",
      width: "10%",
    },
  ];
  return (
    <>
      <Header />
      <main
        className="min-h-screen relative overflow-x-hidden bg-[#F0EEE6] text-black"
        ref={heroRef}
      >
        <div
          className="absolute h-full w-full opacity-5"
          style={{
            backgroundImage: `url(${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/diagonal-lines.png)`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat",
          }}
        />
        <VerticalBarsNoise />

        <section className="w-full py-28  md:grid md:grid-cols-2 xl:px-0 px-4 md:place-content-center max-w-screen-xl mx-auto">
          <article className="relative h-full space-y-5 flex-col flex justify-center text-left pb-10">
            <TimelineContent
              animationNum={0}
              timelineRef={heroRef}
              as="h1"
              className="xl:text-6xl lg:text-5xl text-4xl font-semibold text-black"
            >
              Create online surveys and forms that mean business
            </TimelineContent>
            <TimelineContent
              animationNum={1}
              timelineRef={heroRef}
              as="p"
              className="text-sm text-zinc-500 w-[80%]"
            >
              Get better insights faster—with expert templates, helpful AI, and
              convenient ways to reach more people.
            </TimelineContent>
            <TimelineContent as="div" animationNum={2} timelineRef={heroRef}>
              <button className=" group  bg-[#00BF6F] rounded-full shadow-[0px_1px_1px_rgba(0,0,0,0.05),0px_0px_0px_4px_rgba(255,255,255,0.3),0px_26px_27.4px_rgba(0,102,59,0.15),0px_6px_12px_rgba(0,102,59,0.12),0px_2px_5px_rgba(0,102,59,0.1),0px_6px_11.1px_rgba(0,102,59,0.05),inset_0px_5px_6px_rgba(255,255,255,0.2),inset_0px_1px_1px_rgba(255,255,255,0.4)] ">
                <div className="relative flex text-white items-center  pl-4 pr-2 py-2 gap-3 overflow-hidden rounded-full">
                  Click Me
                  <span className="flex flex-row items-center text-black  p-2 gap-2 w-9 h-9 bg-white/90 rounded-full shadow-[0px_4px_7px_rgba(81,246,177,0.3),0px_26px_27.4px_rgba(0,102,59,0.15),0px_6px_12px_rgba(0,102,59,0.12),0px_2px_5px_rgba(0,102,59,0.1),0px_6px_11.1px_rgba(0,102,59,0.05),inset_0px_1px_1px_rgba(255,255,255,0.4)] z-2">
                    <ArrowRight />
                  </span>
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/laysurvey/button-sparkles.svg`}
                    alt="sparkles.svg"
                    className="transition-all duration-300 w-full absolute right-0 h-full top-0  mix-blend-overlay "
                  />
                </div>
              </button>
            </TimelineContent>

            <div className=" md:absolute md:bottom-0">
              <p className="py-2">Trusted by 300K+ organizations worldwide</p>
              <div className="grid grid-cols-5 gap-4 items-center">
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/doordash.png`}
                  alt="doordash"
                  className=" object-contain  grayscale hover:grayscale-0"
                />
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/eventbrite.png`}
                  alt="eventbrite"
                  className=" object-contain  grayscale hover:grayscale-0"
                />
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/netflix.png`}
                  alt="netflix"
                  className=" object-contain  grayscale hover:grayscale-0"
                />
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/smeg.png`}
                  alt="smeg"
                  className=" object-contain  grayscale hover:grayscale-0"
                />
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/zapier.png`}
                  alt="zapier"
                  className=" object-contain  grayscale hover:grayscale-0"
                />
              </div>
            </div>
          </article>

          <TimelineContent
            as="div"
            animationNum={3}
            timelineRef={heroRef}
            className={
              "p-2 relative space-y-5  bg-white border h-full border-gray-200 rounded-lg"
            }
          >
            <div className="relative bg-gradient-to-b pt-12 from-[#007A4A]   to-[#00331F] w-full  h-full rounded-lg">
              <div className=" absolute top-0 left-0 w-full h-full overflow-hidden ">
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/laysurvey/shadow.png`}
                  alt="shadow.png"
                  className=" absolute  right-0 top-0 w-full h-full "
                />
                <motion.img
                  initial={{ opacity: 0, filter: "blur(20px)" }}
                  animate={{ opacity: 1, filter: "blur(0px)" }}
                  transition={{ duration: 0.5, delay: 6.4 }}
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/laysurvey/box-sparkles.png`}
                  className=" absolute -right-0 -bottom-20 "
                />
              </div>

              <motion.svg
                initial={{ scale: 0.5, opacity: 0, filter: "blur(20px)" }}
                animate={{ scale: 1, opacity: 1, filter: "blur(0px)" }}
                transition={{ duration: 0.5, delay: 7 }}
                width="184"
                className="absolute left-0 top-0"
                height="391"
                viewBox="0 0 184 391"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M111.585 98.4846C109.55 21.401 51.1998 -44.4256 -27.4358 -53.4931C-113.579 -63.4261 -191.445 -1.48352 -201.355 84.8597C-208.268 145.085 -180.292 201.275 -133.501 233.128C-132.767 312.072 -73.4473 379.938 6.81956 389.194C93.7382 399.216 172.306 336.716 182.305 249.595C189.39 187.866 160.15 130.339 111.585 98.4846ZM70.9571 79.4842C61.1273 30.2481 20.6244 -9.22018 -31.8231 -15.2679C-96.9038 -22.7723 -155.732 24.0252 -163.219 89.2572C-167.615 127.557 -153.334 163.697 -127.621 188.529C-107.033 114.666 -35.4013 64.6582 43.0302 73.7021C52.6625 74.8128 61.9932 76.7675 70.9571 79.4842ZM71.8395 121.052C61.4916 116.639 50.3441 113.625 38.6034 112.271C-25.0415 104.933 -82.7596 149.063 -93.1315 211.712C-82.5238 216.382 -71.0484 219.561 -58.936 220.958C4.59824 228.284 62.1732 183.859 71.8395 121.052ZM-92.8671 252.875C-83.7114 303.549 -42.4327 344.435 11.2464 350.625C76.9131 358.197 136.271 310.978 143.825 245.158C148.35 205.732 133.262 168.576 106.32 143.488C86.6208 217.729 15.0766 268.224 -63.3233 259.183C-73.54 258.005 -83.4143 255.869 -92.8671 252.875Z"
                  fill="url(#paint0_linear_4494_58273)"
                  fillOpacity="0.1"
                />
                <defs>
                  <linearGradient
                    id="paint0_linear_4494_58273"
                    x1="15.3014"
                    y1="-48.5765"
                    x2="-34.5135"
                    y2="384.439"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="white" />
                    <stop offset="0.89615" stopColor="white" stopOpacity="0" />
                  </linearGradient>
                </defs>
              </motion.svg>
              <motion.svg
                initial={{ scale: 0.5, opacity: 0, filter: "blur(20px)" }}
                animate={{ scale: 1, opacity: 1, filter: "blur(0px)" }}
                transition={{ duration: 0.5, delay: 7.2 }}
                width="304"
                className="absolute right-0 top-0"
                height="437"
                viewBox="0 0 304 437"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M72.392 144.917C74.4269 67.8336 132.777 2.00698 211.412 -7.06044C297.555 -16.9935 375.422 44.9491 385.332 131.292C392.244 191.518 364.268 247.707 317.478 279.561C316.743 358.505 257.424 426.371 177.157 435.627C90.2384 445.649 11.6709 383.149 1.67159 296.028C-5.41343 234.299 23.8269 176.771 72.392 144.917ZM113.019 125.917C122.849 76.6807 163.352 37.2124 215.8 31.1648C280.88 23.6603 339.708 70.4578 347.195 135.69C351.591 173.99 337.311 210.13 311.597 234.961C291.009 161.098 219.378 111.091 140.946 120.135C131.314 121.245 121.983 123.2 113.019 125.917ZM112.137 167.484C122.485 163.072 133.632 160.058 145.373 158.704C209.018 151.365 266.736 195.495 277.108 258.145C266.5 262.815 255.025 265.994 242.913 267.391C179.378 274.717 121.803 230.291 112.137 167.484ZM276.844 299.307C267.688 349.981 226.409 390.867 172.73 397.057C107.063 404.629 47.7059 357.41 40.1515 291.591C35.6264 252.165 50.7148 215.008 77.6566 189.921C97.3558 264.161 168.9 314.656 247.3 305.616C257.517 304.438 267.391 302.302 276.844 299.307Z"
                  fill="url(#paint0_linear_4494_58277)"
                  fillOpacity="0.1"
                />
                <defs>
                  <linearGradient
                    id="paint0_linear_4494_58277"
                    x1="168.675"
                    y1="-2.14387"
                    x2="218.49"
                    y2="430.872"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="white" />
                    <stop offset="0.89615" stopColor="white" stopOpacity="0" />
                  </linearGradient>
                </defs>
              </motion.svg>
              <div className="flex flex-col  justify-center items-center">
                <motion.img
                  initial={{ y: -10, opacity: 0, filter: "blur(20px)" }}
                  animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
                  transition={{ duration: 0.5, delay: 2.5 }}
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/laysurvey/woman-image.png`}
                  alt="woman-image"
                  className="w-fit mx-auto "
                />
                <motion.img
                  initial={{ y: 10, opacity: 0, filter: "blur(20px)" }}
                  animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
                  transition={{ duration: 0.5, delay: 2.2 }}
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/laysurvey/email-box.png`}
                  alt="email-box"
                  className=" mix-blend-overlay"
                />
              </div>
              <div className="absolute bottom-0 -left-16 w-full">
                <motion.div
                  initial={{ scale: 0.5, opacity: 0, filter: "blur(40px)" }}
                  animate={{ scale: 1, opacity: 1, filter: "blur(0px)" }}
                  transition={{ duration: 0.5, delay: 3.2 }}
                  className="bg-gradient-to-t w-fit from-[#027447] to-[#00db871a] shadow-[0px_22.7191px_55.253px_rgba(0,0,0,0.16),-18.1753px_26.3542px_23.9005px_rgba(0,0,0,0.12)]   rounded-xl backdrop-blur-md  p-4 text-white"
                >
                  <motion.h1
                    initial={{ opacity: 0, filter: "blur(20px)" }}
                    animate={{ opacity: 1, filter: "blur(0px)" }}
                    transition={{ duration: 0.5, delay: 3.4 }}
                    className="pb-2 text-center font-semibold"
                  >
                    How Satisfied are you?
                  </motion.h1>
                  <motion.div
                    initial={{ opacity: 0, filter: "blur(20px)" }}
                    animate={{ opacity: 1, filter: "blur(0px)" }}
                    transition={{ duration: 0.5, delay: 3.7 }}
                    className="bg-gray-100 text-sm text-black p-2 rounded-xl [box-shadow:0px_0.8px_0px_rgba(0,0,0,0.14),0px_0.9px_0.9px_rgba(0,0,0,0.12)] w-full "
                  >
                    {satisfactionLevels.map((level, index) => (
                      <div
                        key={level.id}
                        className="flex items-center cursor-pointer space-y-1"
                      >
                        <div className="text-gray-700 font-medium w-36">
                          {level.label}
                        </div>
                        <div className="flex-1 w-32 bg-white h-5 p-1 [box-shadow:0px_1.5px_0.9px_rgba(0,0,0,0.12)] rounded-full overflow-hidden ml-2">
                          <motion.div
                            initial={{ width: 0 }}
                            animate={{ width: `${level.width}` }}
                            transition={{
                              duration: 0.5,
                              delay: 4.2 + index * 0.3,
                            }}
                            className={`h-full relative overflow-hidden rounded-full ${level.color} `}
                          >
                            <div className="[box-shadow:0px_0.908766px_0.908766px_rgba(0,0,0,0.25),_inset_0px_2.7263px_2.7263px_rgba(255,255,255,0.5),_inset_0px_0.908766px_0.908766px_rgba(255,255,255,0.25)] absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#ffffff2d_3px,transparent_3px)] bg-[size:12px_16px]" />
                          </motion.div>
                        </div>
                      </div>
                    ))}
                  </motion.div>
                </motion.div>
                <motion.svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="223"
                  height="65"
                  fill="none"
                  className="absolute left-40 !-translate-y-2.5"
                  viewBox="0 0 223 65"
                  initial={{ scale: 1.5, opacity: 0, filter: "blur(40px)" }}
                  animate={{ scale: 1, opacity: 1, filter: "blur(0px)" }}
                  transition={{ duration: 0.5, delay: 5.2 }}
                >
                  <g filter="url(#filter0_f_4716_1491)">
                    <motion.path
                      stroke="#00DB87"
                      strokeWidth="2"
                      d="M13.7 12.658v20.365c0 10.494 8.506 19 19 19h178.504"
                      initial={{
                        pathLength: 0,
                        strokeDasharray: "1 1",
                        strokeDashoffset: 1,
                      }}
                      animate={{ pathLength: 1, strokeDashoffset: 0 }}
                      transition={{
                        duration: 1.5,
                        ease: "easeInOut",
                        delay: 5.5,
                      }}
                    />
                  </g>
                  <g filter="url(#filter1_d_4716_1491)">
                    <motion.path
                      stroke="#00DB87"
                      strokeWidth="2"
                      d="M13.7 12.658v20.365c0 10.494 8.506 19 19 19h178.504"
                      initial={{
                        pathLength: 0,
                        strokeDasharray: "1 1",
                        strokeDashoffset: 1,
                      }}
                      animate={{ pathLength: 1, strokeDashoffset: 0 }}
                      transition={{
                        duration: 1.8,
                        ease: "easeInOut",
                        delay: 5.5,
                      }}
                    />
                  </g>

                  <foreignObject
                    width="16.238"
                    height="16.239"
                    x="6.035"
                    y="4.135"
                  >
                    <div
                      style={{
                        clipPath: "url(#bgblur_1_4716_1491_clip_path)",
                        backdropFilter: "blur(2px)",
                        height: "100%",
                        width: "100%",
                      }}
                    />
                  </foreignObject>
                  <circle
                    cx="14.155"
                    cy="12.254"
                    r="3.619"
                    fill="#fff"
                    fillOpacity="0.5"
                    stroke="#fff"
                    data-figma-bg-blur-radius="4"
                  />
                  <defs>
                    <clipPath
                      id="bgblur_0_4716_1491_clip_path"
                      transform="translate(-203.035 -44.135)"
                    >
                      <circle cx="211.155" cy="52.254" r="3.619" />
                    </clipPath>
                    <clipPath
                      id="bgblur_1_4716_1491_clip_path"
                      transform="translate(-6.035 -4.135)"
                    >
                      <circle cx="14.155" cy="12.254" r="3.619" />
                    </clipPath>
                    <filter
                      id="filter0_f_4716_1491"
                      width="222.104"
                      height="63.965"
                      x="0.899"
                      y="0.858"
                      colorInterpolationFilters="sRGB"
                      filterUnits="userSpaceOnUse"
                    >
                      <feFlood floodOpacity="0" result="BackgroundImageFix" />
                      <feBlend
                        in="SourceGraphic"
                        in2="BackgroundImageFix"
                        result="shape"
                      />
                      <feGaussianBlur
                        result="effect1_foregroundBlur_4716_1491"
                        stdDeviation="5.9"
                      />
                    </filter>
                    <filter
                      id="filter1_d_4716_1491"
                      width="200.504"
                      height="42.365"
                      x="11.699"
                      y="12.658"
                      colorInterpolationFilters="sRGB"
                      filterUnits="userSpaceOnUse"
                    >
                      <feFlood floodOpacity="0" result="BackgroundImageFix" />
                      <feColorMatrix
                        in="SourceAlpha"
                        result="hardAlpha"
                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                      />
                      <feOffset dy="1" />
                      <feGaussianBlur stdDeviation="0.5" />
                      <feComposite in2="hardAlpha" operator="out" />
                      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
                      <feBlend
                        in2="BackgroundImageFix"
                        result="effect1_dropShadow_4716_1491"
                      />
                      <feBlend
                        in="SourceGraphic"
                        in2="effect1_dropShadow_4716_1491"
                        result="shape"
                      />
                    </filter>
                  </defs>
                </motion.svg>

                <motion.div
                  initial={{ opacity: 0, filter: "blur(20px)" }}
                  animate={{ opacity: 1, filter: "blur(0px)" }}
                  transition={{ duration: 0.5, delay: 6.4 }}
                  className="relative bg-gradient-to-t  from-[#027447] to-[#00db871a] ounded-xl  xl:translate-x-24 translate-x-32  xl:-translate-y-10 translate-y-4 w-80 ml-auto  sm:rounded-[18.1753px] p-3 text-white shadow-[0px_22.7191px_55.253px_rgba(0,0,0,0.16),-18.1753px_26.3542px_23.9005px_rgba(0,0,0,0.2),-18.1753px_26.3542px_23.9005px_rgba(0,0,0,0.12)] backdrop-blur-md"
                >
                  <motion.h1
                    initial={{ opacity: 0, filter: "blur(20px)" }}
                    animate={{ opacity: 1, filter: "blur(0px)" }}
                    transition={{ duration: 0.5, delay: 6.8 }}
                    className="pb-2 text-center font-semibold flex items-center gap-2 relative"
                  >
                    <Sparkles />
                    Tell us what you want to learn...
                  </motion.h1>
                  <motion.div
                    initial={{ opacity: 0, filter: "blur(20px)" }}
                    animate={{ opacity: 1, filter: "blur(0px)" }}
                    transition={{ duration: 0.5, delay: 7 }}
                    className="bg-gray-100 text-xs text-black p-2 rounded-xl shadow-[0px_0.8px_0px_rgba(0,0,0,0.14),0px_0.9px_0.9px_rgba(0,0,0,0.12)] w-full relative"
                  >
                    I work for a transportation company called Automogo. We want
                    to get customer feedback on our transportation booking
                    ser...
                  </motion.div>
                </motion.div>
              </div>
            </div>
          </TimelineContent>
        </section>
      </main>
    </>
  );
}

export default index;