import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { ChevronDown } from 'lucide-react';

export default function Hero() {
  const [isIdle, setIsIdle] = useState(false);

  useEffect(() => {
    let timeout: NodeJS.Timeout;

    const resetIdleTimer = () => {
      setIsIdle(false);
      clearTimeout(timeout);
      timeout = setTimeout(() => setIsIdle(true), 5000);
    };

    // Initialize timer
    resetIdleTimer();

    // Event listeners to detect activity
    window.addEventListener('mousemove', resetIdleTimer);
    window.addEventListener('keydown', resetIdleTimer);
    window.addEventListener('scroll', resetIdleTimer);
    window.addEventListener('click', resetIdleTimer);
    window.addEventListener('touchstart', resetIdleTimer);

    return () => {
      clearTimeout(timeout);
      window.removeEventListener('mousemove', resetIdleTimer);
      window.removeEventListener('keydown', resetIdleTimer);
      window.removeEventListener('scroll', resetIdleTimer);
      window.removeEventListener('click', resetIdleTimer);
      window.removeEventListener('touchstart', resetIdleTimer);
    };
  }, []);

  return (
    <section className="relative h-screen flex items-center justify-center">
      {/* Background Video */}
      <div className="fixed inset-0 z-[-1] bg-black">
        <div className="absolute inset-0 bg-black/30 z-10" />
        <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-black/60 z-10" />
        <iframe
          className="absolute top-1/2 left-1/2 w-[100vw] h-[56.25vw] min-h-[100vh] min-w-[177.77vh] -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-90"
          src="https://www.youtube.com/embed/EnM-L4ogbt8?autoplay=1&mute=1&controls=0&loop=1&playlist=EnM-L4ogbt8&showinfo=0&rel=0&modestbranding=1&playsinline=1&vq=hd1080&start=30"
          title="Legacy Kairos Background"
          frameBorder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        />
      </div>

      {/* Content */}
      <div className="container mx-auto px-4 relative z-20 text-center text-white mt-24">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1.5, ease: "easeOut" }}
          className="max-w-5xl mx-auto"
        >
          <motion.div 
            animate={{ opacity: isIdle ? 0 : 1 }}
            transition={{ duration: 0.8 }}
            className="flex flex-col items-center"
          >
            <motion.div 
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 2, delay: 0.5 }}
              className="flex items-center justify-center gap-4 mb-8"
            >
              <div className="h-[1px] w-12 bg-primary/60" />
              <span className="text-xs md:text-sm font-medium tracking-[0.3em] uppercase text-white/90">
                Premium Residences in Rahatani, Pune
              </span>
              <div className="h-[1px] w-12 bg-primary/60" />
            </motion.div>
            
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-serif mb-6 leading-[1.1] text-white drop-shadow-xl text-center">
              4x Lifestyle At Legacy Kairos<br />
              <span className="text-primary italic font-light">Endless Happiness.</span>
            </h1>
            
            <p className="text-lg md:text-xl text-white/90 mb-10 max-w-2xl mx-auto font-light leading-relaxed drop-shadow-md text-center">
              A place to live that combines comfort, space, luxury, and connectivity.
            </p>
            
            <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
              <a href="#overview" className="group relative inline-flex items-center justify-center px-10 py-4 text-sm tracking-widest uppercase font-medium text-white transition-all duration-500 bg-transparent border border-white/40 hover:border-white hover:bg-white/10 overflow-hidden rounded-none">
                <span className="relative z-10 flex items-center gap-3">
                  Explore Project
                  <ChevronDown className="group-hover:translate-y-1 transition-transform duration-300" size={16} />
                </span>
              </a>
            </div>
          </motion.div>
        </motion.div>
      </div>

    </section>
  );
}
