import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Progress } from '@/components/ui/progress'
import { Button } from '@/components/ui/button'
import { Cpu, Battery, Wifi, Eye, Zap, Settings, ShoppingCart } from 'lucide-react'
export default function HardwarePage() {
return (
<div className="container mx-auto px-6 py-8 max-w-7xl">
<div className="space-y-8">
{/* Header */}
<div className="text-center space-y-4">
<div className="flex items-center justify-center space-x-3">
<Cpu className="h-12 w-12 text-primary" />
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-orange-600 bg-clip-text text-transparent">
Hardware Guide
</h1>
</div>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Complete technical specifications and integration guides for robotics hardware platforms
</p>
<div className="flex items-center justify-center space-x-4">
<Badge variant="secondary" className="px-3 py-1">
<Cpu className="h-3 w-3 mr-1" />
Pilot Labs Scout
</Badge>
<Badge variant="outline" className="px-3 py-1">
<Battery className="h-3 w-3 mr-1" />
Unitree Robotics
</Badge>
<Badge variant="outline" className="px-3 py-1">
<Wifi className="h-3 w-3 mr-1" />
ROS Compatible
</Badge>
</div>
</div>
{/* Platform Overview */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card>
<CardHeader className="text-center">
<CardTitle className="flex items-center justify-center space-x-2">
<Cpu className="h-5 w-5 text-blue-500" />
<span>Pilot Labs Scout</span>
</CardTitle>
<CardDescription>Mecanum wheel research platform</CardDescription>
</CardHeader>
<CardContent className="text-center space-y-4">
<div className="text-2xl font-bold text-green-600">$2,500</div>
<p className="text-sm text-muted-foreground">
Professional-grade robotics research platform with advanced sensors
</p>
<Button variant="outline" size="sm" className="w-full">
<ShoppingCart className="h-3 w-3 mr-2" />
View Specs
</Button>
</CardContent>
</Card>
<Card>
<CardHeader className="text-center">
<CardTitle className="flex items-center justify-center space-x-2">
<Battery className="h-5 w-5 text-green-500" />
<span>Unitree Go2</span>
</CardTitle>
<CardDescription>Quadruped robot platform</CardDescription>
</CardHeader>
<CardContent className="text-center space-y-4">
<div className="text-2xl font-bold text-yellow-600">$3,500</div>
<p className="text-sm text-muted-foreground">
Agile quadruped robot with advanced locomotion and manipulation
</p>
<Button variant="outline" size="sm" className="w-full">
<ShoppingCart className="h-3 w-3 mr-2" />
View Specs
</Button>
</CardContent>
</Card>
<Card>
<CardHeader className="text-center">
<CardTitle className="flex items-center justify-center space-x-2">
<Settings className="h-5 w-5 text-purple-500" />
<span>Unitree G1</span>
</CardTitle>
<CardDescription>Humanoid robot platform</CardDescription>
</CardHeader>
<CardContent className="text-center space-y-4">
<div className="text-2xl font-bold text-red-600">$15,000+</div>
<p className="text-sm text-muted-foreground">
Full humanoid robot with advanced manipulation and AI capabilities
</p>
<Button variant="outline" size="sm" className="w-full">
<ShoppingCart className="h-3 w-3 mr-2" />
View Specs
</Button>
</CardContent>
</Card>
</div>
{/* Detailed Specifications */}
<Tabs defaultValue="scout" className="w-full">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="scout">Pilot Labs Scout</TabsTrigger>
<TabsTrigger value="go2">Unitree Go2</TabsTrigger>
<TabsTrigger value="g1">Unitree G1</TabsTrigger>
</TabsList>
<TabsContent value="scout" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Pilot Labs Scout Mini - Complete Technical Profile</CardTitle>
<CardDescription>Professional-grade robotics research platform</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Mechanical Specifications</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Dimensions:</span>
<span>500 × 400 × 200 mm</span>
</div>
<div className="flex justify-between">
<span>Weight:</span>
<span>15 kg</span>
</div>
<div className="flex justify-between">
<span>Payload:</span>
<span>10 kg</span>
</div>
<div className="flex justify-between">
<span>Drive System:</span>
<span>Mecanum wheels</span>
</div>
<div className="flex justify-between">
<span>Max Speed:</span>
<span>2 m/s</span>
</div>
<div className="flex justify-between">
<span>Battery Life:</span>
<span>2-3 hours</span>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Electrical Specifications</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Processor:</span>
<span>Intel NUC i5</span>
</div>
<div className="flex justify-between">
<span>RAM:</span>
<span>16 GB</span>
</div>
<div className="flex justify-between">
<span>Storage:</span>
<span>512 GB SSD</span>
</div>
<div className="flex justify-between">
<span>Power:</span>
<span>24V LiPo</span>
</div>
<div className="flex justify-between">
<span>Interfaces:</span>
<span>USB 3.0, Ethernet</span>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Sensor Suite</h4>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="text-center p-3 border rounded-lg">
<Eye className="h-5 w-5 mx-auto mb-2 text-blue-500" />
<div className="font-semibold text-sm">Intel RealSense</div>
<div className="text-xs text-muted-foreground">RGB-D Camera</div>
</div>
<div className="text-center p-3 border rounded-lg">
<Wifi className="h-5 w-5 mx-auto mb-2 text-green-500" />
<div className="font-semibold text-sm">Velodyne Puck</div>
<div className="text-xs text-muted-foreground">LiDAR Scanner</div>
</div>
<div className="text-center p-3 border rounded-lg">
<Zap className="h-5 w-5 mx-auto mb-2 text-purple-500" />
<div className="font-semibold text-sm">IMU</div>
<div className="text-xs text-muted-foreground">9-DOF Sensor</div>
</div>
<div className="text-center p-3 border rounded-lg">
<Battery className="h-5 w-5 mx-auto mb-2 text-orange-500" />
<div className="font-semibold text-sm">Ultrasonic</div>
<div className="text-xs text-muted-foreground">Proximity Sensors</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Software Compatibility</h4>
<div className="space-y-2">
<div className="flex items-center space-x-2">
<Badge variant="secondary">ROS 1 Noetic</Badge>
<span className="text-sm text-muted-foreground">Full support with custom drivers</span>
</div>
<div className="flex items-center space-x-2">
<Badge variant="outline">ROS 2 Humble</Badge>
<span className="text-sm text-muted-foreground">Migration in progress</span>
</div>
<div className="flex items-center space-x-2">
<Badge variant="outline">Ubuntu 20.04</Badge>
<span className="text-sm text-muted-foreground">Pre-installed OS</span>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="go2" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Unitree Go2 - Quadruped Robot</CardTitle>
<CardDescription>Advanced quadruped locomotion platform</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Physical Specifications</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Height:</span>
<span>600 mm</span>
</div>
<div className="flex justify-between">
<span>Weight:</span>
<span>12 kg</span>
</div>
<div className="flex justify-between">
<span>Payload:</span>
<span>5 kg</span>
</div>
<div className="flex justify-between">
<span>Max Speed:</span>
<span>3.5 m/s</span>
</div>
<div className="flex justify-between">
<span>Jump Height:</span>
<span>15 cm</span>
</div>
<div className="flex justify-between">
<span>Battery Life:</span>
<span>1-2 hours</span>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Control System</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Degrees of Freedom:</span>
<span>12</span>
</div>
<div className="flex justify-between">
<span>Joint Torque:</span>
<span>23 Nm</span>
</div>
<div className="flex justify-between">
<span>Control Frequency:</span>
<span>500 Hz</span>
</div>
<div className="flex justify-between">
<span>Communication:</span>
<span>WiFi/Ethernet</span>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Gait Capabilities</h4>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="text-center p-3 border rounded-lg">
<div className="font-semibold text-sm">Trotting</div>
<div className="text-xs text-muted-foreground">Smooth locomotion</div>
</div>
<div className="text-center p-3 border rounded-lg">
<div className="font-semibold text-sm">Pacing</div>
<div className="text-xs text-muted-foreground">Side-to-side movement</div>
</div>
<div className="text-center p-3 border rounded-lg">
<div className="font-semibold text-sm">Bounding</div>
<div className="text-xs text-muted-foreground">High-speed gait</div>
</div>
<div className="text-center p-3 border rounded-lg">
<div className="font-semibold text-sm">Pronking</div>
<div className="text-xs text-muted-foreground">All legs simultaneous</div>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="g1" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Unitree G1 - Humanoid Robot</CardTitle>
<CardDescription>Advanced humanoid platform with manipulation capabilities</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Physical Specifications</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Height:</span>
<span>1,270 mm</span>
</div>
<div className="flex justify-between">
<span>Weight:</span>
<span>35 kg</span>
</div>
<div className="flex justify-between">
<span>Payload:</span>
<span>3 kg per arm</span>
</div>
<div className="flex justify-between">
<span>Degrees of Freedom:</span>
<span>23</span>
</div>
<div className="flex justify-between">
<span>Battery Life:</span>
<span>2-3 hours</span>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Manipulation System</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Arm Reach:</span>
<span>700 mm</span>
</div>
<div className="flex justify-between">
<span>Gripper Force:</span>
<span>20 N</span>
</div>
<div className="flex justify-between">
<span>Joint Torque:</span>
<span>30-120 Nm</span>
</div>
<div className="flex justify-between">
<span>Control Precision:</span>
<span>±1 mm</span>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Advanced Features</h4>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="text-center p-3 border rounded-lg">
<Eye className="h-5 w-5 mx-auto mb-2 text-blue-500" />
<div className="font-semibold text-sm">Vision System</div>
<div className="text-xs text-muted-foreground">RGB-D cameras</div>
</div>
<div className="text-center p-3 border rounded-lg">
<Wifi className="h-5 w-5 mx-auto mb-2 text-green-500" />
<div className="font-semibold text-sm">Force Sensing</div>
<div className="text-xs text-muted-foreground">Joint torque sensors</div>
</div>
<div className="text-center p-3 border rounded-lg">
<Cpu className="h-5 w-5 mx-auto mb-2 text-purple-500" />
<div className="font-semibold text-sm">AI Integration</div>
<div className="text-xs text-muted-foreground">Onboard processing</div>
</div>
<div className="text-center p-3 border rounded-lg">
<Settings className="h-5 w-5 mx-auto mb-2 text-orange-500" />
<div className="font-semibold text-sm">Whole-Body Control</div>
<div className="text-xs text-muted-foreground">Coordinated motion</div>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
{/* Integration Guide */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Settings className="h-5 w-5" />
<span>Integration Guide</span>
</CardTitle>
<CardDescription>Step-by-step setup and configuration</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Hardware Setup</h4>
<div className="space-y-3 text-sm">
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">1</div>
<div>
<div className="font-medium">Unboxing & Inspection</div>
<div className="text-muted-foreground">Check all components and connections</div>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">2</div>
<div>
<div className="font-medium">Power & Charging</div>
<div className="text-muted-foreground">Initial battery charge and power systems</div>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">3</div>
<div>
<div className="font-medium">Network Configuration</div>
<div className="text-muted-foreground">WiFi setup and IP address assignment</div>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">4</div>
<div>
<div className="font-medium">Calibration</div>
<div className="text-muted-foreground">IMU and sensor calibration procedures</div>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Software Integration</h4>
<div className="space-y-3 text-sm">
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">5</div>
<div>
<div className="font-medium">ROS Installation</div>
<div className="text-muted-foreground">Install ROS and robot-specific packages</div>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">6</div>
<div>
<div className="font-medium">Driver Configuration</div>
<div className="text-muted-foreground">Configure robot drivers and parameters</div>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">7</div>
<div>
<div className="font-medium">Network Bridge</div>
<div className="text-muted-foreground">Setup rosbridge_suite for web control</div>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">8</div>
<div>
<div className="font-medium">Testing & Validation</div>
<div className="text-muted-foreground">Run integration tests and validation</div>
</div>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Safety Guidelines</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div className="p-3 border border-red-200 rounded-lg bg-red-50">
<div className="font-semibold text-red-800">⚠️ Emergency Stop</div>
<div className="text-red-600">Always test emergency stop functionality before operation</div>
</div>
<div className="p-3 border border-yellow-200 rounded-lg bg-yellow-50">
<div className="font-semibold text-yellow-800">⚡ Power Safety</div>
<div className="text-yellow-600">Use only manufacturer-approved batteries and chargers</div>
</div>
<div className="p-3 border border-blue-200 rounded-lg bg-blue-50">
<div className="font-semibold text-blue-800">🔒 Operating Environment</div>
<div className="text-blue-600">Operate in clear, obstacle-free areas with supervision</div>
</div>
<div className="p-3 border border-green-200 rounded-lg bg-green-50">
<div className="font-semibold text-green-800">🔧 Maintenance</div>
<div className="text-green-600">Regular inspection and firmware updates required</div>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
)
}
