import React from "react"
import SerpentRaceAnimation from "../../assets/SerpentRace_Animation/SerpentRace_Animation.jsx"
import LogoCard from "../../assets/pictures/LogoCard.jsx"
import logoImg from "../../assets/pictures/Logo.png"
import ButtonGreen from "../Buttons/ButtonGreen.jsx"
import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
import { motion } from "framer-motion"

const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
  return (
    <div className="w-full">
      {/* Hero Section */}
      <motion.section
        className="min-h-[80vh] flex flex-col items-center justify-center text-center px-4 py-20"
        initial={{ opacity: 0, y: 40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
      >
        <div className="max-w-4xl mx-auto">
          {/* Animált logo és cím */}
          <div className="mb-8">
            <SerpentRaceAnimation sizePercentage={70} />
          </div>

          <motion.h1
            className="text-3xl md:text-5xl font-bold text-white mb-4 leading-tight"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.4 }}
          >
            A társasjáték, ami <span className="text-emerald-400">összeköt</span>
          </motion.h1>

          <motion.p
            className="text-lg md:text-xl text-gray-300 mb-4 max-w-3xl mx-auto leading-relaxed"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.6 }}
          >
            A SerpentRace egy társasjáték, ahol új barátokra lelhetsz, közösséget építhetsz és tanulhatsz –
            mindezt szórakozva!
          </motion.p>
          <motion.div
            className="text-xl md:text-2xl font-bold text-emerald-400 mb-10"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.8 }}
          >
            WE ARE READY, ARE YOU?
          </motion.div>

          <motion.div
            className="flex flex-col sm:flex-row gap-4 justify-center items-center"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 1 }}
          >
            <ButtonGreen text="Bejelntekezés" onClick={onNavigateToPlay} width="w-60" />
            <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
          </motion.div>
        </div>
      </motion.section>

      {/* Features Section */}
      <motion.section
        className="py-20 px-4"
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true, amount: 0.2 }}
        transition={{ duration: 0.8, delay: 0.2 }}
      >
        <div className="max-w-6xl mx-auto">
          <motion.h2
            className="text-2xl md:text-3xl font-bold text-white text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, delay: 0.2 }}
          >
            Miért a SerpentRace a legjobb választás?
          </motion.h2>

          <div className="grid md:grid-cols-3 gap-8">
            {/* Feature 1 */}
            <motion.div
              className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.7, delay: 0.3 }}
            >
              <div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
                <FaUsers className="w-8 h-8 text-white" />
              </div>
              <h3 className="text-lg font-semibold text-white mb-2">Közösségi élmény</h3>
              <p className="text-gray-300 text-sm">
                Ismerkedj, nevess, tanulj! A SerpentRace összehozza a társaságot, legyen szó baráti
                összejövetelről vagy csapatépítésről.
              </p>
            </motion.div>

            {/* Feature 2 */}
            <motion.div
              className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.7, delay: 0.5 }}
            >
              <div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
                <FaPaintBrush className="w-8 h-8 text-white" />
              </div>
              <h3 className="text-lg font-semibold text-white mb-2">Személyre szabható</h3>
              <p className="text-gray-300 text-sm">
                Kérdéskártyák, szabályok, design – minden a te igényeidhez igazítható, akár céges brandinggel
                is!
              </p>
            </motion.div>

            {/* Feature 3 */}
            <motion.div
              className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.7, delay: 0.7 }}
            >
              <div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
                <FaHeadset className="w-8 h-8 text-white" />
              </div>
              <h3 className="text-lg font-semibold text-white mb-2">Folyamatos támogatás</h3>
              <p className="text-gray-300 text-sm">
                Gyors, segítőkész ügyfélszolgálat – ha bármilyen kérdésed vagy problémád van, mindig
                számíthatsz ránk!
              </p>
            </motion.div>
          </div>
        </div>
      </motion.section>

      {/* Call to Action Section */}
      <motion.section
        className="py-20 px-4"
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.2 }}
        transition={{ duration: 0.8, delay: 0.2 }}
      >
        <div className="max-w-4xl mx-auto text-center">
          <motion.div
            className="bg-gradient-to-r from-emerald-500/20 to-green-500/20 backdrop-blur-lg rounded-3xl p-12"
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, delay: 0.3 }}
          >
            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
              Próbáld ki te is a SerpentRace-t!
            </h2>

            <p className="text-lg text-gray-300 mb-6">
              Legyél részese egy új közösségi élménynek, vagy rendeld meg saját, személyre szabott
              társasjátékodat – mi mindenben segítünk!
            </p>

            <ButtonGreen
              text="Kapcsolatfelvétel"
              onClick={onNavigateToAuth}
              className="px-12 py-4 text-xl font-bold"
            />
          </motion.div>
        </div>
      </motion.section>
    </div>
  )
}

export default LandingPage