import React from "react"
import Navbar from "../../components/Navbar/Navbar.jsx"
import Footer from "../../components/Footer/Footer.jsx"
import Background from "../../assets/backgrounds/Background"
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 = () => {
  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">
          <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>
        </main>

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

export default CompanyHub
