Robotics MCP Server

'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
  Network,
  Zap,
  Shield,
  Eye,
  Navigation,
  Cpu,
  Battery,
  Wifi,
  Settings,
  Play,
  Pause,
  RotateCcw,
  ChevronRight,
  AlertTriangle,
  CheckCircle,
  Info,
  ExternalLink,
  MessageSquare,
  Database,
  Layers,
  GitBranch,
  Activity,
  Code
} from 'lucide-react'
import { Link } from 'react-router-dom'

const rosConcepts = [
  {
    concept: 'Nodes',
    description: 'Executable processes that perform computation',
    icon: Cpu,
    details: 'Nodes are the basic computational units in ROS. Each node performs a specific task and communicates with other nodes.',
    example: 'A camera driver node publishes image data, while a vision processing node subscribes to and processes that data.'
  },
  {
    concept: 'Topics',
    description: 'Named buses for data streaming',
    icon: MessageSquare,
    details: 'Topics enable asynchronous, one-to-many communication. Publishers send messages to topics, subscribers receive them.',
    example: '/camera/image_raw topic for camera data, /cmd_vel for velocity commands, /odom for odometry data.'
  },
  {
    concept: 'Services',
    description: 'Request-response communication pattern',
    icon: Zap,
    details: 'Services provide synchronous, one-to-one communication. Clients request services from servers and wait for responses.',
    example: 'Map saving service, parameter setting, emergency stop functionality.'
  },
  {
    concept: 'Actions',
    description: 'Long-running tasks with feedback',
    icon: Activity,
    details: 'Actions handle tasks that take time to complete, providing feedback during execution and the ability to preempt.',
    example: 'Navigation to goal, arm movement, complex manipulation tasks.'
  },
  {
    concept: 'Parameters',
    description: 'Configuration values accessible by all nodes',
    icon: Settings,
    details: 'Parameters allow runtime configuration of nodes and store system-wide settings.',
    example: 'Robot dimensions, sensor calibration values, PID controller gains.'
  },
  {
    concept: 'Messages',
    description: 'Data structures for communication',
    icon: Database,
    details: 'Messages define the data format for communication between nodes. ROS provides standard message types.',
    example: 'std_msgs/String, sensor_msgs/Image, geometry_msgs/Twist, nav_msgs/Odometry.'
  }
]

const ros2Features = [
  {
    feature: 'Real-time Performance',
    description: 'Deterministic communication with Quality of Service (QoS)',
    benefits: ['Predictable timing', 'Configurable reliability', 'Priority-based scheduling'],
    icon: Zap
  },
  {
    feature: 'Multi-language Support',
    description: 'C++, Python, Rust, and other languages',
    benefits: ['Language flexibility', 'Performance optimization', 'Ecosystem integration'],
    icon: Code
  },
  {
    feature: 'Security',
    description: 'Built-in security features and DDS-Security',
    benefits: ['Encrypted communication', 'Access control', 'Secure discovery'],
    icon: Shield
  },
  {
    feature: 'Modularity',
    description: 'Composable nodes and packages',
    benefits: ['Reusable components', 'Easy testing', 'Scalable architecture'],
    icon: Layers
  },
  {
    feature: 'Tooling',
    description: 'Comprehensive development and debugging tools',
    benefits: ['ROS 2 CLI', 'RViz visualization', 'RQT GUI tools', 'Logging and monitoring'],
    icon: Settings
  }
]

const architectureLayers = [
  {
    layer: 'Hardware Abstraction Layer',
    description: 'Device drivers and hardware interfaces',
    components: ['Sensor drivers', 'Actuator controllers', 'Communication interfaces'],
    examples: ['Camera drivers', 'Motor controllers', 'IMU interfaces']
  },
  {
    layer: 'Middleware Layer',
    description: 'Communication infrastructure and data flow',
    components: ['ROS 2 core', 'DDS implementation', 'Message passing', 'Service discovery'],
    examples: ['Node communication', 'Topic publishing', 'Parameter server', 'Action servers']
  },
  {
    layer: 'Capability Layer',
    description: 'High-level functionality and algorithms',
    components: ['Navigation stack', 'Perception pipeline', 'Motion planning', 'Control systems'],
    examples: ['SLAM algorithms', 'Path planning', 'Object detection', 'Force control']
  },
  {
    layer: 'Application Layer',
    description: 'Domain-specific applications and behaviors',
    components: ['Task execution', 'Behavior coordination', 'Human interaction', 'Mission planning'],
    examples: ['Delivery tasks', 'Inspection routines', 'Social interaction', 'Multi-robot coordination']
  }
]

