components/Hero.js

import { ArrowRight, Zap, Shield, Globe } from 'lucide-react';

export default function Hero() {
  return (
    <div className="relative pt-32 pb-16 sm:pt-40 sm:pb-24 overflow-hidden">
      {/* Background Decorations */}
      <div className="absolute top-0 left-1/2 w-full -translate-x-1/2 h-full z-0 pointer-events-none">
        <div className="absolute top-20 left-10 w-72 h-72 bg-primary/20 rounded-full blur-[100px] animate-pulse-slow"></div>
        <div className="absolute bottom-20 right-10 w-96 h-96 bg-secondary/20 rounded-full blur-[100px] animate-pulse-slow" style={{ animationDelay: '2s' }}></div>
      </div>

      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div className="inline-flex items-center space-x-2 bg-white/5 border border-white/10 rounded-full px-4 py-1.5 mb-8 backdrop-blur-sm">
          <span className="flex h-2 w-2 relative">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
            <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
          </span>
          <span className="text-sm font-medium text-gray-300">Series X Now Available for Pre-order</span>
        </div>

        <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight mb-8">
          The Future of <br />
          <span className="text-gradient">Artificial Intelligence</span>
        </h1>
        
        <p className="mt-4 max-w-2xl mx-auto text-xl text-gray-400 mb-10">
          Meet the next generation of humanoid robotics. Designed for companionship, engineered for efficiency, and powered by advanced neural networks.
        </p>

        <div className="flex flex-col sm:flex-row justify-center gap-4">
          <a href="#models" className="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-bold rounded-full text-dark bg-primary hover:bg-white transition-all transform hover:scale-105 shadow-lg shadow-primary/25">
            Explore Models
            <ArrowRight className="ml-2 h-5 w-5" />
          </a>
          <a href="#technology" className="inline-flex items-center justify-center px-8 py-4 border border-white/20 text-base font-medium rounded-full text-white hover:bg-white/10 transition-all backdrop-blur-sm">
            Learn Technology
          </a>
        </div>

        <div className="mt-20 grid grid-cols-1 gap-8 sm:grid-cols-3">
          <div className="flex flex-col items-center p-6 glass-panel hover:bg-white/10 transition-colors">
            <Zap className="h-10 w-10 text-primary mb-4" />
            <h3 className="text-lg font-bold mb-2">Quantum Processing</h3>
            <p className="text-gray-400 text-sm">Real-time decision making with zero latency.</p>
          </div>
          <div className="flex flex-col items-center p-6 glass-panel hover:bg-white/10 transition-colors">
            <Shield className="h-10 w-10 text-primary mb-4" />
            <h3 className="text-lg font-bold mb-2">Military Grade Security</h3>
            <p className="text-gray-400 text-sm">End-to-end encryption for all neural data.</p>
          </div>
          <div className="flex flex-col items-center p-6 glass-panel hover:bg-white/10 transition-colors">
            <Globe className="h-10 w-10 text-primary mb-4" />
            <h3 className="text-lg font-bold mb-2">Global Connectivity</h3>
            <p className="text-gray-400 text-sm">Seamless integration with smart home ecosystems.</p>
          </div>
        </div>
      </div>
    </div>
  );
}