import React, { useEffect, useRef, useState } from "react"
import { Link } from "react-router-dom"
import Logo from "../../assets/pictures/Logo"


const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>

const Footer = () => {
  const [isVisible, setIsVisible] = useState(false)
  const footerRef = useRef(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting)
      },
      { threshold: 0.3 }
    )

    if (footerRef.current) {
      observer.observe(footerRef.current)
    }

    return () => {
      if (footerRef.current) {
        observer.unobserve(footerRef.current)
      }
    }
  }, [])

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" })
  }

  return (
    <footer
      ref={footerRef}
      className={`relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8 transition-all duration-700 ease-out ${
        isVisible ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-10"
      }`}
      style={{ transformOrigin: "bottom center" }}
    >
      <style>
        {`
          .footer-animate {
            transition: opacity 0.8s ease, transform 0.8s ease;
          }
        `}
      </style>

      <div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
        {/* Logó */}
        <div className="flex flex-col items-center footer-animate">
          <a
            href="/"
            className="transition-transform duration-500 hover:scale-105 hover:brightness-125"
          >
            <Logo size={100} />
          </a>
          <span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
        </div>

        {/* Oldalak */}
        <div className="flex flex-col gap-1 footer-animate">
          <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
            Oldalak
          </span>
          <a href="/" className="hover:underline hover:text-green-400 transition">Főoldal</a>
          <a href="/about" className="hover:underline hover:text-green-400 transition">
            Rólunk
          </a>
          <a href="/contact" className="hover:underline hover:text-green-400 transition">Kapcsolat</a>
        </div>

        {/* Közösség */}
        <div className="flex flex-col gap-1 footer-animate">
          <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
            Közösség
          </span>
          <a href="https://discord.gg/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">Discord</a>
          <a href="https://github.com/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">GitHub</a>
        </div>

        {/* Elérhetőség */}
        <div className="flex flex-col gap-1 footer-animate">
          <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
            Elérhetőség
          </span>
          <span className="opacity-80">Email: info@serpentrace.hu</span>
          <span className="opacity-80">Telefon: +36 30 123 4567</span>
        </div>
      </div>

      <div className="text-center mt-8 text-sm opacity-70 footer-animate">
        © {new Date().getFullYear()} SerpentRace. Minden jog fenntartva.
      </div>

      {/* Scroll to top */}
      {isVisible && (
        <button
          onClick={scrollToTop}
          className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg transition transform hover:scale-110"
          aria-label="Ugrás az oldal tetejére"
        >
          <ArrowUpIcon />
        </button>
      )}
    </footer>
  )
}

export default Footer
