"use client";
import useNewsLetter, {
  type ClientData,
} from "@/hooks/useNewsLetter";
import { TimelineContent } from "@/components/ui/timeline-animation";
import { Zap } from "lucide-react";
import { type FormEvent, useRef, useState } from "react";
import { toast } from "sonner";
import AnimatedSVG from "@/components/ui/animated-svg";

function newsletter1() {
  const [Send] = useNewsLetter();
  const [loading, setLoading] = useState(false);
  const heroRef = useRef<HTMLDivElement>(null);
  const handleNewsLetterData = async (e: FormEvent) => {
    e.preventDefault();
    setLoading(true);
    const target = e.target as HTMLFormElement;
    const formData = new FormData(target);

    const clientEmail = formData.get("newsletter_email")!;

    const data: ClientData = {
      email: clientEmail.toString(),
    };

    try {
      await Send(data);
      toast.success("Thanks for subscribing to our newsletter");
    } catch (error) {
      console.error("Failed to send newsletter data:", error);
      toast.error("Something went wrong. Please try again.");
    } finally {
      setLoading(false); // Stop loading
    }
  };
  return (
    <main className=" relative  min-h-screen overflow-hidden bg-neutral-100">
      <div className="absolute h-full w-full bg-[linear-gradient(to_right,#d4d4d42c_1px,transparent_1px),linear-gradient(to_bottom,#c9c9c92c_1px,transparent_1px)] bg-[size:44px_48px] " />
      <div className="absolute top-0 left-0 h-full w-full  bg-gradient-to-t from-blue-500 z-[1] from-20%" />
      <AnimatedSVG svgId="left" position="left" />
      <AnimatedSVG svgId="right" position="right" />

      <svg
        width="796"
        className="absolute top-0 left-0"
        height="675"
        viewBox="0 0 796 675"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g opacity="0.2">
          <g filter="url(#filter0_f_4494_66885)">
            <path
              d="M437.572 -251.316L401.434 -154.822C229.22 305.011 -57.892 713.04 -432.477 1030.29C-96.2384 649.91 144.978 195.098 271.316 -296.708L274.792 -310.239L437.572 -251.316Z"
              fill="#4873ea"
            />
          </g>
          <g opacity="0.09" filter="url(#filter1_f_4494_66885)">
            <path
              d="M320.491 -148.834L284.581 -52.2555C113.454 407.986 -172.693 816.694 -546.527 1134.83C-211.189 753.654 28.9527 298.271 154.128 -193.833L157.572 -207.371L320.491 -148.834Z"
              fill="#4860ea"
            />
          </g>
          <g
            style={{ mixBlendMode: "screen" }}
            filter="url(#filter2_f_4494_66885)"
          >
            <path
              d="M437.572 -251.316L410.832 -191.227C207.908 264.77 -78.0709 679.005 -432.477 1030.29C-92.9139 668.683 165.855 238.891 326.61 -230.489L335.255 -255.732L437.572 -251.316Z"
              fill="#b4c6ff"
            />
          </g>
          <g
            style={{ mixBlendMode: "screen" }}
            opacity="0.09"
            filter="url(#filter3_f_4494_66885)"
          >
            <path
              d="M320.491 -148.834L293.893 -88.6825C92.0467 367.795 -192.953 782.706 -546.527 1134.83C-207.82 772.42 49.9322 342.015 209.579 -127.745L218.164 -153.007L320.491 -148.834Z"
              fill="#b4c2ff"
            />
          </g>
          <g
            style={{ mixBlendMode: "color-dodge" }}
            filter="url(#filter4_f_4494_66885)"
          >
            <path
              d="M437.572 -251.316L401.434 -154.822C229.22 305.011 -57.892 713.04 -432.477 1030.29C-96.2384 649.91 144.978 195.098 271.316 -296.708L274.792 -310.239L437.572 -251.316Z"
              fill="#3769f1"
            />
          </g>
          <g
            style={{ mixBlendMode: "color-dodge" }}
            opacity="0.09"
            filter="url(#filter5_f_4494_66885)"
          >
            <path
              d="M313.659 -163.027L277.749 -66.4488C106.622 393.792 -179.526 802.501 -553.359 1120.64C-218.021 739.461 22.1207 284.078 147.296 -208.027L150.74 -221.564L313.659 -163.027Z"
              fill="#3781f1"
            />
          </g>
        </g>
        <defs>
          <filter
            id="filter0_f_4494_66885"
            x="-472.477"
            y="-350.239"
            width="950.051"
            height="1420.53"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="20"
              result="effect1_foregroundBlur_4494_66885"
            />
          </filter>
          <filter
            id="filter1_f_4494_66885"
            x="-586.527"
            y="-247.371"
            width="947.02"
            height="1422.2"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="20"
              result="effect1_foregroundBlur_4494_66885"
            />
          </filter>
          <filter
            id="filter2_f_4494_66885"
            x="-472.477"
            y="-295.732"
            width="950.051"
            height="1366.02"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="20"
              result="effect1_foregroundBlur_4494_66885"
            />
          </filter>
          <filter
            id="filter3_f_4494_66885"
            x="-586.527"
            y="-193.007"
            width="947.02"
            height="1367.84"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="20"
              result="effect1_foregroundBlur_4494_66885"
            />
          </filter>
          <filter
            id="filter4_f_4494_66885"
            x="-552.477"
            y="-430.239"
            width="1110.05"
            height="1580.53"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="60"
              result="effect1_foregroundBlur_4494_66885"
            />
          </filter>
          <filter
            id="filter5_f_4494_66885"
            x="-853.359"
            y="-521.564"
            width="1467.02"
            height="1942.2"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="150"
              result="effect1_foregroundBlur_4494_66885"
            />
          </filter>
        </defs>
      </svg>
      <svg
        width="710"
        className="absolute top-0 right-0"
        height="675"
        viewBox="0 0 710 675"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g opacity="0.2">
          <g filter="url(#filter0_f_4494_66893)">
            <path
              d="M358.428 -161.316L394.566 -64.8222C566.78 395.011 853.892 803.04 1228.48 1120.29C892.238 739.91 651.022 285.098 524.684 -206.708L521.208 -220.239L358.428 -161.316Z"
              fill="#4873ea"
            />
          </g>
          <g opacity="0.09" filter="url(#filter1_f_4494_66893)">
            <path
              d="M475.509 -58.8338L511.419 37.7445C682.546 497.986 968.693 906.694 1342.53 1224.83C1007.19 843.654 767.047 388.271 641.872 -103.833L638.428 -117.371L475.509 -58.8338Z"
              fill="#4860ea"
            />
          </g>
          <g
            style={{ mixBlendMode: "screen" }}
            filter="url(#filter2_f_4494_66893)"
          >
            <path
              d="M358.428 -161.316L385.168 -101.227C588.092 354.77 874.071 769.005 1228.48 1120.29C888.914 758.683 630.145 328.891 469.39 -140.489L460.745 -165.732L358.428 -161.316Z"
              fill="#b4c6ff"
            />
          </g>
          <g
            style={{ mixBlendMode: "screen" }}
            opacity="0.09"
            filter="url(#filter3_f_4494_66893)"
          >
            <path
              d="M475.509 -58.8338L502.107 1.31752C703.953 457.795 988.953 872.706 1342.53 1224.83C1003.82 862.42 746.068 432.015 586.421 -37.7447L577.836 -63.0071L475.509 -58.8338Z"
              fill="#b4c2ff"
            />
          </g>
          <g
            style={{ mixBlendMode: "color-dodge" }}
            filter="url(#filter4_f_4494_66893)"
          >
            <path
              d="M358.428 -161.316L394.566 -64.8222C566.78 395.011 853.892 803.04 1228.48 1120.29C892.238 739.91 651.022 285.098 524.684 -206.708L521.208 -220.239L358.428 -161.316Z"
              fill="#3769f1"
            />
          </g>
          <g
            style={{ mixBlendMode: "color-dodge" }}
            opacity="0.09"
            filter="url(#filter5_f_4494_66893)"
          >
            <path
              d="M482.341 -73.0272L518.251 23.5512C689.378 483.792 975.526 892.501 1349.36 1210.64C1014.02 829.461 773.879 374.078 648.704 -118.027L645.26 -131.564L482.341 -73.0272Z"
              fill="#3781f1"
            />
          </g>
        </g>
        <defs>
          <filter
            id="filter0_f_4494_66893"
            x="318.426"
            y="-260.239"
            width="950.051"
            height="1420.53"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="20"
              result="effect1_foregroundBlur_4494_66893"
            />
          </filter>
          <filter
            id="filter1_f_4494_66893"
            x="435.508"
            y="-157.371"
            width="947.02"
            height="1422.2"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="20"
              result="effect1_foregroundBlur_4494_66893"
            />
          </filter>
          <filter
            id="filter2_f_4494_66893"
            x="318.426"
            y="-205.732"
            width="950.051"
            height="1366.02"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="20"
              result="effect1_foregroundBlur_4494_66893"
            />
          </filter>
          <filter
            id="filter3_f_4494_66893"
            x="435.508"
            y="-103.007"
            width="947.02"
            height="1367.84"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="20"
              result="effect1_foregroundBlur_4494_66893"
            />
          </filter>
          <filter
            id="filter4_f_4494_66893"
            x="238.426"
            y="-340.239"
            width="1110.05"
            height="1580.53"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="60"
              result="effect1_foregroundBlur_4494_66893"
            />
          </filter>
          <filter
            id="filter5_f_4494_66893"
            x="182.34"
            y="-431.564"
            width="1467.02"
            height="1942.2"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="150"
              result="effect1_foregroundBlur_4494_66893"
            />
          </filter>
        </defs>
      </svg>
      <section
        className=" h-full w-full relative  rounded-md  text-blue-950  "
        ref={heroRef}
      >
        <nav className="relative w-44 mx-auto grid place-content-center pt-4 ">
          <figure className="backdrop-blur-xl w-12 relative z-[1] h-12 grid place-content-center p-2.5 bg-gradient-to-t from-blue-600 to-blue-500 rounded-lg ">
            <img
              src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/white-logo.png`}
              alt="logo"
              className="w-full h-full "
            />
          </figure>
          <svg
            width="186"
            height="165"
            className="absolute top-0 left-0"
            viewBox="0 0 186 165"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.79452 -41.605L38.8944 40.2613C43.5382 52.1046 43.4931 65.2727 38.7683 77.0839L6 159"
              stroke="url(#paint0_linear_4494_66902)"
              strokeWidth="2"
            />
            <path
              d="M178.807 -41.605L146.707 40.2613C142.063 52.1046 142.108 65.2727 146.833 77.0839L179.602 159"
              stroke="url(#paint1_linear_4494_66902)"
              strokeWidth="2"
            />
            <g opacity="0.6" filter="url(#filter0_f_4494_66902)">
              <path
                d="M6.79688 -42H180.002L147.806 40.0359C143.198 51.7777 143.198 64.8274 147.806 76.5692L180.002 158.605C127.586 123.557 59.2131 123.557 6.79688 158.605L38.9928 76.5692C43.601 64.8274 43.601 51.7777 38.9928 40.0359L6.79688 -42Z"
                fill="url(#paint2_linear_4494_66902)"
              />
            </g>
            <defs>
              <filter
                id="filter0_f_4494_66902"
                x="0.796875"
                y="-48"
                width="185.207"
                height="212.605"
                filterUnits="userSpaceOnUse"
                colorInterpolationFilters="sRGB"
              >
                <feFlood floodOpacity="0" result="BackgroundImageFix" />
                <feBlend
                  mode="normal"
                  in="SourceGraphic"
                  in2="BackgroundImageFix"
                  result="shape"
                />
                <feGaussianBlur
                  stdDeviation="3"
                  result="effect1_foregroundBlur_4494_66902"
                />
              </filter>
              <linearGradient
                id="paint0_linear_4494_66902"
                x1="26.0616"
                y1="-41.605"
                x2="26.0616"
                y2="159"
                gradientUnits="userSpaceOnUse"
              >
                <stop offset="0.30559" stopColor="white" />
                <stop offset="1" stopColor="white" stopOpacity="0" />
              </linearGradient>
              <linearGradient
                id="paint1_linear_4494_66902"
                x1="159.54"
                y1="-41.605"
                x2="159.54"
                y2="159"
                gradientUnits="userSpaceOnUse"
              >
                <stop offset="0.30559" stopColor="white" />
                <stop offset="1" stopColor="white" stopOpacity="0" />
              </linearGradient>
              <linearGradient
                id="paint2_linear_4494_66902"
                x1="93.3996"
                y1="-42"
                x2="93.3996"
                y2="158.605"
                gradientUnits="userSpaceOnUse"
              >
                <stop stopColor="white" />
                <stop offset="1" stopColor="white" stopOpacity="0" />
              </linearGradient>
            </defs>
          </svg>
        </nav>
        <article className="text-center relative z-20   space-y-4 py-10 pt-24">
          <TimelineContent
            animationNum={1}
            timelineRef={heroRef}
            as="span"
            className="flex gap-2 items-center justify-center text-blue-600"
          >
            <Zap className="fill-blue-600" />
            COMING JAN 2026
          </TimelineContent>

          <TimelineContent animationNum={2} timelineRef={heroRef}>
            <h1 className="xl:text-5xl lg:text-4xl sm:text-3xl text-2xl  font-normal  leading-[130%] tracking-tighter">
              Be the First to get update by <br /> Joining Our
              <span className="italic inline-block font-thin">Waitlist!</span>
            </h1>
          </TimelineContent>

          <TimelineContent animationNum={3} timelineRef={heroRef}>
            <p className=" 2xl:w-[40rem] xl:w-[35rem] sm:w-[30rem] text-gray-800 w-5/5 mx-auto xl:text-base text-sm">
              Be first to experience Replex. Join our waitlist for exclusive
              benefits and revolutionary automation solutions.
            </p>
          </TimelineContent>

          <div className="p-5 sm:px-6 px-2 w-fit mx-auto sm:mt-5 mt-7 relative bg-gradient-to-b from-white/40 backdrop-blur-md rounded-md">
            <p className="font-semibold text-xl">Join the waitlist</p>
            <span className="text-gray-600">
              Sign up now for early notification upon launch
            </span>
            <form
              onSubmit={(e) => handleNewsLetterData(e)}
              className="flex gap-2 relative z-50 rounded-md sm:w-[30rem] w-[95%] mx-auto pt-3"
            >
              <input
                name="newsletter_email"
                type="email"
                placeholder="Your Email Address"
                required
                className="bg-white/10 backdrop-blur-xl border border-blue-100/20 px-3.5 placeholder:text-white h-12 w-full rounded-full focus:outline-none text-blue-950 outline-none"
              />
              <button
                disabled={loading}
                type="submit"
                className={`flex-shrink-0 sm:text-base text-sm h-12 px-3 bg-gradient-to-t from-blue-600 to-blue-500 text-white rounded-full sm:font-semibold font-medium capitalize ${
                  loading ? "opacity-50 cursor-not-allowed" : ""
                }`}
              >
                {loading ? " Sending..." : "Join Wailist"}
              </button>
            </form>
          </div>
          <div className="flex justify-center gap-2 pt-4">
            <a
              href="#"
              className="w-14 h-14 p-2  grid place-content-center bg-blue-50/10 backdrop-blur-lg rounded-lg"
            >
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/icons/twitter.svg`}
                alt="social-icon"
                className="grayscale"
              />
            </a>
            <a
              href="#"
              className="w-14 h-14 p-2  grid place-content-center bg-red-50/10 backdrop-blur-lg rounded-lg"
            >
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/icons/Instagram.svg`}
                alt="social-icon"
                className="grayscale"
              />
            </a>
            <a
              href="#"
              className="w-14 h-14 p-2  grid place-content-center bg-blue-50/10 backdrop-blur-lg rounded-lg"
            >
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/icons/Linkedin.svg`}
                alt="social-icon"
                className="grayscale"
              />
            </a>
          </div>
        </article>
      </section>
    </main>
  );
}

export default newsletter1;
waitlist-newsletter
