components/InteractiveDemo.jsx

import { motion } from 'framer-motion';
import { MousePointer2, Move3D, Touch, Play } from 'lucide-react';

export default function InteractiveDemo() {
  return (
    <section id="demo" className="py-24 bg-slate-900 relative overflow-hidden">
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-[20%] left-[10%] w-[50%] h-[50%] rounded-full bg-blue-600/10 blur-[100px]"></div>
        <div className="absolute bottom-[20%] right-[10%] w-[40%] h-[40%] rounded-full bg-purple-600/10 blur-[80px]"></div>
      </div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div>
            <motion.div 
              className="inline-block mb-6 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 backdrop-blur-sm"
              initial={{ opacity: 0, x: -40 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
            >
              <span className="text-purple-400 font-medium text-sm">Interactive Experience</span>
            </motion.div>
            
            <motion.h2 
              className="text-4xl md:text-5xl font-bold text-white mb-8"
              initial={{ opacity: 0, x: -40 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
            >
              Experience the <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">Future</span> of Interaction
            </motion.h2>
            
            <motion.p 
              className="text-xl text-slate-400 mb-8"
              initial={{ opacity: 0, x: -40 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.2 }}
            >
              Our AI-powered 3D scrolling technology transforms how users interact with your content. 
              Simply scroll to discover an immersive journey that feels incredibly natural and intuitive.
            </motion.p>
            
            <motion.div 
              className="space-y-6"
              initial={{ opacity: 0, x: -40 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.4 }}
            >
              {[
                { icon: <MousePointer2 className="w-6 h-6 text-cyan-400" />, text: "Intuitive mouse tracking for 3D depth" },
                { icon: <Move3D className="w-6 h-6 text-purple-400" />, text: "Seamless parallax effects on scroll" },
                { icon: <Touch className="w-6 h-6 text-blue-400" />, text: "Touch-optimized for mobile devices" }
              ].map((item, index) => (
                <div key={index} className="flex items-center gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700">
                  <div className="w-12 h-12 rounded-xl bg-slate-900/50 flex items-center justify-center">
                    {item.icon}
                  </div>
                  <span className="text-slate-300">{item.text}</span>
                </div>
              ))}
            </motion.div>
          </div>
          
          <motion.div 
            className="relative"
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.3 }}
          >
            <div className="aspect-video rounded-2xl overflow-hidden bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700 relative group">
              <div className="absolute inset-0 flex items-center justify-center overflow-hidden">
                <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-slate-700/20 to-transparent"></div>
                
                <motion.div 
                  className="absolute w-32 h-32 bg-purple-500/30 rounded-full blur-2xl"
                  animate={{ 
                    y: [0, -30, 0],
                    x: [0, 20, 0],
                    scale: [1, 1.1, 1]

                  transition={{ duration: 6, repeat: Infinity }}
                />
                
                <motion.div 
                  className="absolute w-48 h-48 bg-blue-500/20 rounded-full blur-3xl"
                  animate={{ 
                    y: [0, 40, 0],
                    x: [0, -30, 0],
                    scale: [1, 1.2, 1]

                  transition={{ duration: 8, repeat: Infinity, delay: 1 }}
                />
                
                <motion.div 
                  className="absolute w-24 h-24 bg-cyan-500/30 rounded-full blur-xl"
                  animate={{ 
                    y: [0, -20, 0],
                    x: [0, -15, 0],
                    scale: [1, 1.1, 1]

                  transition={{ duration: 7, repeat: Infinity, delay: 2 }}
                />
                
                <div className="relative z-10 text-center p-8">
                  <div className="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-2xl shadow-purple-500/30 group-hover:scale-110 transition-transform duration-300">
                    <Play className="w-10 h-10 text-white ml-1" />
                  </div>
                  <h3 className="text-2xl font-bold text-white mb-2">Interactive Preview</h3>
                  <p className="text-slate-400">Hover and scroll to experience 3D depth</p>
                  
                  {[...Array(6)].map((_, i) => (
                    <motion.div
                      key={i}
                      className="absolute w-2 h-2 bg-white rounded-full"
                      initial={{ opacity: 0 }}
                      animate={{ 
                        opacity: [0, 1, 0],
                        x: Math.random() * 200 - 100,
                        y: Math.random() * 200 - 100

                      transition={{ 
                        duration: 3, 
                        repeat: Infinity, 
                        delay: Math.random() * 2 

                    />
                  ))}
                </div>
              </div>
              
              <div className="absolute inset-0 bg-gradient-to-t from-slate-900/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
                <button className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-medium flex items-center gap-2">
                  <Play className="w-4 h-4" />
                  View Full Demo
                </button>
              </div>
            </div>
            
            <div className="absolute -top-6 -right-6 w-24 h-24 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full blur-2xl opacity-30 animate-pulse"></div>
            <div className="absolute -bottom-6 -left-6 w-32 h-32 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-full blur-2xl opacity-20 animate-pulse" style={{ animationDelay: '1s' }}></div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}