"use client";
import Image from "next/image";
import {BsFacebook, BsInstagram, BsTiktok, BsWhatsapp} from "react-icons/bs";
import {useEffect, useState} from "react";

export default function Footer() {
  const [scrollY, setScrollY] = useState(0);
  const currentYear = new Date().getFullYear();

  const handleScroll = () => {
    setScrollY(window.scrollY);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <>
      <footer className="w-full bg-main">
        <div className="py-5 space-y-10 lg:space-y-2 max-w-[1140px] mx-auto px-5 md:px-0 ">
          <hr className="border-white w-full" />
          <div className="grid grid-cols-1 md:grid-cols-6 gap-5 items-center py-0 md:py-5">
            <Image
              src="/alegria.png"
              alt="Logo Alegria"
              width={604}
              height={209}
              className="object-cover w-28 lg:w-[150px] mx-auto"
            />
            <div className="lg:col-span-2">
              <span className="text-white text-lg">
              Jl. Subak Sari No.77, Canggu, Kec.Kuta Utara, Kabupaten Badung, Bali 80361
              </span>
            </div>
            <div className="lg:col-span-2 flex flex-col text-white">
              <a
                href="https://wa.me/+6287861854989"
                target="_blank"
                className="text-lg"
              >
                Reservation: +62 878 6185 4989
              </a>
              <a
                href="mailto:reservation@balimanagement.villas"
                target="_blank"
                className="text-lg"
              >
                Email: reservation@balimanagement.villas
              </a>
            </div>
            <div className="lg:col-end-7 lg:text-right">
              <a
                href="https://goo.gl/maps/cjw6rMVvHoAX5mTo9"
                target="_blank"
                className="underline underline-offset-4 font-bold text-white text-lg"
              >
                Get directions
              </a>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-6 gap-5 items-center py-0 md:py-5">
            <div className="text-white text-lg">Follow us on</div>
            <div className="lg:col-span-2 flex flex-row gap-4">
              <a
                href="https://www.facebook.com/joyoflifebali/"
                target="_blank"
              >
                <div className="bg-white rounded-lg p-[10px] flex items-center">
                  <BsFacebook size={20} className="text-main" />
                </div>
              </a>
              <a
                href="https://www.instagram.com/alegriadelavida_bali/"
                target="_blank"
              >
                <div className="bg-white rounded-lg p-[10px] flex items-center">
                  <BsInstagram size={20} className="text-main" />
                </div>
              </a>
              <a
                href="https://www.tiktok.com/@alegria_delavida"
                target="_blank"
              >
                <div className="bg-white rounded-lg p-[10px] flex items-center">
                  <BsTiktok size={20} className="text-main" />
                </div>
              </a>
              <a
                href="https://api.whatsapp.com/send?phone=+6287861854989&text=Hi,%20I%20saw%20Villa%20Alegria%20from%20its%20website,%20and%20I%20would%20like%20to%20enquire%20about%20this%20villa."
                target="_blank"
              >
                <div className="bg-white rounded-lg p-[10px] flex items-center">
                  <BsWhatsapp size={20} className="text-main" />
                </div>
              </a>
            </div>
            <div className="lg:col-span-3 lg:text-right">
              <span className="text-white text-lg">
                © Copyright {currentYear} Villa Alegria De La Vida All Rights Reserved.
                <br className="hidden lg:block" /> Managed by{" "}
                <a href="https://balimanagement.villas" target="_blank">
                  Bali Management Villas
                </a>
              </span>
            </div>
          </div>
        </div>
      </footer>
      <div
        className={`${
          scrollY > 0 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
        } transition-all ease-in-out duration-500 transform fixed bottom-36 w-fit right-5 lg:right-10 z-10`}
      >
        <a
          href="https://api.whatsapp.com/send?phone=+6287861854989&text=Hi,%20I%20saw%20Villa%20Alegria%20from%20its%20website,%20and%20I%20would%20like%20to%20enquire%20about%20this%20villa."
          className="bg-main p-4 border border-white rounded-full flex items-center"
        >
          <BsWhatsapp size={30} className="text-white" />
        </a>
      </div>
    </>
  );
}