import { useState } from 'react';
import { motion } from 'framer-motion';
import mushroomImg from '../assets/mushroom.png';
import SocietyTerminal from './SocietyTerminal';

const Hero = () => {
  const [showTerminal, setShowTerminal] = useState(false);

  const fadeInUp = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
  };

  const bounceIn = {
    hidden: { scale: 0, opacity: 0 },
    visible: { scale: 1, opacity: 1, transition: { type: "spring", bounce: 0.4, duration: 0.8 } }
  };

  const staggerContainer = {
    visible: { transition: { staggerChildren: 0.2 } }
  };

  return (
    <>
      <section className="min-h-screen flex items-center justify-center bg-dark-gradient relative overflow-hidden">
        <motion.div
          className="text-center z-10"
          initial="hidden"
          animate="visible"
          variants={staggerContainer}
        >
          {/* Mascot */}
          <motion.div
            className="mb-8"
            variants={bounceIn}
          >
            <img
              src={mushroomImg}
              alt="Mycelium Society Mascot"
              className="mx-auto max-w-xs"
              style={{ width: 'auto', height: 'auto', maxHeight: '300px' }}
            />
          </motion.div>

          {/* Main Title */}
          <motion.h1
            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight"
            variants={fadeInUp}
          >
            <span className="text-white">Welcome to</span>
            <br />
            <span className="text-white">Mycelium Society</span>
          </motion.h1>

          {/* Tagline */}
          <motion.p
            className="text-lg md:text-xl text-gray-300 mb-12 max-w-3xl mx-auto"
            variants={fadeInUp}
          >
            A community inspired by network state concepts, combining people,
            <br className="hidden sm:block" />
            technology, and governance for global collaboration.
          </motion.p>

          {/* Buttons */}
          <motion.div
            className="flex flex-col sm:flex-row gap-4 justify-center items-center"
            variants={fadeInUp}
          >
            <motion.button
              className="btn-primary animate-pulse-glow"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => setShowTerminal(true)}
            >
              > ENTER THE NETWORK
            </motion.button>
            <a href="https://docs.mycelium.tf" target="_blank" rel="noopener noreferrer">
              <motion.button
                className="btn-primary"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                > DOCS
              </motion.button>
            </a>
          </motion.div>
        </motion.div>

        {/* Background Effects */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-40 -right-40 w-80 h-80 bg-bright-cyan/5 rounded-full blur-3xl"></div>
          <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-cyan/5 rounded-full blur-3xl"></div>
        </div>
      </section>

      {showTerminal && (
        <SocietyTerminal
          showTerminal={showTerminal}
          setShowTerminal={setShowTerminal}
        />
      )}
    </>
  );
};

export default Hero;