"use client";

import { FloatingSVG } from "@/components/ui/floatsvg";
import { TimelineContent } from "@/components/ui/timeline-animation";
import { Info } from "lucide-react";
import { useRef } from "react";
import Header from "./header";

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

  return (
    <>
      <Header />
      <main
        className=" bg-[#F2F5F9] min-h-screen relative overflow-x-hidden"
        ref={heroRef}
      >
        <FloatingSVG
          className=" absolute left-0 2xl:-top-12 sm:-top-20 -top-12 md:h-fit h-80 "
          width="634"
          height="693"
          viewBox="0 0 634 693"
          translateX={0}
          duration={4}
          translateY={40}
          //   fill="none"
          //   xmlns="http://www.w3.org/2000/svg"
        >
          <g filter="url(#filter0_f_4494_61987)">
            <ellipse
              cx="79.214"
              cy="149.682"
              rx="123.748"
              ry="170.672"
              transform="rotate(-52.1563 79.214 149.682)"
              fill="#FF8CC5"
            />
          </g>
          <defs>
            <filter
              id="filter0_f_4494_61987"
              x="-475.504"
              y="-393.545"
              width="1109.43"
              height="1086.45"
              filterUnits="userSpaceOnUse"
              colorInterpolationFilters="sRGB"
            >
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
              />
              <feGaussianBlur
                stdDeviation="200"
                result="effect1_foregroundBlur_4494_61987"
              />
            </filter>
          </defs>
        </FloatingSVG>

        <svg
          width="681"
          className=" absolute -right-2 2xl:-top-12 sm:-top-20 -top-12 md:h-fit h-80 "
          height="769"
          viewBox="0 0 681 769"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g opacity="0.4" filter="url(#filter0_f_4494_61989)">
            <ellipse
              cx="573.528"
              cy="197.756"
              rx="151.723"
              ry="190.261"
              transform="rotate(46.3492 573.528 197.756)"
              fill="#FF9D81"
            />
          </g>
          <defs>
            <filter
              id="filter0_f_4494_61989"
              x="0.546875"
              y="-373.418"
              width="1145.96"
              height="1142.35"
              filterUnits="userSpaceOnUse"
              colorInterpolationFilters="sRGB"
            >
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
              />
              <feGaussianBlur
                stdDeviation="200"
                result="effect1_foregroundBlur_4494_61989"
              />
            </filter>
          </defs>
        </svg>
        <section className="max-w-screen-xl mx-auto">
          <div className="relative md:pt-32 pt-44 grid place-content-center xl:w-full xl:max-w-screen-lg w-[90%] xl:px-0 sm:px-16 px-4 mx-auto">
            <figure className=" shadow-[0px_-12px_20px_0px_#b9b9b93a] relative z-[1] p-1 backdrop-blur-md bg-white/50 border border-white rounded-lg ">
              <TimelineContent animationNum={0} timelineRef={heroRef}>
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/layoutkinanlytics.png`}
                  className="rounded-lg"
                  alt="layoutkinanlytics"
                />
              </TimelineContent>
            </figure>

            <TimelineContent
              animationNum={1}
              timelineRef={heroRef}
              className=" absolute -left-2 bottom-0 "
              as="figure"
            >
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/layoutkindash.png`}
                className=" lg:w-fit md:w-[90%] sm:w-[70%] w-72 sm:h-fit h-48"
                alt="layoutkindash"
              />
            </TimelineContent>
            <TimelineContent
              animationNum={2}
              timelineRef={heroRef}
              className=" absolute -right-2 bottom-0  "
              as="figure"
            >
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/layoutkindash2.png`}
                className=" lg:w-fit md:w-[90%] sm:w-[70%] w-72 ml-auto sm:h-fit h-48"
                alt="layoutkinddash2"
              />
            </TimelineContent>

            <div className="bg-[linear-gradient(180deg,rgba(242,244,247,0)_0%,#F2F5F9_76%)] absolute bottom-0 left-0 w-full h-32 z-[2]" />
          </div>
          <article className="space-y-5 w-fit mx-auto text-center">
            <TimelineContent
              animationNum={3}
              timelineRef={heroRef}
              as="p"
              className="2xl:text-6xl  lg:text-5xl  sm:text-4xl text-3xl font-semibold text-black"
            >
              Transform Your Business <br /> with AI-Powered CRM
            </TimelineContent>
            <TimelineContent
              as="button"
              type="button"
              animationNum={4}
              timelineRef={heroRef}
              className="p-3.5 font-semibold gap-2 mx-auto w-fit   flex items-center  backdrop-blur-2xl  bg-gradient-to-r from-[#FC3BB2] to-[#F7906E] transition-all hover:[box-shadow:inset_0px_0px_0px_0px_rgba(255,255,255,0.7)] [box-shadow:inset_0px_0px_0px_4px_rgba(255,255,255,0.7)] px-4  text-white  rounded-full"
            >
              Get Started Now
            </TimelineContent>

            <TimelineContent
              animationNum={5}
              timelineRef={heroRef}
              as="p"
              className="flex items-center justify-center gap-2 text-sm text-zinc-700"
            >
              <Info size={20} /> Start Your 14-Day Free Trial Today!
            </TimelineContent>
          </article>
        </section>
      </main>
    </>
  );
}

export default index;