"use client";
import React from "react";
import Image from "next/image";
import FooterSocials from "./FooterSocial";
import { footerLinks, navigationLinks } from "@/data/footer";

export default function Footer() {
  const scrollToTop = (event: any) => {
    event.preventDefault();
    window.scrollTo({
      top: 0,
      behavior: "smooth", // Linear easing replacement
    });
  };

  return (
    <>
      <div className="container position-relative">
        <div className="row pb-120 pb-sm-80 pb-xs-50">
          <div className="col-md-4 col-lg-3 text-gray mb-sm-50">
            <div className="mb-30">
              <Image
                src="/assets/images/demo-slick/logo-dark.webp"
                alt="Cochise Oncology Logo"
                width={126}
                height={56}
                className="light-mode-logo"
              />
              <Image
                src="/assets/images/demo-slick/logo-dark.webp"
                alt="Cochise Oncology Logo"
                width={126}
                height={56}
                className="dark-mode-logo"
              />
            </div>
          </div>
          <div className="col-md-7 offset-md-1 offset-lg-2">
            <div className="row mt-n30">
              {/* Footer Widget */}
              <div className="col-sm-4 mt-30">
                <h3 className="fw-title">Business Hours</h3>
                <ul className="fw-menu clearlist local-scroll">
                  <li>
                    <a className="#">Monday - Friday: 8am - 5pm</a>
                  </li>
                </ul>
              </div>
              {/* End Footer Widget */}
              {/* Footer Widget */}
              <div className="col-sm-4 mt-30">
                <h3 className="fw-title">Contact Us</h3>
                <ul className="fw-menu clearlist">
                  <FooterSocials />
                </ul>
              </div>
              {/* End Footer Widget */}
              {/* Footer Widget */}
              <div className="col-sm-4 mt-30">
                <h3 className="fw-title">Legal &amp; Press</h3>
                <ul className="fw-menu clearlist">
                  {footerLinks.map((elm: any, i: number) => (
                    <li key={i}>
                      <a href={elm.path}>{elm.name}</a>
                    </li>
                  ))}
                </ul>
              </div>
              {/* End Footer Widget */}
            </div>
          </div>
        </div>
        {/* Footer Text */}
        <div className="row text-gray">
          <div className="col-md-4 col-lg-3">
            <b>© {new Date().getFullYear()} All Rights Reserved</b>
          </div>
          <div className="col-md-7 offset-md-1 offset-lg-2 clearfix">
            {/* Back to Top Link */}
            <div className="local-scroll float-end mt-n20 mt-sm-10" onClick={scrollToTop}>
              <a href="#top" className="link-to-top color-light relative">
                <i className="mi-arrow-up size-24 absolute top-[34px] left-3" />
                <span className="visually-hidden">Scroll to top</span>
              </a>
            </div>
            {/* End Back to Top Link */}
          </div>
        </div>
        {/* End Footer Text */}
      </div>
    </>
  );
}