import React, { useEffect, useRef, useState } from "react"
import Navbar from "../../components/Navbar/Navbar.jsx"
import Footer from "../../components/Footer/Footer.jsx"
import Background from "../../assets/backgrounds/Background.jsx"
import {
  FaBuilding,
  FaEnvelope,
  FaHandshake,
  FaPalette,
  FaTags,
  FaUserCheck,
  FaDollarSign,
  FaChartLine,
  FaVideo,
  FaHandsHelping,
  FaTrophy,
  FaChartBar,
  FaUsers,
  FaHeadset,
} from "react-icons/fa"

const Card = ({ icon, label, description, targetId, className }) => {
  const handleClick = () => {
    const section = document.getElementById(targetId)
    if (section) {
      section.scrollIntoView({ behavior: "smooth" })
    }
  }

  return (
    <div
      onClick={handleClick}
      className={`cursor-pointer hover:scale-105 transition-all duration-300 border border-gray-400 shadow-lg rounded-2xl p-8 w-72 text-center animate-fadeInUp ${className}`}
    >
      <div className="text-5xl mb-4 flex justify-center">{icon}</div>
      <h3 className="text-2xl font-bold mb-2">{label}</h3>
      <p className="text-white/90 text-sm">{description}</p>
    </div>
  )
}

const SectionContainer = ({ id, title, children }) => {
  return (
    <section
      id={id}
      className="mt-20 mb-28 px-4 md:px-0 opacity-100 animate-fadeInUp"
    >
      <div className="text-center mb-12">
        <h2 className="text-4xl font-bold border-b-4 inline-block border-emerald-400 pb-2 text-white">
          {title}
        </h2>
      </div>
      {children}
    </section>
  )
}

const CompanyHub = () => {

  const [visible, setVisible] = useState(false)
  const sectionRef = useRef(null)
  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=" relative min-h-screen text-white">
      {/* Background fixed behind everything */}
      <div className="fixed inset-0 -z-10">
        <Background />
      </div>

      <div className="relative z-10 flex flex-col min-h-screen">
        <Navbar />

        <main className="flex-grow relative px-4 py-8 md:px-12 md:py-16 overflow-y-auto scroll-smooth">
          <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"
          }`}
        >
          <div className="flex justify-center gap-6 mt-8 flex-wrap">
            <Card
              icon={<FaBuilding />}
              label="Mit nyújtunk"
              description="Játékosított tanulási platform cégeknek."
              targetId="intro"
              className="bg-gradient-to-br from-pink-500 via-purple-600 to-purple-800"
            />
            <Card
              icon={<FaEnvelope />}
              label="Kapcsolat"
              description="Lépj kapcsolatba velünk vagy kérj ajánlatot!"
              targetId="contact"
              className="bg-gradient-to-br from-blue-700 to-blue-500"
            />
            <Card
              icon={<FaHandshake />}
              label="Csatlakozás"
              description="Legyél partnerünk, és fejlődj velünk!"
              targetId="join"
              className="bg-gradient-to-br from-green-700 to-green-500"
            />
          </div>

          {/* Mit nyújtunk */}
          <SectionContainer id="intro" title="Mit nyújtunk cégeknek">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
              {/* Egyénre szabás */}
              <div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
                <h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
                  <FaPalette className="text-4xl" />
                  Egyénre szabás
                </h3>
                <ul className="list-disc ml-6 space-y-4 text-white/90 text-lg">
                  <li className="flex items-center gap-4">
                    <FaUserCheck className="text-green-400 text-2xl" />
                    Testreszabható design és színek
                  </li>
                  <li className="flex items-center gap-4">
                    <FaTrophy className="text-yellow-400 text-2xl" />
                    Egyedi badge és jutalmazási rendszer
                  </li>
                  <li className="flex items-center gap-4">
                    <FaChartBar className="text-blue-400 text-2xl" />
                    Fejlődési útvonalak
                  </li>
                </ul>
              </div>

              {/* Árazás */}
              <div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
                <h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
                  <FaDollarSign className="text-4xl" />
                  Árazás
                </h3>
                <ul className="list-disc ml-6 space-y-4 text-white/90 text-lg">
                  <li className="flex items-center gap-4">
                    <FaUsers className="text-purple-400 text-2xl" />
                    Kedvezményes csomagok KKV-knak
                  </li>
                  <li className="flex items-center gap-4">
                    <FaChartLine className="text-indigo-400 text-2xl" />
                    Testreszabott megoldások
                  </li>
                  <li className="flex items-center gap-4">
                    <FaTags className="text-pink-400 text-2xl" />
                    Nincs rejtett költség
                  </li>
                </ul>
              </div>

              {/* Demó videó */}
              <div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
                <h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
                  <FaVideo className="text-4xl" />
                  Csapatunk videó
                </h3>
                <video controls className="w-full rounded-xl shadow-xl">
                  <source src="/demo.mp4" type="video/mp4" />
                  A böngésződ nem támogatja a videó lejátszását.
                </video>
              </div>
            </div>
          </SectionContainer>

            {/* Contact + Join Section */}
            <section className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto mt-20 mb-28 px-4 md:px-0">
              {/* Contact */}
              <div
                id="contact"
                className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
              >
                <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
                  Kapcsolatfelvétel cégeknek
                </h2>
                <form className="grid gap-6 md:grid-cols-2">
                  <input
                    type="text"
                    placeholder="Cég neve"
                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
                  />
                  <input
                    type="email"
                    placeholder="Email"
                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 md:col-span-1"
                  />
                  <textarea
                    placeholder="Üzenet"
                    rows="6"
                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
                  />
                  <button
                    type="submit"
                    className="bg-emerald-500 hover:bg-emerald-400 text-white px-8 py-4 rounded-lg font-bold col-span-2 md:col-span-1 transition"
                  >
                    Küldés
                  </button>
                </form>
              </div>

              {/* Join */}
              <div
                id="join"
                className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
              >
                <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
                  Csatlakozz partnerként
                </h2>
                <ul className="list-disc space-y-4 ml-8 text-base text-white/90">
                  <li className="flex gap-3 items-center">
                    <FaHandsHelping className="text-green-400 text-xl flex-shrink-0" />
                    Gamification a vállalati kultúrában
                  </li>
                  <li className="flex gap-3 items-center">
                    <FaChartBar className="text-blue-400 text-xl flex-shrink-0" />
                    Teljesítménymérés játékosan
                  </li>
                  <li className="flex gap-3 items-center">
                    <FaUserCheck className="text-yellow-400 text-xl flex-shrink-0" />
                    Személyre szabott riportok
                  </li>
                  <li className="flex gap-3 items-center">
                    <FaHeadset className="text-pink-400 text-xl flex-shrink-0" />
                    Dedikált ügyfélszolgálat
                  </li>
                </ul>
              </div>
            </section>
          </section>
        </main>

        <Footer />
      </div>
    </div>
  )
}

export default CompanyHub