components/Hero.jsx

import { motion } from 'framer-motion';
import { ArrowRight, Zap, Layers, Brain } from 'lucide-react';

export default function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-slate-900 pt-20">
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-[30%] -left-[10%] w-[70%] h-[70%] rounded-full bg-purple-600/20 blur-[120px] animate-float"></div>
        <div className="absolute top-[20%] -right-[10%] w-[60%] h-[60%] rounded-full bg-blue-600/20 blur-[100px] animate-float" style={{ animationDelay: '2s' }}></div>
        <div className="absolute -bottom-[20%] left-[20%] w-[50%] h-[50%] rounded-full bg-cyan-600/20 blur-[90px] animate-float" style={{ animationDelay: '4s' }}></div>
      </div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <div className="inline-block mb-6 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 backdrop-blur-sm">
            <span className="text-cyan-400 font-medium text-sm flex items-center gap-2">
              <Zap size={16} />
              Next-Gen AI Experience
            </span>
          </div>
          
          <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-8 tracking-tight">
            <span className="block">AI-Powered</span>
            <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400">
              3D Scrolling
            </span>
          </h1>
          
          <p className="text-xl md:text-2xl text-slate-400 mb-10 max-w-3xl mx-auto leading-relaxed">
            Experience the future of web interaction with our cutting-edge AI-driven 3D scrolling technology.
            Seamlessly blend reality with digital innovation.
          </p>
          
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <button className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-xl font-bold text-lg transition-all duration-200 transform hover:scale-105 shadow-lg shadow-purple-500/30 flex items-center justify-center gap-2">
              Start Scrolling
              <ArrowRight size={20} />
            </button>
            <button className="w-full sm:w-auto px-8 py-4 bg-slate-800 hover:bg-slate-700 text-white rounded-xl font-bold text-lg transition-all duration-200 border border-slate-700 flex items-center justify-center gap-2">
              View Demo
            </button>
          </div>
        </motion.div>
        
        <motion.div 
          className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-24"
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
        >
          {[
            {
              icon: <Brain className="w-8 h-8 text-purple-400" />,
              title: "AI-Powered",
              description: "Advanced neural networks power our scrolling experience"
            },
            {
              icon: <Layers className="w-8 h-8 text-blue-400" />,
              title: "3D Depth",
              description: "Immersive three-dimensional interface for enhanced engagement"
            },
            {
              icon: <Zap className="w-8 h-8 text-cyan-400" />,
              title: "Real-Time",
              description: "Instant responses with lightning-fast performance"
            }
          ].map((feature, index) => (
            <div 
              key={index} 
              className="p-6 rounded-2xl bg-slate-800/30 border border-slate-700 backdrop-blur-sm hover:bg-slate-800/50 transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/10"
            >
              <div className="w-14 h-14 rounded-xl bg-slate-900/50 flex items-center justify-center mb-4">
                {feature.icon}
              </div>
              <h3 className="text-xl font-bold text-white mb-2">{feature.title}</h3>
              <p className="text-slate-400">{feature.description}</p>
            </div>
          ))}
        </motion.div>
      </div>
      
      <motion.div 
        className="absolute bottom-10 left-1/2 transform -translate-x-1/2"
        animate={{ y: [0, 10, 0] }}
        transition={{ duration: 2, repeat: Infinity }}
      >
        <div className="w-6 h-10 border-2 border-slate-500 rounded-full flex justify-center p-1">
          <div className="w-1 h-2 bg-slate-400 rounded-full animate-bounce"></div>
        </div>
      </motion.div>
    </section>
  );
}