keystone/components/footers/Footer3.jsx

"use client";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";

export default function Footer3() {
  const [success, setSuccess] = useState(true);
  const [showMessage, setShowMessage] = useState(false);
  
  const handleShowMessage = () => {
    setShowMessage(true);
    setTimeout(() => {
      setShowMessage(false);
    }, 2000);
  };
  
  const sendEmail = async (e) => {
    e.preventDefault();
    const email = e.target.email.value;

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          type: 'newsletter',
          email,
        }),
      });

      if (response.ok) {
        e.target.reset();
        setSuccess(true);
        handleShowMessage();
      } else {
        setSuccess(false);
        handleShowMessage();
      }
    } catch (error) {
      console.error('Error:', error);
      setSuccess(false);
      handleShowMessage();
      e.target.reset();
    }
  };
  
  useEffect(() => {
    const headings = document.querySelectorAll(".footer-heading-mobile");

    const toggleOpen = (event) => {
      const parent = event.target.closest(".footer-col-block");
      const content = parent.querySelector(".tf-collapse-content");

      if (parent.classList.contains("open")) {
        parent.classList.remove("open");
        content.style.height = "0px";
      } else {
        parent.classList.add("open");
        content.style.height = content.scrollHeight + 10 + "px";
      }
    };

    headings.forEach((heading) => {
      heading.addEventListener("click", toggleOpen);
    });

    return () => {
      headings.forEach((heading) => {
        heading.removeEventListener("click", toggleOpen);
      });
    };
  }, []);

  return (
    <footer id="footer" className="footer style-2" style={{ backgroundColor: '#272727' }}>
      <div className="footer-wrap">
        <div className="tf-container">
          <div className="footer-body">
            <div className="row">
              <div className="col-lg-4">
                <div className="footer-about">
                  <Link href={`/`} className="footer-logo">
                    <Image
                      src="/images/logo/keystonesolution_white.png"
                      alt="Keystone Logo"
                      width={100}
                      height={40}
                      style={{
                        maxWidth: '100%',
                        height: 'auto'
                      }}
                    />
                  </Link>
                  <div className="footer-info mb_51">
                    <a href="mailto:koushik@keystonesolution.in" className="link text-body-2" style={{ color: 'white' }}>
                      koushik@keystonesolution.in
                    </a>
                    <div className="text-body-2" style={{ color: 'white' }}>
                      No. 3A, 1st Floor, Balaji Nagar,<br />
                      Dharapadavedu, Vellore - 632007,<br />
                      Tamil Nadu, India
                    </div>
                    <div className="text-body-2" style={{ color: 'white' }}>+91 90954 50005</div>
                  </div>
                  <div className="tf-social">
                    <a href="#" className="icon-twitter-x" style={{ color: 'white' }} />
                    <a href="#" className="icon-facebook-f" style={{ color: 'white' }} />
                    <a href="#" className="icon-github" style={{ color: 'white' }} />
                    <a href="#" className="icon-instagram" style={{ color: 'white' }} />
                    <a href="#" className="icon-youtube" style={{ color: 'white' }} />
                  </div>
                </div>
              </div>
              <div className="col-lg-2 col-md-6">
                <div className="footer-col-block">
                  <h6 className="footer-heading footer-heading-mobile fw-6" style={{ color: 'white' }}>
                    Company
                  </h6>
                  <div className="tf-collapse-content">
                    <ul className="footer-menu-list">
                      <li className="text-body-2">
                        <Link href={`/about`} className="link footer-menu_item" style={{ color: 'white' }}>
                          About Keystone
                        </Link>
                      </li>
                      <li className="text-body-2">
                        <Link
                          href={`/contact-us`}
                          className="link footer-menu_item"
                          style={{ color: 'white' }}
                        >
                          Contact us
                        </Link>
                      </li>
                      <li className="text-body-2">
                        <Link href={`/career`} className="link footer-menu_item" style={{ color: 'white' }}>
                          Careers
                        </Link>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div className="col-lg-2 col-md-6">
                {/* Links section commented out */}
              </div>
              <div className="col-lg-4">
                <div className="footer-newsletter">
                  <h6 className="footer-heading fw-6" style={{ color: 'white' }}>
                    Contact Us
                  </h6>
                  <div className="tf-collapse-content">
                    <div className="wrap-newsletter">
                      <p className="text-body-2 mb_17" style={{ color: 'white' }}>
                        Get in touch with us for your data processing needs.
                        <br />
                        We're here to help with your business requirements!
                      </p>
                      <div
                        className={`tfSubscribeMsg footer-sub-element ${showMessage ? "active" : ""
                          }`}
                      >
                        {success ? (
                          <p style={{ color: "rgb(52, 168, 83)" }}>
                            Your message has been sent successfully.
                          </p>
                        ) : (
                          <p style={{ color: "red" }}>Something went wrong</p>
                        )}
                      </div>
                      <form
                        onSubmit={sendEmail}
                        id="subscribe-form"
                        className="form-newsletter style-1 subscribe-form mb_18"
                      >
                        <div
                          id="subscribe-content"
                          className="subscribe-content"
                        >
                          <fieldset className="email">
                            <input
                              id="subscribe-email"
                              type="email"
                              name="email"
                              className="subscribe-email style-2"
                              placeholder="Enter your e-mail"
                              tabIndex={0}
                              aria-required="true"
                              style={{ backgroundColor: 'white', color: '#272727' }}
                            />
                          </fieldset>
                          <div className="button-submit">
                            <button
                              id="subscribe-button"
                              className="subscribe-button tf-btn btn-dark"
                              type="submit"
                            >
                              <span>Submit</span>
                              <span className="bg-effect" />
                            </button>
                          </div>
                          <div className="icon">
                            <i className="icon-envelope-solid" style={{ color: 'black' }} />
                          </div>
                        </div>
                        <div id="subscribe-msg" className="subscribe-msg" />
                      </form>
                      <p className="description text-body-2" style={{ color: 'white' }}>
                        By contacting us, you agree to our{" "}
                        <a href="#" className="link" style={{ color: 'white', textDecoration: 'underline' }}>
                          Privacy Policy
                        </a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="footer-bottom" style={{ backgroundColor: '#1f1f1f', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
        <div className="tf-container">
          <div className="row">
            <div className="col-12">
              <div className="wrapper d-flex align-items-center justify-content-between flex-wrap gap_12">
                <p className="text-body-2 m-0" style={{ color: 'white' }}>
                  © {new Date().getFullYear()} Copyright by{" "}
                  <a href="#" className="link-black text-body-3" style={{ color: 'white', fontWeight: '600' }}>
                    Keystone Solutions
                  </a>{" "}
                  . All Rights Reserved.
                </p>
                <p className="text-body-2 m-0" style={{ color: 'rgba(255,255,255,0.7)' }}>
                  Designed by{" "}
                  <a 
                    href="https://rootxwire.com" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="link text-body-3" 
                    style={{ color: 'white', fontWeight: '600', textDecoration: 'none' }}
                  >
                    Rootxwire
                  </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}