import { useState } from 'react';
import { Battery, Wifi, Cpu as CpuIcon, Activity } from 'lucide-react';

const robots = [
  {
    id: 1,
    name: "Nexus One",
    role: "Home Assistant",
    description: "Perfect for daily chores, elderly care, and home security. Equipped with gentle touch sensors and emotional AI.",
    stats: { battery: "48h", wifi: "6E", cpu: "Q1", activity: "Low" },
    color: "from-blue-500 to-cyan-400"
  },
  {
    id: 2,
    name: "Nexus Pro",
    role: "Industrial Worker",
    description: "Heavy lifting, precision assembly, and hazardous environment exploration. Built with titanium alloy chassis.",
    stats: { battery: "72h", wifi: "Mesh", cpu: "Q2", activity: "High" },
    color: "from-orange-500 to-red-500"
  },
  {
    id: 3,
    name: "Nexus Medical",
    role: "Surgical Assistant",
    description: "Sub-millimeter precision for surgical procedures. Sterilizable exterior and advanced biometric scanning.",
    stats: { battery: "24h", wifi: "Secure", cpu: "Q3", activity: "Med" },
    color: "from-emerald-500 to-green-400"
  }
];

export default function RobotShowcase() {
  const [activeRobot, setActiveRobot] = useState(robots[0]);

  return (
    <section id="models" className="py-24 bg-surface relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-5xl font-bold mb-4">Choose Your <span className="text-gradient">Companion</span></h2>
          <p className="text-gray-400 max-w-2xl mx-auto">Select the model that fits your needs. From home assistance to industrial applications.</p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Robot Visualizer */}
          <div className="relative h-[500px] w-full glass-panel flex items-center justify-center overflow-hidden group">
            <div className={`absolute inset-0 bg-gradient-to-br ${activeRobot.color} opacity-10 group-hover:opacity-20 transition-opacity duration-500`}></div>
            
            {/* Abstract Robot Representation */}
            <div className="relative z-10 animate-float">
               <div className="w-64 h-96 bg-gradient-to-b from-gray-800 to-black rounded-[3rem] border border-white/20 shadow-2xl relative overflow-hidden flex flex-col items-center pt-12">
                  {/* Head */}
                  <div className="w-32 h-32 rounded-full bg-gray-900 border-2 border-primary/50 shadow-[0_0_30px_rgba(0,240,255,0.3)] mb-8 flex items-center justify-center">
                    <div className="w-24 h-8 bg-primary/20 rounded-full flex items-center justify-center space-x-2">
                      <div className="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
                      <div className="w-2 h-2 bg-primary rounded-full animate-pulse" style={{ animationDelay: '0.2s'}}></div>
                    </div>
                  </div>
                  
                  {/* Body Details */}
                  <div className="w-full px-8 space-y-4">
                    <div className="h-2 w-full bg-gray-800 rounded-full overflow-hidden">
                      <div className={`h-full bg-gradient-to-r ${activeRobot.color} w-3/4`}></div>
                    </div>
                    <div className="h-2 w-2/3 mx-auto bg-gray-800 rounded-full"></div>
                    <div className="h-2 w-1/2 mx-auto bg-gray-800 rounded-full"></div>
                  </div>

                  {/* Chest Display */}
                  <div className="mt-12 w-40 h-24 bg-black/50 rounded-xl border border-white/10 flex items-center justify-center">
                    <Activity className="text-primary h-8 w-8 animate-pulse" />
                  </div>
               </div>
            </div>
          </div>

          {/* Controls & Info */}
          <div className="space-y-8">
            <div className="flex space-x-4 overflow-x-auto pb-4">
              {robots.map((robot) => (
                <button
                  key={robot.id}
                  onClick={() => setActiveRobot(robot)}
                  className={`flex-shrink-0 px-6 py-4 rounded-xl border transition-all duration-300 text-left min-w-[160px] ${
                    activeRobot.id === robot.id
                      ? `bg-white/10 border-primary text-white`
                      : 'bg-transparent border-white/10 text-gray-400 hover:border-white/30'
                  }`}
                >
                  <div className="font-bold text-lg">{robot.name}</div>
                  <div className="text-xs opacity-70">{robot.role}</div>
                </button>
              ))}
            </div>

            <div className="glass-panel p-8">
              <h3 className="text-2xl font-bold mb-2">{activeRobot.name}</h3>
              <div className="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-mono rounded mb-4">
                {activeRobot.role.toUpperCase()}
              </div>
              <p className="text-gray-300 mb-8 leading-relaxed">
                {activeRobot.description}
              </p>

              <div className="grid grid-cols-2 gap-4 mb-8">
                <div className="bg-black/20 p-4 rounded-lg flex items-center space-x-3">
                  <Battery className="text-primary h-5 w-5" />
                  <div>
                    <div className="text-xs text-gray-500">Battery Life</div>
                    <div className="font-mono font-bold">{activeRobot.stats.battery}</div>
                  </div>
                </div>
                <div className="bg-black/20 p-4 rounded-lg flex items-center space-x-3">
                  <Wifi className="text-primary h-5 w-5" />
                  <div>
                    <div className="text-xs text-gray-500">Connectivity</div>
                    <div className="font-mono font-bold">{activeRobot.stats.wifi}</div>
                  </div>
                </div>
                <div className="bg-black/20 p-4 rounded-lg flex items-center space-x-3">
                  <CpuIcon className="text-primary h-5 w-5" />
                  <div>
                    <div className="text-xs text-gray-500">Processor</div>
                    <div className="font-mono font-bold">{activeRobot.stats.cpu}</div>
                  </div>
                </div>
                <div className="bg-black/20 p-4 rounded-lg flex items-center space-x-3">
                  <Activity className="text-primary h-5 w-5" />
                  <div>
                    <div className="text-xs text-gray-500">Activity Level</div>
                    <div className="font-mono font-bold">{activeRobot.stats.activity}</div>
                  </div>
                </div>
              </div>

              <button className="w-full py-4 bg-white text-dark font-bold rounded-lg hover:bg-gray-200 transition-colors">
                Configure {activeRobot.name}
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}