const commonPackages = [
  {
    category: 'Navigation',
    packages: [
      { name: 'nav2_bringup', description: 'Navigation stack bringup and configuration' },
      { name: 'slam_toolbox', description: 'SLAM implementation with various algorithms' },
      { name: 'navigation2', description: 'Complete navigation stack with planning and control' }
    ]
  },
  {
    category: 'Perception',
    packages: [
      { name: 'vision_opencv', description: 'OpenCV integration for computer vision' },
      { name: 'image_transport', description: 'Image streaming and compression' },
      { name: 'pointcloud_to_laserscan', description: 'Point cloud to laser scan conversion' }
    ]
  },
  {
    category: 'Control',
    packages: [
      { name: 'ros2_control', description: 'Unified control framework for actuators' },
      { name: 'controller_manager', description: 'Hardware controller management' },
      { name: 'joint_state_publisher', description: 'Joint state publishing and visualization' }
    ]
  },
  {
    category: 'Simulation',
    packages: [
      { name: 'gazebo_ros_pkgs', description: 'Gazebo simulation integration' },
      { name: 'robot_state_publisher', description: 'Robot state broadcasting' },
      { name: 'xacro', description: 'XML macro language for URDF' }
    ]
  }
]

export default function ROSFundamentalsPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8 max-w-6xl">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center space-x-4 mb-4">
            <Network className="h-12 w-12 text-primary" />
            <div>
              <h1 className="text-4xl font-bold">ROS Fundamentals</h1>
              <p className="text-xl text-muted-foreground">
                Robot Operating System Core Concepts and Architecture
              </p>
            </div>
            <Badge variant="default" className="text-sm">
              ROS 2 Rolling Jazzy
            </Badge>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <Card>
              <CardContent className="p-4 text-center">
                <Cpu className="h-8 w-8 text-blue-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">Nodes</div>
                <div className="text-sm text-muted-foreground">Computational Units</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <MessageSquare className="h-8 w-8 text-green-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">Topics</div>
                <div className="text-sm text-muted-foreground">Data Streaming</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Zap className="h-8 w-8 text-yellow-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">Services</div>
                <div className="text-sm text-muted-foreground">Request-Response</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Activity className="h-8 w-8 text-purple-500 mx-auto mb-2" />
                <div className="text-2xl font-bold">Actions</div>
                <div className="text-sm text-muted-foreground">Long-running Tasks</div>
              </CardContent>
            </Card>
          </div>
        </div>

        <Tabs defaultValue="overview" className="space-y-6">
          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="concepts">Core Concepts</TabsTrigger>
            <TabsTrigger value="architecture">Architecture</TabsTrigger>
            <TabsTrigger value="packages">Packages</TabsTrigger>
            <TabsTrigger value="integration">Integration</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>What is ROS?</CardTitle>
                <CardDescription>
                  Robot Operating System - A flexible framework for writing robot software
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h3 className="font-semibold mb-3">ROS 2 Rolling Jazzy Jalisco</h3>
                    <ul className="space-y-2 text-sm">
                      <li className="flex items-center space-x-2">
                        <CheckCircle className="h-4 w-4 text-green-500" />
                        <span>Latest stable ROS 2 distribution</span>
                      </li>
                      <li className="flex items-center space-x-2">
                        <CheckCircle className="h-4 w-4 text-green-500" />
                        <span>Data Distribution Service (DDS) middleware</span>
                      </li>
                      <li className="flex items-center space-x-2">
                        <CheckCircle className="h-4 w-4 text-green-500" />
                        <span>Real-time performance capabilities</span>
                      </li>
                      <li className="flex items-center space-x-2">
                        <CheckCircle className="h-4 w-4 text-green-500" />
                        <span>Multi-language support (C++, Python, Rust)</span>
                      </li>
                      <li className="flex items-center space-x-2">
                        <CheckCircle className="h-4 w-4 text-green-500" />
                        <span>Security features and access control</span>
                      </li>
                    </ul>
                  </div>
                  <div>
                    <h3 className="font-semibold mb-3">Why ROS?</h3>
                    <ul className="space-y-2 text-sm">
                      <li className="flex items-center space-x-2">
                        <Info className="h-4 w-4 text-blue-500" />
                        <span>Standardized communication protocols</span>
                      </li>
                      <li className="flex items-center space-x-2">
                        <Info className="h-4 w-4 text-blue-500" />
                        <span>Rich ecosystem of tools and packages</span>
                      </li>
                      <li className="flex items-center space-x-2">
                        <Info className="h-4 w-4 text-blue-500" />
                        <span>Hardware abstraction and modularity</span>
                      </li>
                      <li className="flex items-center space-x-2">
                        <Info className="h-4 w-4 text-blue-500" />
                        <span>Active community and commercial support</span>
                      </li>
                      <li className="flex items-center space-x-2">
                        <Info className="h-4 w-4 text-blue-500" />
                        <span>Proven in research and industry applications</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>ROS 2 Key Features</CardTitle>
                <CardDescription>
                  Major improvements over ROS 1 with modern robotics capabilities
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {ros2Features.map((feature) => (
                    <div key={feature.feature} className="border rounded-lg p-4">
                      <div className="flex items-center space-x-3 mb-3">
                        <feature.icon className="h-6 w-6 text-primary" />
                        <h4 className="font-medium">{feature.feature}</h4>
                      </div>
                      <p className="text-sm text-muted-foreground mb-3">{feature.description}</p>
                      <ul className="text-xs space-y-1">
                        {feature.benefits.map((benefit) => (
                          <li key={benefit} className="flex items-center space-x-1">
                            <CheckCircle className="h-2 w-2 text-green-500" />
                            <span>{benefit}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="concepts" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Core ROS Concepts</CardTitle>
                <CardDescription>
                  Fundamental building blocks of ROS 2 applications
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {rosConcepts.map((concept) => (
                    <div key={concept.concept} className="border rounded-lg p-4">
                      <div className="flex items-center space-x-3 mb-3">
                        <concept.icon className="h-6 w-6 text-primary" />
                        <div>
                          <h4 className="font-medium">{concept.concept}</h4>
                          <p className="text-sm text-muted-foreground">{concept.description}</p>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <p className="text-sm">{concept.details}</p>
                        <div className="bg-gray-50 p-2 rounded text-xs">
                          <strong>Example:</strong> {concept.example}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Communication Patterns</CardTitle>
                <CardDescription>
                  Understanding ROS 2 communication architecture and when to use each pattern
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
                    <div>
                      <h4 className="font-medium">Topics (Asynchronous)</h4>
                      <p className="text-sm text-muted-foreground">Use for continuous data streams, sensor data, status updates</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
                    <div>
                      <h4 className="font-medium">Services (Synchronous)</h4>
                      <p className="text-sm text-muted-foreground">Use for queries, configuration changes, immediate actions</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
                    <div>
                      <h4 className="font-medium">Actions (Long-running)</h4>
                      <p className="text-sm text-muted-foreground">Use for navigation, manipulation, complex sequences with feedback</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
                    <div>
                      <h4 className="font-medium">Parameters (Configuration)</h4>
                      <p className="text-sm text-muted-foreground">Use for system-wide settings, calibration values, runtime configuration</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="architecture" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>ROS 2 Architecture Layers</CardTitle>
                <CardDescription>
                  Hierarchical architecture from hardware to application layers
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  {architectureLayers.map((layer, index) => (
                    <div key={layer.layer} className="border rounded-lg p-4">
                      <div className="flex items-center space-x-3 mb-3">
                        <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">
                          {index + 1}
                        </div>
                        <div>
                          <h4 className="font-medium">{layer.layer}</h4>
                          <p className="text-sm text-muted-foreground">{layer.description}</p>
                        </div>
                      </div>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <h5 className="font-medium text-sm mb-2">Components</h5>
                          <ul className="text-xs space-y-1">
                            {layer.components.map((component) => (
                              <li key={component} className="flex items-center space-x-1">
                                <CheckCircle className="h-2 w-2 text-green-500" />
                                <span>{component}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                        <div>
                          <h5 className="font-medium text-sm mb-2">Examples</h5>
                          <ul className="text-xs space-y-1">
                            {layer.examples.map((example) => (
                              <li key={example} className="flex items-center space-x-1">
                                <Info className="h-2 w-2 text-blue-500" />
                                <span>{example}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Quality of Service (QoS)</CardTitle>
                <CardDescription>
                  ROS 2 QoS policies for reliable and real-time communication
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-medium mb-3">Reliability Policies</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span>Reliable:</span>
                        <span className="text-muted-foreground">Guaranteed delivery</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Best Effort:</span>
                        <span className="text-muted-foreground">No delivery guarantee</span>
                      </div>
                    </div>
                  </div>
                  <div>
                    <h4 className="font-medium mb-3">Durability Policies</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span>Transient Local:</span>
                        <span className="text-muted-foreground">Late joiner gets last value</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Volatile:</span>
                        <span className="text-muted-foreground">No history kept</span>
                      </div>
                    </div>
                  </div>
                  <div>
                    <h4 className="font-medium mb-3">History Policies</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span>Keep Last:</span>
                        <span className="text-muted-foreground">Keep N most recent samples</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Keep All:</span>
                        <span className="text-muted-foreground">Keep all samples (bounded)</span>
                      </div>
                    </div>
                  </div>
                  <div>
                    <h4 className="font-medium mb-3">Deadline & Lifespan</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span>Deadline:</span>
                        <span className="text-muted-foreground">Maximum age of data</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Lifespan:</span>
                        <span className="text-muted-foreground">Data validity period</span>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="packages" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Essential ROS 2 Packages</CardTitle>
                <CardDescription>
                  Key packages organized by functionality for robotics applications
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {commonPackages.map((category) => (
                    <div key={category.category} className="border rounded-lg p-4">
                      <h4 className="font-medium mb-3">{category.category}</h4>
                      <div className="space-y-3">
                        {category.packages.map((pkg) => (
                          <div key={pkg.name} className="border-l-2 border-primary pl-3">
                            <h5 className="font-medium text-sm">{pkg.name}</h5>
                            <p className="text-xs text-muted-foreground">{pkg.description}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Package Management</CardTitle>
                <CardDescription>
                  ROS 2 package structure and development workflow
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
                    <div>
                      <h4 className="font-medium">Package Structure</h4>
                      <p className="text-sm text-muted-foreground">Standard directory layout with CMakeLists.txt, package.xml, and source files</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
                    <div>
                      <h4 className="font-medium">Dependencies</h4>
                      <p className="text-sm text-muted-foreground">Declare build and runtime dependencies in package.xml</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
                    <div>
                      <h4 className="font-medium">Build System</h4>
                      <p className="text-sm text-muted-foreground">ament_cmake for C++, ament_python for Python packages</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
                    <div>
                      <h4 className="font-medium">Testing</h4>
                      <p className="text-sm text-muted-foreground">Integrated testing with launch_testing and pytest</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="integration" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>ROS 2 Integration with Robotics MCP</CardTitle>
                <CardDescription>
                  How ROS 2 integrates with our Robotics MCP ecosystem
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
                    <div>
                      <h4 className="font-medium">MCP Bridge Nodes</h4>
                      <p className="text-sm text-muted-foreground">ROS 2 nodes that interface with Robotics MCP servers for unified control</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
                    <div>
                      <h4 className="font-medium">Topic Mapping</h4>
                      <p className="text-sm text-muted-foreground">ROS topics mapped to MCP tools and vice versa for seamless integration</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
                    <div>
                      <h4 className="font-medium">Parameter Synchronization</h4>
                      <p className="text-sm text-muted-foreground">ROS parameters synchronized with MCP configuration for consistent settings</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
                    <div>
                      <h4 className="font-medium">Web Interface Integration</h4>
                      <p className="text-sm text-muted-foreground">ROS diagnostics and control exposed through the web dashboard</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Development Tools</CardTitle>
                  <CardDescription>
                    Essential tools for ROS 2 development
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-center space-x-2">
                      <CheckCircle className="h-3 w-3 text-green-500" />
                      <span>ros2 CLI - Command line interface</span>
                    </li>
                    <li className="flex items-center space-x-2">
                      <CheckCircle className="h-3 w-3 text-green-500" />
                      <span>RViz - 3D visualization tool</span>
                    </li>
                    <li className="flex items-center space-x-2">
                      <CheckCircle className="h-3 w-3 text-green-500" />
                      <span>rqt - GUI tools suite</span>
                    </li>
                    <li className="flex items-center space-x-2">
                      <CheckCircle className="h-3 w-3 text-green-500" />
                      <span>ros2 bag - Data recording and playback</span>
                    </li>
                    <li className="flex items-center space-x-2">
                      <CheckCircle className="h-3 w-3 text-green-500" />
                      <span>colcon - Build system</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Best Practices</CardTitle>
                  <CardDescription>
                    Recommended practices for ROS 2 development
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-center space-x-2">
                      <Info className="h-3 w-3 text-blue-500" />
                      <span>Use QoS policies for real-time requirements</span>
                    </li>
                    <li className="flex items-center space-x-2">
                      <Info className="h-3 w-3 text-blue-500" />
                      <span>Design for composability and modularity</span>
                    </li>
                    <li className="flex items-center space-x-2">
                      <Info className="h-3 w-3 text-blue-500" />
                      <span>Implement proper error handling and logging</span>
                    </li>
                    <li className="flex items-center space-x-2">
                      <Info className="h-3 w-3 text-blue-500" />
                      <span>Use launch files for complex system startup</span>
                    </li>
                    <li className="flex items-center space-x-2">
                      <Info className="h-3 w-3 text-blue-500" />
                      <span>Document interfaces and dependencies</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>

        {/* Navigation Footer */}
        <div className="mt-12 pt-8 border-t">
          <div className="flex items-center justify-between">
            <Link to="/docs">
              <Button variant="outline">
                <ChevronRight className="mr-2 h-4 w-4 rotate-180" />
                Back to Documentation
              </Button>
            </Link>
            <div className="flex space-x-2">
              <Link to="/docs/ros-integration">
                <Button variant="outline">
                  ROS Integration
                  <ChevronRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
              <Link to="/docs/mcp-server">
                <Button variant="outline">
                  MCP Server
                  <ChevronRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}