import { FreeMode, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import ArrowRight from "../../../public/assets/imgs/portfolio/11/arrow-right.png";
import Link from "next/link";
import Image from "next/image";
import { useState } from "react";
import { toast } from 'react-hot-toast';

// Import Swiper styles
import "swiper/css";
import "swiper/css/autoplay";
import "swiper/css/free-mode";
import { useEffect, useRef } from "react";

export default function Footer5() {
  const menuAnim = useRef();
  const menuAnim2 = useRef();
  useEffect(() => {
    if (menuAnim.current) {
      menuAnimation(menuAnim);
    }
    if (menuAnim2.current) {
      menuAnimation(menuAnim2);
    }
  }, []);
  const menuAnimation = (data) => {
    let rootParent = data.current.children;
    for (let i = 0; i < rootParent.length; i++) {
      let firstParent = rootParent[i].children;
      let arr = firstParent[0].textContent.split("")
      let spanData = ''
      for (let j = 0; j < arr.length; j++) {
        if (arr[j] == ' ') {
          spanData += `<span style='width:6px;'>${arr[j]}</span>`;
        } else {
          spanData += `<span>${arr[j]}</span>`;
        }
      }
      let result = '<div class="menu-text">' + spanData + '</div>';
      firstParent[0].innerHTML = result
    }
  };

  const [formData, setFormData] = useState({
    timestamp: new Date().toLocaleString() + "",
    email: "",
    sheetId: process.env.NEXT_PUBLIC_SUBSCRIBERS_SHEET_ID
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      toast.loading('Adding your email to our newsletter...')
      await fetch("/api/sheets/subscribers-sheet", {
        method: "POST",
        body: JSON.stringify(formData),
        headers: {
          "Content-Type": "application/json",
        },
      });
      setFormData({
        timestamp: new Date().toLocaleString() + "",
        email: "",
        sheetId: process.env.NEXT_PUBLIC_SUBSCRIBERS_SHEET_ID
      })
      toast.dismiss();
      toast.success('You have successfully subscribed to our newsletter!');
    } catch (error) {
      toast.error('Opps! Something Went Wrong...')
      console.error("Error submitting form:", error);
    }
  };

  return (
    <>
      <footer className="footer__area-8 pt-120">
        <div className="footer__top-2 text-anim">
          <div className="contact_wrap">
            <div className="roll__slider">
              <Swiper
                modules={[FreeMode, Autoplay]}
                spaceBetween={60}
                slidesPerView={1}
                freeMode={true}
                loop={true}
                centeredSlides={true}
                allowTouchMove={false}
                speed={10000}
                autoplay={{
                  delay: 1,
                  disableOnInteraction: true,
                }}
              >
                <div className="swiper-wrapper">
                  <SwiperSlide>
                    <h2 className="rollslide_title-1">
                      {"Book Your"} <span> Demo Now</span>
                    </h2>
                  </SwiperSlide>
                  <SwiperSlide>
                    <h2 className="rollslide_title-1">
                      {"Book Your"} <span> Demo Now</span>
                    </h2>
                  </SwiperSlide>
                </div>
              </Swiper>
            </div>

            <Link href="/contact" className=  "link">
              Get Today
            </Link>
          </div>
        </div>
        <div className="footer_categories">
          <div className="categories_item">
            <h4 className="cat_title">useful links</h4>
            <ul className="cat_links menu-anim" ref={menuAnim}>
              {/* <li>
                <Link href="/portfolio">Portfolio</Link>
              </li>
              <li>
                <Link href="/services">Services</Link>
              </li>
              <li>
                <Link href="/about">About Us</Link>
              </li>
              <li>
                <Link href="/blog">Blog</Link>
              </li> */}
              <li>
                <Link href="/contact">Book Your Demo Now</Link>
              </li>
              {/* <li>
                <Link href={"/for-startups"}>For Startups</Link>
              </li> */}
            </ul>
          </div>
          <div className="categories_item">
            <h4 className="cat_title">reach us</h4>
            <ul className="cat_links menu-anim" ref={menuAnim2}>
              <li>
                <Link href={"https://www.linkedin.com/company/syncroi"} target="blank">LinkedIn</Link>
              </li>
              {/* <li>
                <Link href={"https://instagram.com/syncroi"} target="blank">Instagram</Link>
              </li> */}
              <li>
                <Link href={"mailto:welcome@syncroi.com"}>Email</Link>
              </li>
            </ul>
          </div>
          <div className="categories_item l_item">
            <h4 className="cat_title">newsletter</h4>
            <div className="footer__subscribe-2">
              <form onSubmit={handleSubmit}>
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  placeholder="Enter your email"
                  onChange={handleChange}
                  required
                />
                <button type="submit" className="submit">
                  <Image
                    priority
                    style={{ width: "auto", height: "auto" }}
                    src={ArrowRight}
                    alt="Arrow Icon"
                  />
                </button>
              </form>
            </div>
          </div>
        </div>
        <div className="footer__copyright-8">
          <p style={{ maxWidth: "500px" }}>
            © Alrights reserved by{" "}
            <a href="https://syncroi.net" target="_blank">
              SyncROI
            </a>
          </p>
        </div>
      </footer>
    </>
  );
}