import React, { useState, useEffect } from 'react';
import ExclusiveLaunchPopup from './ExclusiveLaunchPopup';

interface HeroSectionProps {
  onJoinWaitlist: () => void;
}

const HeroSection: React.FC<HeroSectionProps> = ({ onJoinWaitlist }) => {
  const [remainingSpots, setRemainingSpots] = useState(892);
  
  // Simulate live counter decreasing
  useEffect(() => {
    const interval = setInterval(() => {
      setRemainingSpots(prev => {
        if (prev <= 0) return 0;
        const shouldDecrease = Math.random() < 0.08;
        if (shouldDecrease) {
          const decrease = Math.floor(Math.random() * 2) + 1;
          return Math.max(0, prev - decrease);
        }
        return prev;
      });
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  return (
    <section className="relative min-h-screen overflow-hidden">
      <ExclusiveLaunchPopup remainingSpots={remainingSpots} onJoinWaitlist={onJoinWaitlist} />
      
      <div className="relative z-10 container mx-auto px-6 py-16">
        {/* Main Hero Content */}
        <div className="flex flex-col lg:flex-row items-center justify-between min-h-[calc(100vh-200px)] gap-16">
          {/* Left Content */}
          <div className="flex-1 text-center lg:text-left">
            <div className="mb-8">
              <h1 className="font-luxury-serif font-extralight text-6xl md:text-7xl lg:text-8xl xl:text-9xl leading-none mb-6">
                <span className="block text-luxury-gold tracking-tight">The Future</span>
                <span className="block text-cream/90 tracking-tight">of Business</span>
                <span className="block text-luxury-gold tracking-tight">Excellence</span>
              </h1>
              
              <div className="w-24 h-px bg-gradient-to-r from-luxury-gold to-transparent mb-8"></div>
              
              <p className="text-cream/80 font-elegant-sans text-xl md:text-2xl lg:text-3xl font-light leading-relaxed max-w-2xl">
                Where sophistication meets innovation in 
                <span className="text-luxury-gold font-medium"> enterprise management</span>
              </p>
            </div>

            {/* Elegant CTA Section */}
            <div className="space-y-6">
              <div className="flex flex-col sm:flex-row gap-4 items-center lg:items-start lg:justify-start justify-center">
                <button 
                  onClick={onJoinWaitlist}
                  className="group relative bg-luxury-gold hover:bg-luxury-gold/90 text-deep-forest font-elegant-sans font-semibold text-lg px-12 py-4 rounded-none border-0 transition-all duration-500 overflow-hidden min-w-[220px]"
                >
                  <span className="relative z-10">Join the Waitlist</span>
                  <div className="absolute inset-0 bg-cream transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></div>
                </button>
                
                <button className="group border border-luxury-gold/50 text-luxury-gold hover:bg-luxury-gold/10 font-elegant-sans font-medium text-lg px-12 py-4 rounded-none transition-all duration-300 min-w-[220px]">
                  <span className="group-hover:tracking-wider transition-all duration-300">Explore Platform</span>
                </button>
              </div>
              
              <div className="flex items-center justify-center lg:justify-start space-x-6">
                <div className="text-center">
                  <div className="text-luxury-gold font-luxury-serif text-2xl font-bold">500+</div>
                  <div className="text-cream/60 font-elegant-sans text-xs uppercase tracking-widest">Enterprises</div>
                </div>
                <div className="w-px h-8 bg-luxury-gold/30"></div>
                <div className="text-center">
                  <div className="text-luxury-gold font-luxury-serif text-2xl font-bold">99.9%</div>
                  <div className="text-cream/60 font-elegant-sans text-xs uppercase tracking-widest">Uptime</div>
                </div>
                <div className="w-px h-8 bg-luxury-gold/30"></div>
                <div className="text-center">
                  <div className="text-luxury-gold font-luxury-serif text-2xl font-bold">24/7</div>
                  <div className="text-cream/60 font-elegant-sans text-xs uppercase tracking-widest">Support</div>
                </div>
              </div>
            </div>
          </div>

          {/* Right Content - Premium Visual */}
          <div className="flex-1 relative">
            <div className="relative max-w-lg mx-auto">
              {/* Main Card */}
              <div className="relative bg-gradient-to-br from-deep-forest/40 to-rich-brown/20 backdrop-blur-2xl border border-luxury-gold/20 rounded-3xl px-12 py-6 shadow-2xl">
                <div className="text-center">
                  {/* Premium Icon */}
                  {/* <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-luxury-gold/20 to-luxury-gold/10 rounded-2xl border border-luxury-gold/30"> */}
                    <img 
                      src="/assets/Dark-Icon-cropped.svg" 
                      alt="Pennyzo Icon" 
                      className="w-60 h-60 mx-auto -mb-16"
                    />
                  {/* </div> */}
                  
                  {/* Premium Text */}
                  <div className="text-center">
                    <h3 className="text-luxury-gold font-luxury-serif text-3xl font-bold mb-4">
                      Executive Suite
                    </h3>
                    <p className="text-cream/70 font-elegant-sans text-base leading-relaxed mb-6">
                      Experience the pinnacle of business management with our meticulously crafted platform designed for visionary leaders.
                    </p>
                  </div>
                  
                  {/* Features List */}
                  <div className="space-y-3 text-center mt-4">
                    {['Advanced Analytics Dashboard', 'AI-Powered Insights', 'White-Glove Support'].map((feature, index) => (
                      <div key={index} className="flex items-center justify-center space-x-3">
                        <svg className="w-4 h-4 text-luxury-gold" fill="currentColor" viewBox="0 0 24 24">
                          <path d="M6 3h12l4 6-10 12L2 9l4-6z" />
                          <path d="M6 3l6 6 6-6M2 9l10 3 10-3" fillOpacity="0.7" />
                        </svg>
                        <span className="text-cream/80 font-elegant-sans text-sm">{feature}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Elegant Scroll Indicator */}
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
          <div className="flex flex-col items-center space-y-2">
            <div className="text-cream/40 font-elegant-sans text-xs uppercase tracking-widest">Explore</div>
            <div className="w-px h-16 bg-gradient-to-b from-luxury-gold/50 to-transparent animate-pulse"></div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeroSection;