import React, { useEffect, useRef, useState } from "react"
import Navbar from "../../components/Navbar/Navbar"
import Footer from "../../components/Footer/Footer"
import Background from "../../assets/backgrounds/Background.jsx"
import Walke from "../../assets/pictures/walke.JPG"
import Busi from "../../assets/pictures/busi.JPG"
import Gege from "../../assets/pictures/gege.JPG"
import Zsola from "../../assets/pictures/zsola.JPG"
import Donat from "../../assets/pictures/donat.JPG"
import Turo from "../../assets/pictures/turo.JPG"
import Piskor from "../../assets/pictures/piskor.JPG"

const About = () => {
  const [visible, setVisible] = useState(false)
  const sectionRef = useRef(null)

  const teamMembers = [
    {
      name: "Magda Donát",
      role: "Backend fejlesztő",
      photo: Donat,
    },
    {
      name: "Máté Gergely",
      role: "UI/UX designer",
      photo: Gege,
    },
    {
      name: "Walke Gábor",
      role: "UI/UX designer, Frontend fejlesztő",
      photo: Walke,
    },
    {
      name: "Piskor Barnabás",
      role: "Frontend fejlesztő",
      photo: Piskor,
    },
    {
      name: "Buús Levente",
      role: "UI/UX designer",
      photo: Busi,
    },
    {
      name: "Pintér Zsolt",
      role: "UI/UX designer",
      photo: Zsola,
    },
    {
      name: "Thuróczy Attila",
      role: "UI/UX designer",
      photo: Turo,
    },
  ]

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) setVisible(true)
      },
      { threshold: 0.3 }
    )
    if (sectionRef.current) observer.observe(sectionRef.current)
    return () => observer.disconnect()
  }, [])

  return (
    <div className="flex flex-col min-h-screen overflow-y-auto relative">

      {/* Háttér – fix pozíció, a teljes képernyőre */}
      <div className="fixed top-0 left-0 w-full h-full z-[-10]">
        <Background />
      </div>

      {/* Navbar fix */}
      <div className="fixed top-0 left-0 right-0 z-30">
        <Navbar />
      </div>

      {/* Tartalom */}
      <main className="flex-grow text-white px-6 pt-16 mt-0 mb-20">

        {/* Vissza gomb */}
        <div className="fixed top-4 left-4 z-50 group">
          <div className="absolute top-full mt-1 left-1/2 -translate-x-1/2 scale-0 group-hover:scale-100 transition transform bg-zinc-800 text-sm text-white px-3 py-1 rounded shadow-lg">
            Főoldalra
          </div>
        </div>

        <section
          ref={sectionRef}
          className={`max-w-5xl mx-auto transition-all duration-1000 ease-out ${
            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          {/* Rólunk cím */}
          <h1 className="mt-24 text-5xl font-extrabold text-green-300 mb-10 text-center tracking-wide drop-shadow-lg">
            <span className="inline-block animate-pulse mr-2"></span> Rólunk
          </h1>

          {/* Leírás */}
          <p className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto">
            Célunk, hogy egy innovatív, közösségorientált platformot építsünk, ahol a versenyzés, játék és technológia találkozik. Elhivatott csapatunk minden nap azon dolgozik, hogy élményt és értéket nyújtson a felhasználóinknak.
          </p>

          {/* Küldetésünk */}
          <div className="mt-12">
            <h2 className="text-2xl font-bold text-green-300 mb-4">Küldetésünk</h2>
            <div className="grid md:grid-cols-3 gap-6">
              <div className="bg-zinc-800 rounded-xl p-6 shadow-lg hover:scale-105 transition">
                <h3 className="text-xl font-semibold mb-2">Innováció</h3>
                <p className="text-zinc-300">Folyamatosan fejlesztjük rendszereinket a legmodernebb technológiákkal.</p>
              </div>
              <div className="bg-zinc-800 rounded-xl p-6 shadow-lg hover:scale-105 transition">
                <h3 className="text-xl font-semibold mb-2">Közösség</h3>
                <p className="text-zinc-300">Fontos számunkra, hogy egy összetartó, aktív közösséget építsünk ki.</p>
              </div>
              <div className="bg-zinc-800 rounded-xl p-6 shadow-lg hover:scale-105 transition">
                <h3 className="text-xl font-semibold mb-2">Minőség</h3>
                <p className="text-zinc-300">Minden részletre figyelünk a felhasználói élmény és biztonság érdekében.</p>
              </div>
            </div>
          </div>

          {/* Csapat */}
          <div className="mt-16">
            <h2 className="text-2xl font-bold text-green-300 mb-6">Csapatunk</h2>
            <div className="grid md:grid-cols-3 gap-8">
              {teamMembers.map((member, i) => {
                const isLast = i === teamMembers.length - 1
                const itemsInLastRow = teamMembers.length % 3
                const shouldCenter = itemsInLastRow === 1 && isLast

                return (
                  <div
                    key={i}
                    className={`flex flex-col items-center text-center bg-zinc-800 p-6 rounded-xl shadow-lg hover:shadow-green-400/20 hover:scale-105 transition ${
                      shouldCenter ? "md:col-start-2" : ""
                    }`}
                  >
                    <img
                      src={member.photo}
                      alt={member.name}
                      className="w-24 h-24 rounded-full object-cover mb-4 border-4 border-green-400"
                    />
                    <h4 className="text-lg font-bold">{member.name}</h4>
                    <p className="text-zinc-400">{member.role}</p>
                  </div>
                )
              })}
            </div>
          </div>
        </section>
      </main>

      {/* Footer (nem scrollozható alá) */}
      <footer className="mt-auto">
        <Footer />
      </footer>
    </div>
  )
}

export default About