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

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-linear-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-linear-to-t from-blue-600 to-blue-500 rounded-lg'>
            <img
              src={`https://pro-section.ui-layouts.com/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'>
          <TimelineAnimation
            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
          </TimelineAnimation>

          <TimelineAnimation 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>
          </TimelineAnimation>

          <TimelineAnimation animationNum={3} timelineRef={heroRef}>
            <p className='2xl:w-160 xl:w-140 sm:w-120 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>
          </TimelineAnimation>

          <div className='p-5 sm:px-6 px-2 w-fit mx-auto sm:mt-5 mt-7 relative bg-linear-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-120 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-hidden text-blue-950 outline-hidden'
              />
              <button
                disabled={loading}
                type='submit'
                className={`shrink-0 sm:text-base text-sm h-12 px-3 bg-linear-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={`https://pro-section.ui-layouts.com/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={`https://pro-section.ui-layouts.com/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={`https://pro-section.ui-layouts.com/icons/Linkedin.svg`}
                alt='social-icon'
                className='grayscale'
              />
            </a>
          </div>
        </article>
      </section>
    </main>
  );
}

export default newsletter1;