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 { Bot, Zap, Eye, Cpu, Wifi, Settings } from 'lucide-react'
export default function VBotScoutPage() {
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">
<Bot className="h-12 w-12 text-primary" />
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
VBot Scout Mini
</h1>
</div>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Comprehensive development progress and technical specifications for our virtual Pilot Labs Scout Mini robot
</p>
<div className="flex items-center justify-center space-x-4">
<Badge variant="secondary" className="px-3 py-1">
<Zap className="h-3 w-3 mr-1" />
Virtual Robotics
</Badge>
<Badge variant="outline" className="px-3 py-1">
<Eye className="h-3 w-3 mr-1" />
Blender 4.2+
</Badge>
<Badge variant="outline" className="px-3 py-1">
<Settings className="h-3 w-3 mr-1" />
Unity 2022+
</Badge>
</div>
</div>
{/* Development Progress */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Cpu className="h-5 w-5" />
<span>Development Progress</span>
</CardTitle>
<CardDescription>Current status of VBot Scout Mini implementation</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>3D Model Creation</span>
<span>95%</span>
</div>
<Progress value={95} className="h-2" />
</div>
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Physics Integration</span>
<span>80%</span>
</div>
<Progress value={80} className="h-2" />
</div>
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Sensor Simulation</span>
<span>70%</span>
</div>
<Progress value={70} className="h-2" />
</div>
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>VRChat Export</span>
<span>60%</span>
</div>
<Progress value={60} className="h-2" />
</div>
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>OSC Control</span>
<span>45%</span>
</div>
<Progress value={45} className="h-2" />
</div>
</CardContent>
</Card>
{/* Technical Specifications */}
<Tabs defaultValue="modeling" className="w-full">
<TabsList className="grid w-full grid-cols-4">
<TabsTrigger value="modeling">3D Modeling</TabsTrigger>
<TabsTrigger value="physics">Physics</TabsTrigger>
<TabsTrigger value="sensors">Sensors</TabsTrigger>
<TabsTrigger value="control">Control</TabsTrigger>
</TabsList>
<TabsContent value="modeling" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>3D Model Specifications</CardTitle>
<CardDescription>Blender-based modeling pipeline</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<h4 className="font-semibold">Geometry</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>• High-poly model: 50k+ vertices</li>
<li>• Low-poly LOD: 5k vertices</li>
<li>• Optimized UV mapping</li>
<li>• PBR materials</li>
</ul>
</div>
<div className="space-y-2">
<h4 className="font-semibold">Features</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>• Articulated joints</li>
<li>• Wheel animations</li>
<li>• LED indicators</li>
<li>• Camera mount points</li>
</ul>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="physics" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Physics Simulation</CardTitle>
<CardDescription>Unity physics integration</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<h4 className="font-semibold">Rigid Bodies</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>• Chassis: 2.5kg mass</li>
<li>• Wheels: Independent physics</li>
<li>• Collision detection</li>
<li>• Friction simulation</li>
</ul>
</div>
<div className="space-y-2">
<h4 className="font-semibold">Constraints</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>• Wheel joints</li>
<li>• Suspension system</li>
<li>• Motor torque limits</li>
<li>• Ground adhesion</li>
</ul>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="sensors" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Sensor Suite</CardTitle>
<CardDescription>Virtual sensor implementations</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<h4 className="font-semibold">Implemented</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>• Camera (RGB + Depth)</li>
<li>• IMU (Accelerometer)</li>
<li>• Odometry tracking</li>
<li>• Battery simulation</li>
</ul>
</div>
<div className="space-y-2">
<h4 className="font-semibold">Planned</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>• LiDAR scanning</li>
<li>• Ultrasonic sensors</li>
<li>• Gyroscope</li>
<li>• Proximity detection</li>
</ul>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="control" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Control Systems</CardTitle>
<CardDescription>OSC and WebSocket integration</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<h4 className="font-semibold">OSC Protocol</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>• Movement commands</li>
<li>• Sensor data streams</li>
<li>• State synchronization</li>
<li>• Emergency stop</li>
</ul>
</div>
<div className="space-y-2">
<h4 className="font-semibold">Web Interface</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>• Real-time control</li>
<li>• Video streaming</li>
<li>• Telemetry dashboard</li>
<li>• Configuration panel</li>
</ul>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
{/* Integration Status */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Wifi className="h-5 w-5" />
<span>Platform Integration</span>
</CardTitle>
<CardDescription>Cross-platform deployment status</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="text-center p-4 border rounded-lg">
<div className="text-2xl font-bold text-green-600">✅</div>
<div className="text-sm font-medium">Unity 3D</div>
<div className="text-xs text-muted-foreground">Physics simulation</div>
</div>
<div className="text-center p-4 border rounded-lg">
<div className="text-2xl font-bold text-yellow-600">🔄</div>
<div className="text-sm font-medium">VRChat</div>
<div className="text-xs text-muted-foreground">OSC integration</div>
</div>
<div className="text-center p-4 border rounded-lg">
<div className="text-2xl font-bold text-blue-600">🔄</div>
<div className="text-sm font-medium">Resonite</div>
<div className="text-xs text-muted-foreground">ProtoFlux setup</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
)
}
