"use client";
import React from "react";
import Image from "next/image";
import { FaPhone, FaFax, FaFacebook, FaMapMarkerAlt, FaClock } from "react-icons/fa";

export default function Footer() {
  const scrollToTop = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    event.preventDefault();
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <div
      className="relative text-white py-10"
      style={{
        backgroundColor: "transparent",
        backgroundImage: "linear-gradient(172deg, #798D90 0%, #C48853 100%)",
      }}
    >
      <div className="container mx-auto flex flex-wrap justify-between items-start px-6">
        <div className="w-full md:w-1/4 mb-6 md:mb-0 flex flex-col items-start">
          <Image src="/assets/images/demo-slick/logo-dark.webp" alt="Cochise Oncology Logo" width={363} height={138} />
          <p className="text-sm mt-3">© {new Date().getFullYear()} All Rights Reserved</p>
          <a href="/privacy-policy" className="text-sm text-orange-300 font-semibold">
            Privacy Policy
          </a>
        </div>

        <div className="w-full md:w-1/3 mb-6 md:mb-0">
          <h3 className="text-lg font-semibold mb-4">Contact Us</h3>
          <ul className="space-y-4 border-gray-400 pl-0">
            <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
              <FaMapMarkerAlt className="text-2xl text-gray-300" />
              <div className="leading-tight">
                <a
                  href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-lg text-white"
                >
                  5151 E HIGHWAY 90
                </a>
                <br />
                <span className="text-sm text-gray-300">Sierra Vista, Arizona 85635</span>
              </div>
            </li>
            <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
              <FaPhone className="text-2xl text-gray-300" />
              <span className="text-lg">(520) 803-6644</span>
            </li>
            <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
              <FaFax className="text-2xl text-gray-300" />
              <span className="text-lg">Fax: (520) 459-3193</span>
            </li>
            <li className="flex items-center space-x-4">
              <FaFacebook className="text-2xl text-gray-300" />
              <a
                href="https://www.facebook.com/p/Cochise-Oncology-61556262839823"
                target="_blank"
                rel="noopener noreferrer"
                className="text-lg text-white"
              >
                Facebook
              </a>
            </li>
          </ul>
        </div>

        <div className="w-full md:w-1/4">
          <h3 className="text-lg font-semibold mb-4">Business Hours</h3>
          <div className="flex items-center space-x-2">
            <FaClock className="text-xl" />
            <span className="text-base font-medium">Monday - Friday: 8am - 5pm</span>
          </div>
        </div>
      </div>

      <div className="text-center mt-6">
        <div onClick={scrollToTop} className="cursor-pointer text-white font-semibold" aria-label="Scroll to top">
          Back to Top ↑
        </div>
      </div>
    </div>
  );
}