import Link from "next/link";
import { useEffect, useState } from "react";

export default function Footer() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsVisible(true);
    }, 450); // Delay to start the animation
  }, []);

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <footer
      className={`sticky- bottom-0 p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
    >
      <div className={`flex flex-col md:flex-row items-center justify-between`}>
        <div className={`flex-col items-center`}>
          <h1 className="md:text-xl font-bold">Thank You for Visiting</h1>
          <p className="md:mt-1 text-lg">
            Connect with me on social platforms:
          </p>
          <div className="flex justify-center items-center space-x-4 mt-4">
            <Link
              aria-label={"Dennis Github"}
              href="https://github.com/Denshooter"
              target="_blank"
            >
              <svg
                className="w-10 h-10"
                fill="currentColor"
                viewBox="0 0 24 24"
              >
                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
              </svg>
            </Link>
            <Link
              aria-label={"Dennis Linked In"}
              href="https://linkedin.com/in/dkonkol"
              target="_blank"
            >
              <svg
                className="w-10 h-10"
                fill="currentColor"
                viewBox="0 0 24 24"
              >
                <path d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z" />
              </svg>
            </Link>
          </div>
        </div>
        <div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
          <button
            onClick={() => scrollToSection("about")}
            className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition"
          >
            Back to Top
          </button>
        </div>
        <div className="flex-col">
          <div className="mt-4">
            <Link
              href="/privacy-policy"
              className="text-blue-800 transition-underline"
            >
              Privacy Policy
            </Link>
            <Link
              href="/legal-notice"
              className="ml-4 text-blue-800 transition-underline"
            >
              Legal Notice
            </Link>
          </div>

          <p className="md:mt-4">© Dennis Konkol 2025</p>
        </div>
      </div>
    </footer>
  );
}