import React, { useState, useEffect, useCallback } from 'react';
import { 
  ChevronRight, 
  ChevronLeft, 
  Sparkles,
  Mail,
  ArrowRight,
  ShieldCheck,
  Brain,
  Zap,
  Globe,
  Focus
} from 'lucide-react';

const App = () => {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [direction, setDirection] = useState(1); // 1 for next, -1 for prev
  const [isAnimating, setIsAnimating] = useState(false);

  const slides = [
    {
      id: 'hero',
      tag: "2026 Global IP Brief",
      title: "Evolution isn't programmed.",
      subtitle: "It is felt.",
      description: "A decade-long universe built on emotional intelligence. A Mother-Daughter led Media House bridging the gap between digital provenance and global wellness.",
      image: "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?auto=format&fit=crop&q=80&w=2070",
      accent: "from-purple-600/20 to-transparent",
      icon: <Sparkles className="text-purple-400" />
    },
    {
      id: 'identity',
      tag: "Our Identity",
      title: "Neurodiverse & Purpose-Led",
      subtitle: "Representation Matters.",
      description: "As a neurodiverse-led team, we design IP that speaks to the sensory and emotional needs of a modern global audience. We don't just create characters; we create companions.",
      image: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&q=80&w=1974",
      accent: "from-blue-600/20 to-transparent",
      icon: <Brain className="text-blue-400" />
    },
    {
      id: 'traction',
      tag: "Proof of Concept",
      title: "Beyond the Screen",
      subtitle: "Global Visibility & Validation.",
      description: "From Times Square displays to global speaking tours and a monetized YouTube/Podcast presence focused on guided sleep and anxiety relief.",
      image: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&q=80&w=2144",
      accent: "from-cyan-600/20 to-transparent",
      icon: <Globe className="text-cyan-400" />
    },
    {
      id: 'utility',
      tag: "Core Utility",
      title: "The Wellness Engine",
      subtitle: "Sleep & Emotional Health.",
      description: "Our 'Guided Sleep Meditations' narrated by Jon Lennox turn character lore into actual health utility, creating a deep, daily bond with our audience.",
      image: "https://images.unsplash.com/photo-1531315630201-bb15abeb1653?auto=format&fit=crop&q=80&w=1935",
      accent: "from-indigo-600/20 to-transparent",
      icon: <Focus className="text-indigo-400" />
    },
    {
      id: 'legal',
      tag: "Licensing Ready",
      title: "The Legal Moat",
      subtitle: "Ready for Global Export.",
      description: "Fully Trademarked and Copyrighted. Our Naming Ceremonies and 'Shapeshifter' evolution mechanics are protected assets ready for master-toy and lifestyle partnerships.",
      image: "https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&q=80&w=2070",
      accent: "from-slate-600/20 to-transparent",
      icon: <ShieldCheck className="text-slate-400" />
    },
    {
      id: 'cta',
      tag: "Final Call",
      title: "Evolve Your Portfolio",
      subtitle: "Vegas Expo 2026",
      description: "We are seeking partners who value transparency and category-defining IP. Let's discuss the 2026/27 roadmap.",
      image: "https://images.unsplash.com/photo-1517336714731-489689fd1ca8?auto=format&fit=crop&q=80&w=2052",
      accent: "from-emerald-600/20 to-transparent",
      icon: <Zap className="text-emerald-400" />
    }
  ];

  const changeSlide = useCallback((newIndex) => {
    if (isAnimating) return;
    setDirection(newIndex > currentSlide ? 1 : -1);
    setIsAnimating(true);
    setCurrentSlide(newIndex);
    setTimeout(() => setIsAnimating(false), 800);
  }, [currentSlide, isAnimating]);

  const next = () => {
    if (currentSlide < slides.length - 1) changeSlide(currentSlide + 1);
  };

  const prev = () => {
    if (currentSlide > 0) changeSlide(currentSlide - 1);
  };

  // Handle keyboard navigation
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'ArrowRight' || e.key === ' ') next();
      if (e.key === 'ArrowLeft') prev();
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [currentSlide]);

  return (
    <div className="relative w-full h-screen bg-black text-white overflow-hidden font-sans select-none">
      
      {/* Cinematic Background Layer */}
      <div className="absolute inset-0 z-0">
        {slides.map((s, i) => (
          <div
            key={`bg-${s.id}`}
            className={`absolute inset-0 transition-all duration-1000 ease-in-out bg-cover bg-center ${
              i === currentSlide ? 'opacity-40 scale-105 blur-sm' : 'opacity-0 scale-125 blur-xl'
            }`}
            style={{ backgroundImage: `url(${s.image})` }}
          />
        ))}
        <div className="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black" />
        
        {/* Animated Particles */}
        <div className="absolute inset-0 opacity-30 pointer-events-none">
            {[...Array(20)].map((_, i) => (
                <div 
                    key={i}
                    className="absolute rounded-full bg-white animate-pulse"
                    style={{
                        top: `${Math.random() * 100}%`,
                        left: `${Math.random() * 100}%`,
                        width: `${Math.random() * 3}px`,
                        height: `${Math.random() * 3}px`,
                        animationDelay: `${Math.random() * 5}s`,
                        animationDuration: `${3 + Math.random() * 4}s`
                    }}
                />
            ))}
        </div>
      </div>

      {/* Floating Header */}
      <header className="absolute top-0 w-full p-8 flex justify-between items-center z-50">
        <div className="flex items-center gap-3 group cursor-pointer">
          <div className="w-10 h-10 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center border border-white/20 group-hover:bg-cyan-500/20 transition-colors">
            <Sparkles size={20} className="text-cyan-400" />
          </div>
          <div>
            <h1 className="text-xs font-black tracking-[0.3em] uppercase opacity-80">FairyFrens</h1>
            <p className="text-[10px] text-cyan-500 font-mono">EST. 2015</p>
          </div>
        </div>
        <div className="flex gap-2">
            {slides.map((_, i) => (
                <div 
                    key={i} 
                    className={`h-1 transition-all duration-500 rounded-full ${i === currentSlide ? 'w-8 bg-cyan-400' : 'w-2 bg-white/20'}`} 
                />
            ))}
        </div>
      </header>

      {/* Cinematic Main Stage */}
      <main className="relative z-10 w-full h-full flex items-center justify-center perspective-1000">
        {slides.map((s, i) => {
          const isActive = i === currentSlide;
          const isPast = i < currentSlide;
          
          return (
            <div
              key={s.id}
              className={`absolute transition-all duration-1000 ease-[cubic-bezier(0.23, 1, 0.32, 1)] transform-gpu ${
                isActive 
                  ? 'opacity-100 translate-z-0 rotate-y-0 scale-100' 
                  : isPast 
                    ? 'opacity-0 translate-z-500 -translate-y-20 scale-150 pointer-events-none' 
                    : 'opacity-0 -translate-z-500 translate-y-20 scale-50 pointer-events-none'
              }`}
              style={{ transformStyle: 'preserve-3d' }}
            >
              {/* Floating Card */}
              <div className="relative group">
                {/* Glow Effect */}
                <div className={`absolute -inset-10 bg-gradient-to-r ${s.accent} blur-3xl opacity-50 group-hover:opacity-80 transition-opacity`} />
                
                <div className="relative w-[90vw] max-w-4xl p-8 md:p-16 rounded-[2.5rem] border border-white/10 bg-white/5 backdrop-blur-2xl shadow-2xl overflow-hidden">
                  
                  {/* Internal Card Accents */}
                  <div className="absolute top-0 right-0 p-8 opacity-20 transform translate-x-4 -translate-y-4">
                    {React.cloneElement(s.icon, { size: 120 })}
                  </div>

                  <div className="relative z-10 space-y-6">
                    <div className="flex items-center gap-4">
                        <span className="text-xs font-mono text-cyan-400 tracking-widest uppercase py-1 px-3 border border-cyan-400/30 rounded-full">
                            {s.tag}
                        </span>
                    </div>

                    <h2 className="text-4xl md:text-7xl font-bold leading-[1.1] tracking-tight">
                        {s.title}
                        <span className="block text-white/40 mt-2 font-light text-2xl md:text-4xl italic">
                            {s.subtitle}
                        </span>
                    </h2>

                    <p className="text-white/60 text-lg md:text-xl leading-relaxed max-w-2xl font-light">
                      {s.description}
                    </p>

                    {/* Interactive Elements for specific slides */}
                    {s.id === 'cta' ? (
                        <div className="pt-8">
                            <button className="group flex items-center gap-4 bg-white text-black px-8 py-4 rounded-2xl font-bold text-lg hover:bg-cyan-400 transition-all active:scale-95 shadow-xl">
                                <Mail size={20} />
                                Start Partnership Dialogue
                                <ArrowRight className="group-hover:translate-x-2 transition-transform" />
                            </button>
                        </div>
                    ) : (
                        <div className="pt-8 flex items-center gap-4 text-white/30 text-sm font-mono uppercase tracking-[0.2em]">
                            <span className="w-8 h-[1px] bg-white/20" />
                            Immersive IP Brief v2.0
                        </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </main>

      {/* Floating Controls */}
      <footer className="absolute bottom-12 w-full px-8 md:px-12 flex justify-between items-end z-50">
        <div className="hidden md:block">
            <p className="text-[10px] text-white/40 font-mono tracking-widest uppercase">
                SCENE 0{currentSlide + 1} / 0{slides.length}
            </p>
            <p className="text-[10px] text-cyan-500/60 font-mono uppercase mt-1">
                Aura Protocol Active
            </p>
        </div>

        <div className="flex gap-4">
          <button 
            onClick={prev}
            disabled={currentSlide === 0}
            className={`w-14 h-14 rounded-2xl border border-white/10 backdrop-blur-xl flex items-center justify-center transition-all ${
              currentSlide === 0 ? 'opacity-20 cursor-not-allowed' : 'hover:bg-white/10 hover:border-white/30 active:scale-90'
            }`}
          >
            <ChevronLeft size={24} />
          </button>
          
          <button 
            onClick={next}
            className={`h-14 px-8 rounded-2xl flex items-center gap-3 font-bold transition-all transform-gpu shadow-lg shadow-cyan-500/20 active:scale-90 ${
              currentSlide === slides.length - 1 
                ? 'bg-cyan-500 text-black hover:bg-white' 
                : 'bg-white text-black hover:bg-cyan-400'
            }`}
          >
            {currentSlide === slides.length - 1 ? 'RESTART' : 'NEXT'}
            <ChevronRight size={20} />
          </button>
        </div>
      </footer>

      {/* CSS For 3D Perspective */}
      <style dangerouslySetInnerHTML={{ __html: `
        .perspective-1000 {
          perspective: 1500px;
        }
        .translate-z-500 {
          transform: translateZ(600px);
        }
        .-translate-z-500 {
          transform: translateZ(-600px);
        }
      `}} />
    </div>
  );
};

export default App;