components/Hero.jsx

import { ArrowRight, Play, Sparkles } from 'lucide-react';

export default function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
      {/* Background gradient */}
      <div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary-900/20 via-transparent to-transparent" />
      
      {/* Animated circles */}
      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary-500/10 rounded-full blur-3xl animate-pulse-slow" />
      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent-500/10 rounded-full blur-3xl animate-pulse-slow" />

      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left content */}
          <div className="space-y-8">
            <div className="inline-flex items-center space-x-2 bg-gray-800/50 border border-gray-700 rounded-full px-4 py-2">
              <Sparkles className="w-4 h-4 text-accent-500" />
              <span className="text-sm text-gray-300">Next-Gen Robotics</span>
            </div>

            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight">
              <span className="text-gradient">Reachy Mini</span>
              <br />
              <span className="text-white">Robotic Arm</span>
            </h1>

            <p className="text-xl text-gray-400 max-w-lg">
              A compact, affordable, and open-source robotic arm designed for education, research, and prototyping. Build the future with Reachy Mini.
            </p>

            <div className="flex flex-col sm:flex-row gap-4">
              <button className="group bg-gradient-to-r from-primary-500 to-accent-500 text-white px-8 py-4 rounded-xl font-semibold hover:shadow-lg hover:shadow-primary-500/25 transition-all duration-300 flex items-center justify-center space-x-2">
                <span>Get Started</span>
                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </button>
              
              <button className="bg-gray-800 border border-gray-700 text-white px-8 py-4 rounded-xl font-semibold hover:bg-gray-700 transition-all duration-300 flex items-center justify-center space-x-2">
                <Play className="w-5 h-5" />
                <span>Watch Demo</span>
              </button>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-3 gap-8 pt-8 border-t border-gray-800">
              <div>
                <div className="text-3xl font-bold text-gradient">6</div>
                <div className="text-gray-400 text-sm">Degrees of Freedom</div>
              </div>
              <div>
                <div className="text-3xl font-bold text-gradient">50cm</div>
                <div className="text-gray-400 text-sm">Reach</div>
              </div>
              <div>
                <div className="text-3xl font-bold text-gradient">&lt;1kg</div>
                <div className="text-gray-400 text-sm">Payload</div>
              </div>
            </div>
          </div>

          {/* Right content - Robot illustration */}
          <div className="relative flex items-center justify-center">
            <div className="relative animate-float">
              {/* Robot arm representation */}
              <div className="w-80 h-80 relative">
                {/* Base */}
                <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-32 h-8 bg-gradient-to-t from-gray-700 to-gray-600 rounded-lg" />
                
                {/* Arm segments */}
                <div className="absolute bottom-8 left-1/2 -translate-x-1/2 w-16 h-48 bg-gradient-to-r from-gray-600 to-gray-500 rounded-full transform -rotate-12 origin-bottom" />
                <div className="absolute bottom-40 left-1/2 -translate-x-8 w-16 h-40 bg-gradient-to-r from-gray-500 to-gray-400 rounded-full transform rotate-30 origin-bottom" />
                
                {/* Joints */}
                <div className="absolute bottom-8 left-1/2 -translate-x-1/2 w-20 h-20 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full border-4 border-gray-700 shadow-lg shadow-primary-500/50" />
                <div className="absolute bottom-40 left-1/2 -translate-x-8 w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full border-4 border-gray-700 shadow-lg shadow-primary-500/50" />
                
                {/* Gripper */}
                <div className="absolute bottom-72 left-1/2 -translate-x-1/2 w-12 h-12 bg-gradient-to-br from-accent-500 to-accent-600 rounded-lg border-2 border-gray-700" />
              </div>

              {/* Decorative elements */}
              <div className="absolute -top-4 -right-4 w-24 h-24 bg-primary-500/20 rounded-full blur-xl" />
              <div className="absolute -bottom-4 -left-4 w-32 h-32 bg-accent-500/20 rounded-full blur-xl" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}