components/Interactive3DSection.jsx

import { motion } from 'framer-motion';
import { useRef, useState } from 'react';
import { Brain, Layers, Zap, Globe, Shield, Code } from 'lucide-react';

export default function Interactive3DSection() {
  const containerRef = useRef(null);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (e) => {
    const { clientX, clientY } = e;
    const { innerWidth, innerHeight } = window;
    
    const x = (clientX - innerWidth / 2) / 25;
    const y = (clientY - innerHeight / 2) / 25;
    
    setMousePosition({ x, y });
  };

  const features = [
    { 
      icon: <Brain className="w-8 h-8 text-purple-400" />, 
      title: "Neural Processing", 
      description: "Advanced AI algorithms that learn from user behavior" 
    },
    { 
      icon: <Layers className="w-8 h-8 text-blue-400" />, 
      title: "3D Depth", 
      description: "Immersive three-dimensional interface layers" 
    },
    { 
      icon: <Zap className="w-8 h-8 text-cyan-400" />, 
      title: "Real-time", 
      description: "Instant response with zero latency" 
    },
    { 
      icon: <Globe className="w-8 h-8 text-emerald-400" />, 
      title: "Global CDN", 
      description: "Content delivered from nearest edge location" 
    },
    { 
      icon: <Shield className="w-8 h-8 text-rose-400" />, 
      title: "Secure", 
      description: "Enterprise-grade encryption and security" 
    },
    { 
      icon: <Code className="w-8 h-8 text-amber-400" />, 
      title: "Developer API", 
      description: "Easy integration with your existing stack" 
    }
  ];

  return (
    <section className="py-24 bg-slate-900 relative overflow-hidden">
      <div 
        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
        ref={containerRef}
        onMouseMove={handleMouseMove}
      >
        <div className="text-center mb-20">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">AI-Powered</span> Features
          </motion.h2>
          <motion.p 
            className="text-xl text-slate-400 max-w-3xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
          >
            Move your mouse to experience our interactive 3D feature showcase
          </motion.p>
        </div>
        
        <div className="relative h-[600px]">
          {/* Background Elements */}
          <div 
            className="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600/10 to-purple-600/10 blur-[100px] transition-transform duration-100"
            style={{ 
              transform: `translate(${mousePosition.x * -1}px, ${mousePosition.y * -1}px)` 

          />
          
          <div 
            className="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-600/10 to-emerald-600/10 blur-[80px] transition-transform duration-100"