import React, { useEffect, useRef, useState } from "react"
import Logo from "../../assets/pictures/Logo"
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"

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

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

  // ✅ Használjuk a navigációs függvényeket
  const { goLanding, goAbout, goContacts } = HandleNavigate()

  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-zinc-400 border-t-2 border-zinc-800 mt-auto py-6 md:py-8"
      style={{ transformOrigin: "bottom center" }}
    >
      <div className="max-w-6xl mx-auto px-4">
        {/* Mobile: Logo középen, majd grid alatta */}
        <div className="flex flex-col items-center md:hidden gap-6 mb-6">
          <div className="flex flex-col items-center">
            <button
              onClick={goLanding}
              className="hover:scale-105 hover:brightness-110 transition-transform"
            >
              <Logo size={80} />
            </button>
            <button
              onClick={goLanding}
              className="font-extrabold text-lg mt-2 tracking-wide text-white hover:text-green-500 transition-colors"
            >
              SerpentRace
            </button>
          </div>
        </div>

        {/* Mobile: 2 oszlopos grid */}
        <div className="grid grid-cols-2 gap-6 md:hidden mb-6">
          {/* Oldalak */}
          <div className="flex flex-col gap-1">
            <span className="text-base font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
              Oldalak
            </span>
            <button
              onClick={goLanding}
              className="text-left text-sm hover:underline hover:text-green-500 transition-colors"
            >
              Főoldal
            </button>
            <button
              onClick={goAbout}
              className="text-left text-sm hover:underline hover:text-green-500 transition-colors"
            >
              Rólunk
            </button>
          </div>

          {/* Közösség */}
          <div className="flex flex-col gap-1">
            <span className="text-base font-semibold text-green-600 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="text-sm hover:underline hover:text-green-500"
            >
              Discord
            </a>
            <a
              href="https://github.com/"
              target="_blank"
              rel="noopener noreferrer"
              className="text-sm hover:underline hover:text-green-500"
            >
              GitHub
            </a>
          </div>
        </div>

        {/* Mobile: Elérhetőség teljes széles */}
        <div className="flex flex-col gap-1 md:hidden mb-6">
          <span className="text-base font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
            Elérhetőség
          </span>
          <span className="text-sm opacity-85">Email: info@serpentrace.hu</span>
          <span className="text-sm opacity-85">Telefon: +36 30 123 4567</span>
        </div>

        {/* Desktop: Original flex layout */}
        <div className="hidden md:flex flex-wrap justify-between items-start gap-8">
          {/* Logó */}
          <div className="flex flex-col items-center">
            <button
              onClick={goLanding}
              className="hover:scale-105 hover:brightness-110 transition-transform"
            >
              <Logo size={100} />
            </button>
            <button
              onClick={goLanding}
              className="font-extrabold text-xl mt-2 tracking-wide text-white hover:text-green-500 transition-colors"
            >
              SerpentRace
            </button>
          </div>

          {/* Oldalak */}
          <div className="flex flex-col gap-1">
            <span className="text-lg font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
              Oldalak
            </span>
            <button
              onClick={goLanding}
              className="text-left hover:underline hover:text-green-500 transition-colors"
            >
              Főoldal
            </button>
            <button
              onClick={goAbout}
              className="text-left hover:underline hover:text-green-500 transition-colors"
            >
              Rólunk
            </button>
          </div>

          {/* Közösség */}
          <div className="flex flex-col gap-1">
            <span className="text-lg font-semibold text-green-600 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-500"
            >
              Discord
            </a>
            <a
              href="https://github.com/"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:underline hover:text-green-500"
            >
              GitHub
            </a>
          </div>

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

      <div className="text-center mt-8 text-sm opacity-70">
        © {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 hover:scale-110 transition-transform"
          aria-label="Ugrás az oldal tetejére"
        >
          <ArrowUpIcon />
        </button>
      )}
    </footer>
  )
}

export default Footer