"use client";
import Link from "next/link";
import { useState } from "react";
import React from "react";

export default function Footer3() {
  const [email, setEmail] = useState("");

  const handleChange = (e) => {
    setEmail(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await fetch(
        "https://cryagent.pythonanywhere.com/submitnewrankrunners",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ email }),
        }
      );

      if (response.ok) {
        const result = await response.json();
      } else {
        console.error("Error submitting form:", await response.json());
      }
    } catch (error) {
      console.error("Error submitting form:", error);
    }

    // reset the form
    e.target.reset();
    setEmail("");
  };

  const currentYear = new Date().getFullYear();

  return (
    <>
      <footer>
        <div className="footer__area-three">
          <div className="footer__top-three">
            <div className="container">
              <div className="row">
                <div className="col-lg-4 col-md-8">
                  <div className="footer-widget">
                    <div className="footer__newsletter-three">
                      <h2 className="title">Receive FREE tools &amp; tips!</h2>
                      <p>Subscribe to our newsletter</p>
                      <form onSubmit={handleSubmit}>
                        <input
                          onChange={handleChange}
                          required
                          type="email"
                          name="email"
                          value={email}
                          placeholder="Enter your email address"
                        />
                        <button className="btn" type="submit">
                          Subscribe
                        </button>
                      </form>
                    </div>
                    <div className="footer__social-three">
                      <span className="title">Follow Us on:</span>
                      <ul className="list-wrap">
                        <li>
                          <Link
                            href="https://www.facebook.com/profile.php?id=61561349362241"
                            target="_blank"
                          >
                            <i className="fab fa-facebook-f" />
                          </Link>
                        </li>
                        <li>
                          <Link
                            href="https://www.youtube.com/@RankRunners"
                            target="_blank"
                          >
                            <i className="fab fa-youtube" />
                          </Link>
                        </li>
                        <li>
                          <Link
                            href="https://www.instagram.com/rankrunnersseo/"
                            target="_blank"
                          >
                            <i className="fab fa-instagram" />
                          </Link>
                        </li>
                        <li>
                          <Link
                            href="https://www.linkedin.com/company/rankrunnersseo/"
                            target="_blank"
                          >
                            <i className="fab fa-linkedin-in" />
                          </Link>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div className="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                  <div className="footer-widget">
                    <h4 className="fw-title">RankRunners</h4>
                    <div className="footer-link-list">
                      <ul className="list-wrap">
                        <li>
                          <Link href="/about">About</Link>
                        </li>
                        <li>
                          <Link href="/blog">Blog</Link>
                        </li>
                        {/* <li>
                          <Link href="/team">Our Team</Link>
                        </li> */}
                        <li>
                          <Link href="/portfolio">Portfolio</Link>
                        </li>
                        <li>
                          <Link href="/contact">Contact Us</Link>
                        </li>
                        <li>
                          <Link href="/terms-of-use">Terms of Use</Link>
                        </li>
                        <li>
                          <Link href="/privacy-policy">Privacy Policy</Link>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div className="col-xl-3 col-lg-5 col-sm-6 col-sm-6">
                  <div className="footer-widget">
                    <h4 className="fw-title">Explore</h4>
                    <div className="footer-link-list">
                      <ul className="list-wrap">
                        <li>
                          <Link href="#seocheck">SEO Checker</Link>
                        </li>
                        <li>
                          <Link href="/login">Client Area</Link>
                        </li>
                        <li>
                          <Link href="/services/search-engine-optimization">
                            Search Engine Optimization
                          </Link>
                        </li>
                        <li>
                          <Link href="/services/web-development">
                            Web Design Services
                          </Link>
                        </li>
                        <li>
                          <Link href="/services/social-media-management">
                            Social Media Management
                          </Link>
                        </li>
                        <li>
                          <Link href="/services/lead-generation">
                            Lead Generation
                          </Link>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div className="col-xl-3 col-lg-4 col-md-6">
                  <div className="footer-widget">
                    <h4 className="fw-title">Contact</h4>
                    <div className="footer-info-list">
                      <ul className="list-wrap">
                        <li>
                          <div className="icon">
                            <i className="flaticon-phone-call" />
                          </div>
                          <div className="content">
                            <Link href="tel:+14702604117">(470) 260-4117</Link>
                          </div>
                        </li>
                        <li>
                          <div className="icon">
                            <i className="flaticon-envelope" />
                          </div>
                          <div className="content">
                            <Link
                              href="mailto:support@rankrunners.net
"
                            >
                              support@rankrunners.net
                            </Link>
                          </div>
                        </li>
                        <li>
                          <div className="icon">
                            <i className="flaticon-pin" />
                          </div>
                          <div className="content">
                            <p>
                              <Link
                                href="https://maps.app.goo.gl/3vpv8Y9pSTtpcNGB6"
                                target="_blank"
                              >
                                Suite B, 1934 N. Druid Hills Rd, Brookhaven, GA
                                30319, USA
                              </Link>
                            </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="footer__bottom-three">
            <div className="container">
              <div className="row align-items-center">
                <div className="col-md-6">
                  <div className="copyright-text">
                    <p>
                      © Copyright {currentYear}{" "}
                      <Link href="/">RankRunners</Link>. All Rights Reserved
                    </p>
                  </div>
                </div>

                <div className="col-md-6 d-flex justify-content-center align-items-center">
                  <div className="copyright-text ">
                    <p>
                      <Link href={"/privacy-policy"}>Privacy Policy</Link>
                    </p>
                  </div>
                  <span className="mx-2">|</span>
                  <div className="copyright-text ">
                    <p>
                      <Link href={"/terms-of-use"}>Term and Conditions</Link>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}
