"use client";

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

function index() {
  const heroRef = useRef<HTMLElement | null>(null);
  const [Send] = useNewsLetter();
  const [loading, setLoading] = useState(false);
  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="bg-[#f2f5f9] min-h-screen relative overflow-x-hidden pb-10"
        ref={heroRef}
      >
        <svg
          width="681"
          className=" absolute -right-12 -top-12 h-96 w-96 "
          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="#0579fd"
            />
          </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>

        <svg
          className=" absolute -left-0 -bottom-0 w-96 h-96"
          width="760"
          height="634"
          viewBox="0 0 760 634"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g opacity="0.4" filter="url(#filter0_f_4494_61990)">
            <ellipse
              cx="171.338"
              cy="585.349"
              rx="136.065"
              ry="225.854"
              transform="rotate(46.3492 171.338 585.349)"
              fill="#3474ff"
            />
          </g>
          <defs>
            <filter
              id="filter0_f_4494_61990"
              x="-417.18"
              y="0.942871"
              width="1177.04"
              height="1168.81"
              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_61990"
              />
            </filter>
          </defs>
        </svg>

        <section className="max-w-screen-xl mx-auto ">
          <div className="relative pt-16 grid place-content-center w-full max-w-screen-lg mx-auto">
            <figure className=" xl:w-full w-[90%] mx-auto  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 w-full"
                  alt="layoutkinanlytics"
                />
              </TimelineContent>
            </figure>

            <TimelineContent
              animationNum={1}
              timelineRef={heroRef}
              className=" absolute -left-2 bottom-0 xl:w-auto lg:w-[60%] w-[70%] "
              as="figure"
            >
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/layoutkindash.png`}
                className="rounded-lg w-full"
                alt="layoutkindash"
              />
            </TimelineContent>
            <TimelineContent
              animationNum={2}
              timelineRef={heroRef}
              className=" absolute -right-2 bottom-0  xl:w-auto w-[60%]"
              as="figure"
            >
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/layoutkindash2.png`}
                className="rounded-lg w-full"
                alt="layoutkinddash2"
              />
            </TimelineContent>

            <div className="bg-[linear-gradient(180deg,rgba(249,251,253,0)_0%,#f2f5f9_76%)] absolute bottom-0 left-0 w-full  h-32 z-[2]" />
          </div>
          <article className="text-center relative z-20  space-y-4 sm:px-0 px-2">
            <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 2024
            </TimelineContent>

            <TimelineContent animationNum={2} timelineRef={heroRef}>
              <h1 className="lg:text-5xl sm:text-4xl text-2xl flex flex-col items-center  font-semibold">
                Largest Online Collection <br className="sm:block hidden" /> of
                Layout Resources
              </h1>
            </TimelineContent>

            <TimelineContent animationNum={3} timelineRef={heroRef}>
              <p className=" 2xl:w-[40rem] xl:w-[35rem] sm:w-[30rem] w-5/5 mx-auto xl:text-base sm:text-sm text-xs">
                Join our exclusive waitlist for early access to the largest
                collection of online resources, launching in January 2024.
              </p>
            </TimelineContent>

            <TimelineContent animationNum={4} timelineRef={heroRef}>
              <form
                onSubmit={(e) => handleNewsLetterData(e)}
                className="flex gap-2 relative z-50 rounded-md sm:w-[30rem] w-[95%] mx-auto"
              >
                <input
                  name="newsletter_email"
                  type="email"
                  placeholder="Your Email Address"
                  required
                  className=" bg-neutral-100 border border-neutral-200 backdrop-blur-md p-3 h-12 w-full rounded-lg focus:outline-none  outline-none text-white"
                />
                <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-md sm:font-semibold font-medium capitalize ${
                    loading ? "opacity-50 cursor-not-allowed" : ""
                  }`}
                >
                  {loading ? " Sending..." : "Join the Wailist"}
                </button>
              </form>
            </TimelineContent>
            <div className="flex justify-center gap-2 pt-0">
              <a
                href="#"
                className="w-12 h-12 p-2  grid place-content-center bg-gray-950 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-12 h-12 p-2  grid place-content-center bg-red-500 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-12 h-12 p-2  grid place-content-center bg-blue-500 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 index;
resources-newsletter
