"use client";
import { useMediaQuery } from "@/hooks/use-media-query";
import useNewsLetter, {
  type ClientData,
} from "@/hooks/useNewsLetter";
import { TimelineContent } from "@/components/ui/timeline-animation";
import { cn } from "@/lib/utils";
import {
  MessageCircle,
  MessageSquareText,
  Share,
  Share2,
  Zap,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { type FormEvent, type JSX, useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import CursorAnimation from "./cursor-animation";
type TSection = {
  id: number;
  description: JSX.Element;
  className: string;
};

const initialSections: TSection[] = [
  {
    id: 1,
    className: "",
    description: (
      <>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
          quas tenetur, officiis quaerat totam consequuntur fugiat ipsa omnis,
          molestiae dolore modi minima laboriosam
          <strong>magni assumenda corporis</strong> praesentium magnam, aliquam
          ratione?
        </p>
        <span className="text-gray-300 inline-block">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum,
          officiis?
        </span>
        <div className="flex gap-2 justify-between ">
          <div className="flex items-center gap-1">
            <Zap size={20} />
            71k
          </div>
          <div className="flex items-center gap-1">
            <Share2 size={20} />
            41k
          </div>
          <div className="flex items-center gap-1">
            <MessageSquareText size={20} />
            10k
          </div>
        </div>
      </>
    ),
  },
  {
    id: 2,
    className: "",
    description: (
      <>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
          quas tenetur, officiis quaerat totam consequuntur fugiat ipsa omnis,
          molestiae dolore modi minima laboriosam
          <strong>magni assumenda corporis</strong> praesentium magnam, aliquam
          ratione?
        </p>
        <span className="text-gray-300 inline-block">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum,
          officiis?
        </span>
        <div className="flex gap-2 justify-between ">
          <div className="flex items-center gap-1">
            <Zap size={20} />
            69k
          </div>
          <div className="flex items-center gap-1">
            <Share2 size={20} />
            41k
          </div>
          <div className="flex items-center gap-1">
            <MessageSquareText size={20} />
            10k
          </div>
        </div>
      </>
    ),
  },
  {
    id: 3,
    className: "",
    description: (
      <>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
          quas tenetur, officiis quaerat totam consequuntur fugiat ipsa omnis,
          molestiae dolore modi minima laboriosam
          <strong>magni assumenda corporis</strong> praesentium magnam, aliquam
          ratione?
        </p>
        <span className="text-gray-300 inline-block">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum,
          officiis?
        </span>
        <div className="flex gap-2 justify-between ">
          <div className="flex items-center gap-1">
            <Zap size={20} />
            49k
          </div>
          <div className="flex items-center gap-1">
            <Share2 size={20} />
            41k
          </div>
          <div className="flex items-center gap-1">
            <MessageSquareText size={20} />
            10k
          </div>
        </div>
      </>
    ),
  },
];
function index() {
  const isMobile = useMediaQuery("(max-width: 576px)");
  const heroRef = useRef<HTMLElement | null>(null);
  const [Send] = useNewsLetter();
  const [loading, setLoading] = useState(false);
  const [sections, setSections] = useState<TSection[]>(initialSections);
  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
    }
  };
  // Effect to reorder the sections every 3 seconds
  useEffect(() => {
    const intervalId = setInterval(() => {
      // Reordering logic: move the first item to the end
      setSections((prevSections) => {
        const firstSection = prevSections[0];
        const restSections = prevSections.slice(1);
        return [...restSections, firstSection];
      });
    }, 3000);

    return () => clearInterval(intervalId);
  }, []);

  return (
    <>
      <main
        className=" bg-white h-screen relative overflow-x-hidden overflow-hidden"
        ref={heroRef}
      >
        <div className="absolute h-full w-full bg-[linear-gradient(to_right,#d1d1d12c_1px,transparent_1px),linear-gradient(to_bottom,#cccccc2c_1px,transparent_1px)] bg-[size:44px_52px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
        <img
          src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/shadow-overlay.png`}
          alt="shadow-overlay"
          width={400}
          height={400}
          className=" absolute top-0 left-o opacity-40 w-[70%]"
        />

        {/* left side */}
        <div className="w-[32rem] absolute -top-6 -left-2 pt-5 gap-2 flex justify-start bg-white text-sm border border-gray-200 shadow-xl -rotate-6 rounded-lg p-4">
          <button className="p-2 border border-gray-200   px-4 rounded-md">
            Follow
          </button>
          <button className="p-2 border flex items-center gap-1 border-gray-200 bg-blue-600 text-white  px-4 rounded-md">
            <MessageCircle size={20} /> Message
          </button>
        </div>
        <div className="w-[32rem] absolute -top-10 left-0 pt-5 gap-2 flex justify-end bg-white text-sm border border-gray-200 shadow-xl rotate-6 rounded-lg p-3 pb-2">
          <button className="p-2  px-4 rounded-md">
            12.2k <span className="underline font-medium">Followers</span>{" "}
          </button>
          <button className="p-2 px-4 rounded-md">
            4.5k <span className="underline font-medium">Following</span>
          </button>
        </div>

        {/* right side */}
        {!isMobile && (
          <div
            className=" [transform:translateX(2%)_scale(1.2)_rotateX(30deg)_rotateY(31deg)_rotate(344deg)] 
                [transform-origin:top_left] [backface-visibility:hidden] [transform-style:preserve-3d]"
          >
            <AnimatePresence>
              {sections.map((section, index) => (
                <motion.div
                  key={section.id}
                  layout
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
                  className={cn(
                    `bg-white absolute text-sm border border-gray-200 shadow-xl p-2 py-4 rounded-md space-y-5 
                            `,
                    index === 0 &&
                      "w-80 2xl:-top-10 xl:-top-20 -top-28 2xl:right-28 right-24",
                    index === 1 &&
                      "w-72 2xl:-top-36 xl:-top-40 -top-48 2xl:right-24 right-20",
                    index === 2 &&
                      "w-80 2xl:-top-28 xl:-top-32 -top-44 2xl:right-0 right-4",
                    section.className,
                  )}
                >
                  {section.description}
                </motion.div>
              ))}
            </AnimatePresence>
          </div>
        )}

        {/* left sticky note */}

        {!isMobile && (
          <>
            <div className="absolute -left-4 lg:top-[25%] top-[15%] bottom-[25%] bg-[#f8e93a] shadow-xl rounded-xl w-64 h-fit italic text-4xl rotate-3">
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/newsletter/pin.svg`}
                alt="pin"
                className="absolute w-10 top-0 right-0"
              />
              <div className="bg-yellow-300 shadow-inner h-10 rounded-t-xl" />
              <h1 className="mt-auto p-5">What's This Note For!</h1>
            </div>
            <div className="absolute left-4 lg:top-[30%] top-[20%] bottom-[25%] bg-gray-50 shadow-xl rounded-xl w-64 h-fit italic text-3xl -rotate-6  ">
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/newsletter/pin.svg`}
                alt="pin"
                className="absolute w-10 top-0 left-4"
              />
              <div className="bg-gray-100 shadow-inner h-10 rounded-t-xl" />
              <h1 className="mt-auto p-5">Subscribe To get notify!</h1>
            </div>
          </>
        )}

        {/* bottom side */}
        <div className="absolute -bottom-12 left-0 w-full h-fit">
          <div className="w-[80%] h-20 mx-auto  gap-2  bg-white text-gray-800 text-sm border border-gray-200 shadow-xl -rotate-3 rounded-lg p-4">
            <h1 className="w-[50%] ml-auto text-right">
              The premier social platform for entrepreneurs, investors, and
              startups to <span className="text-blue-500">connect,</span>{" "}
              <span className="text-orange-500">fund, </span> and{" "}
              <span className="text-green-500">grow.</span>Whether you're
              raising capital or seeking opportunities, this is where innovation
              meets{" "}
              <span className="underline text-indigo-500">investment</span>{" "}
            </h1>
          </div>
        </div>
        <div className="absolute -bottom-12 left-0 w-full h-fit">
          <div className="sm:w-[80%] w-[95%] h-20 mx-auto  2xl:gap-40 gap-32 flex justify-start bg-white text-sm border border-gray-200 shadow-xl rotate-3 rounded-lg p-3">
            <figure className="flex items-center gap-2">
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/white-logo.png`}
                alt="logo"
                className="w-10 h-10 p-2 border border-[#17171C] rounded-lg bg-[#0C0C0E]"
              />
              <div>
                <h1 className="font-semibold sm:text-base text-xs">
                  Ui-Layouts
                </h1>
                <p className="text-gray-600">Design Agency</p>
              </div>
            </figure>
            <div className="flex items-center gap-2">
              <button className="p-2 border border-gray-200 text-black px-4 rounded-md">
                Follow
              </button>
              <button className="p-2 border flex items-center gap-1 border-gray-200 bg-blue-600 text-white  px-4 rounded-md">
                <MessageCircle size={20} /> Message
              </button>
              <button className="p-2 border flex items-center gap-1 border-gray-200 text-black  px-4 rounded-md">
                <Share size={20} />
                Share
              </button>
            </div>
          </div>
        </div>

        {/* section */}
        <section className="max-w-screen-xl mx-auto grid place-content-center h-full">
          <article className="text-center relative z-20  space-y-4 sm:px-0 px-3">
            <figure className="backdrop-blur-xl mx-auto  w-20 h-20 rounded-xl grid place-content-center ">
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/white-logo.png`}
                alt="logo"
                className="w-16 h-16 p-3 border border-[#17171C] rounded-xl bg-[#0C0C0E]"
              />
            </figure>

            <TimelineContent
              animationNum={2}
              timelineRef={heroRef}
              as="h1"
              className="lg:text-5xl sm:text-4xl text-2xl flex flex-col items-center  font-semibold"
            >
              Every success starts with <br className="sm:block hidden" /> a
              dream—yours begins here.
            </TimelineContent>

            <TimelineContent
              animationNum={3}
              timelineRef={heroRef}
              as="p"
              className=" 2xl:w-[40rem] xl:w-[35rem] sm:w-[30rem] w-5/5 mx-auto xl:text-base text-sm"
            >
              A cutting-edge platform where entrepreneurs, indie hackers,
              investors, and VCs connect, collaborate, and fund the next big
              thing. Build connections, raise capital, and turn ideas into
              reality
            </TimelineContent>

            <TimelineContent animationNum={4} timelineRef={heroRef}>
              <form
                onSubmit={(e) => handleNewsLetterData(e)}
                className="flex gap-2 bg-white shadow-lg backdrop-blur-2xl border-2 border-gray-100 rounded-full p-1.5 sm:w-[30rem] w-[95%] mx-auto"
              >
                <input
                  name="newsletter_email"
                  type="email"
                  placeholder="Your Email Address"
                  required
                  className=" bg-transparent w-full focus:outline-none focus:bg-transparent outline-none text-black p-2 py-2   "
                />
                <button
                  disabled={loading}
                  type="submit"
                  className={`flex-shrink-0 sm:text-base text-sm p-2 px-3 bg-gradient-to-t from-gray-950 to-black text-white rounded-full sm:font-semibold font-medium capitalize ${
                    loading ? "opacity-50 cursor-not-allowed" : ""
                  }`}
                >
                  {loading ? " Sending..." : "Get Notified"}
                </button>
              </form>
            </TimelineContent>
            <div className="flex justify-center items-center gap-2">
              <div className="flex justify-center  -space-x-3">
                <figure className=" w-8 h-8  border-2 rounded-full flex-shrink-0 border-white">
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/image1.png`}
                    alt="image-1"
                    className="w-full h-full object-cover "
                  />
                </figure>
                <figure className=" w-8 h-8 border-2 rounded-full flex-shrink-0 border-white relative z-[1]">
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/image2.png`}
                    alt="image-2"
                    className="w-full h-full object-cover "
                  />
                </figure>
                <figure className=" w-8 h-8  border-2 rounded-full flex-shrink-0 border-white relative z-[2]">
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/image4.png`}
                    alt="image"
                    className="w-full h-full object-cover "
                  />
                </figure>
              </div>
              <p className="text-left text-neutral-800">1.7k+ joined already</p>
            </div>
          </article>
        </section>

        {/* cursor */}
        {/* <svg width="342"
                    className="absolute w-20 top-10 right-20 h-20 -rotate-45"
                    height="347" viewBox="0 0 342 347" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g filter="url(#filter0_d_4789_1222)">
                        <path d="M268.672 250.861C268.501 251.033 268.334 251.194 268.149 251.366C263.991 255.133 257.916 255.878 252.975 253.208L178.028 212.782L104.279 262.768C99.6184 265.924 93.4737 265.789 88.9582 262.439C84.4466 259.087 82.5329 253.248 84.2103 247.873L155.16 19.8083C156.794 14.5091 161.603 10.7989 167.152 10.5253C172.716 10.2503 177.838 13.4903 179.992 18.6179L271.448 236.438C273.539 241.396 272.414 247.074 268.672 250.861Z" fill="url(#paint0_radial_4789_1222)" />
                    </g>
                    <defs>
                        <filter id="filter0_d_4789_1222" x="68.0094" y="0.909033" width="242.08" height="307.737" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                            <feFlood floodOpacity="0" result="BackgroundImageFix" />
                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                            <feOffset dx="11" dy="17" />
                            <feGaussianBlur stdDeviation="13.3" />
                            <feComposite in2="hardAlpha" operator="out" />
                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.19 0" />
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4789_1222" />
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4789_1222" result="shape" />
                        </filter>
                        <radialGradient id="paint0_radial_4789_1222" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(170.839 175.844) rotate(44.6617) scale(122.316 119.279)">
                            <stop stopColor="#4F89F8" />
                            <stop offset="1" stopColor="#1564FC" />
                        </radialGradient>
                    </defs>
                </svg> */}
        <CursorAnimation />
      </main>
    </>
  );
}

export default index;
sass-newsletter
