import Image from "next/image";
import Text from "../text";
import {
  FaFacebookF,
  FaTwitter,
  FaLinkedinIn,
  FaTelegramPlane,
  FaPhone,
  FaInstagram,
  FaTelegram,
} from "react-icons/fa";
import { Ekxkavator_vektor, logoImg } from "@/assets";
import { FaLocationDot } from "react-icons/fa6";

export default function Footer() {
  return (
    <div dir="ltr" className="bg-primary">
      <div className="max-w-[1200px] w-full mx-auto pt-10 ">
        <div className="flex items-start justify-around">
          <div>
            {/* logo */}
            <div className="flex items-center gap-4">
              <Image src={logoImg} alt="logo image" width={100} height={100} />
              <p className="text-white text-2xl font-bold">SPES-TEXNIKA</p>
            </div>
            <div className="leading-[28px] text-white text-xl max-w-[430px] w-full mt-8">
              <Text txt="footer-p" />
            </div>
            <div className="flex flex-col items-start gap-4 mt-10 ">
              <div className="text-white text-xl font-semibold">
                <Text txt="subscribe" />
              </div>
              <div className="  flex items-center justify-center gap-2">
                <a
                  href=""
                  className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
                >
                  <FaFacebookF />
                </a>
                <a
                  href=""
                  className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
                >
                  <FaTwitter />
                </a>
                <a
                  href=""
                  className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
                >
                  <FaLinkedinIn />
                </a>
                <a
                  href=""
                  className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
                >
                  <FaTelegramPlane />
                </a>
              </div>
            </div>
          </div>

          <div className="flex flex-col gap-5">
            <div className="text-white text-2xl font-bold">
              <Text txt="links" />
            </div>
            <div className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
              <span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span>
              <Text txt="products" />
            </div>
            <div className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
              <span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span>
              <Text txt="news" />
            </div>
            <div className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
              <span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span>
              <Text txt="contact" />
            </div>
          </div>

          <div className="flex flex-col justify-start">
            <div className="text-white text-2xl font-bold">
              <Text txt="contact-info" />
            </div>
            <div className="flex items-center gap-4 my-3">
              <span className="bg-secondary p-3 text-xl text-white ">
                <FaPhone />
              </span>
              <div className="flex flex-col gap-2">
                <p className="hover:cursor-pointer hover:text-secondary text-white">
                  +998 33 252 00 00
                </p>
                <p className="hover:cursor-pointer hover:text-secondary text-white">
                  +998 33 805 55 55
                </p>
              </div>
            </div>
            <div className="flex items-center gap-4 my-3">
              <span className="bg-secondary p-3 text-xl text-white ">
                <FaLocationDot />
              </span>
              <div className="flex flex-col gap-2">
                <p className="hover:cursor-pointer hover:text-secondary text-white">
                  Yakkasaroy,
                </p>
                <p className="hover:cursor-pointer hover:text-secondary text-white">
                  Toshkent
                </p>
              </div>
            </div>
          </div>
            <div className="group flex flex-col items-end justify-end pt-15">
            <div className="group relative">
              <div
                className="
                    flex gap-1 items-center text-white text-xl
                    opacity-0 translate-x-8 pointer-events-none
                    group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto
                    transition-all duration-1000 ease-in-out delay-800 hover:cursor-pointer
                    "
              >
                <p className="bg-[#0e76a8] p-2 rounded-[8px]">Telegram</p>
                <span className="rounded-full p-2 bg-[#0e76a8] ml-2">
                  <FaTelegram />
                </span>
              </div>
            </div>

            <div className="group relative my-2 ">
              <div
                className="
                    flex gap-1 items-center text-white text-xl
                    opacity-0 translate-x-6 pointer-events-none
                    group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto
                    transition-all duration-500 ease-in-out delay-600 hover:cursor-pointer
                    "
              >
                <p className="bg-[#00900c] p-2 rounded-[8px] bg-linear-to-tr from-[#feda75] via-[#cc2980] to-[#9a2eba] ">
                  Instagram
                </p>
                <span className="bg-linear-to-tr from-[#feda75] via-[#cc2980] to-[#9a2eba] rounded-[50%] p-2 ">
                  <FaInstagram />
                </span>
              </div>
            </div>

            <div className="group relative">
              <div
                className="
                    flex gap-1 items-center text-white text-xl
                    opacity-0 translate-x-2 pointer-events-none
                    group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto
                    transition-all duration-100 ease-in-out delay-200 hover:cursor-pointer
                    "
              >
                <p className="bg-[#00900c] p-2 rounded-[8px]">Phone</p>
                <span className="rounded-[50%] p-2 bg-[#00900c] ">
                  <FaPhone />
                </span>
              </div>
            </div>
            <Image
              src={Ekxkavator_vektor}
              width={90}
              height={90}
              className="mt-3 hover:cursor-pointer icon_animation rounded-[50%] object-cover"
              alt="icon image"
            />
            </div>
        </div>
      </div>

      <div className=" py-5 text-white border-t-[1px] text-center border-gray-500 mt-20">
        Ismoiljon Mirabdullayev © 2025. All rights reserved.
      </div>
    </div>
  );
}