import Link from "next/link";
import ThumbFooter from "../../../public/assets/imgs/thumb/footer.png";
import FooterLogoWhite from "../../../public/assets/imgs/logo/footer-logo-white.png";
import Image from "next/image";
import { useState } from "react";
import { toast } from 'react-hot-toast';

export default function Footer3() {
  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: "",
      })
      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">
        <div className="footer__top">
          <div className="container footer-line"></div>
          <Image
            priority
            width={1160}
            style={{ height: "auto" }}
            src={ThumbFooter}
            alt="Footer Image"
            data-speed="0.75"
          />
        </div>

        <div className="footer__btm">
          <div className="container">
            <div className="row footer__row">
              <div className="col-xxl-12">
                <div className="footer__inner">
                  <div className="footer__widget">
                    <Image
                      priority
                      style={{ width: "auto", height: "auto" }}
                      className="footer__logo"
                      src={FooterLogoWhite}
                      alt="Footer Logo"
                    />
                    <p>
                      We are committed to delivering high quality services that exceed our clients&lsquo; expectations and help them achieve their business goals.
                    </p>
                    <ul className="footer__social">
                      {/* <li>
                        <a href="https://instagram.com/syncroi" target="_blank">
                          <span>
                            <i className="fa-brands fa-instagram"></i>
                          </span>
                        </a>
                      </li> */}
                      <li>
                        <a href="https://www.linkedin.com/company/syncroi" target="_blank">
                          <span>
                            <i className="fa-brands fa-linkedin"></i>
                          </span>
                        </a>
                      </li>
                    </ul>
                  </div>

                  <div className="footer__widget-2">
                    <h2 className="footer__widget-title">Information</h2>
                    <ul className="footer__link">
                      {/* <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="footer__widget-3">
                    <h2 className="footer__widget-title">Contact Us</h2>
                    <ul className="footer__contact">
                      <li>360 Gamal Abd El Nasser Rd, Al Asafra Bahary, Alexandria, Egypt</li>
                      <li>
                        <a href="tel:+201022517849" className="phone">
                          (+20) 102 - 251 - 7849{" "}
                        </a>
                      </li>
                      <li>
                        <a href="mailto:welcome@syncroi.com">
                          welcome@syncroi.com
                        </a>
                      </li>
                    </ul>
                  </div>

                  <div className="footer__widget-4">
                    <h2 className="project-title">
                      Have a project in mind?
                    </h2>
                    <div className="btn_wrapper">
                      <Link
                        href="/contact"
                        className="wc-btn-primary btn-hover btn-item"
                      >
                        <span></span> Book Your <br />Demo Now{" "}
                        <i className="fa-solid fa-arrow-right"></i>
                      </Link>
                    </div>
                    <h3 className="contact-time">09 : 00 AM - 06 : 00 PM</h3>
                    <h4 className="contact-day">Sunday - Thursday</h4>
                  </div>

                  <div className="footer__copyright">
                    <p>
                      © 2025 | All rights reserved by{" "}
                      <a href="https://syncroi.net" target="_blank">
                        SyncROI
                      </a>
                    </p>
                  </div>

                  <div className="footer__subscribe">
                    <form onSubmit={handleSubmit}>
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        placeholder="Enter your email"
                        onChange={handleChange}
                        required
                      />
                      <button type="submit" className="subs-btn">
                        <i className="fa-solid fa-paper-plane"></i>
                      </button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}