import React from 'react'
import { Link } from 'react-router-dom'
import { Bot, Zap, Map, Settings, BookOpen, ArrowRight, CheckCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
const steps = [
{
title: 'Start Robotics MCP Server',
description: 'Run the MCP server on port 12230. See docs for setup.',
link: '/docs',
},
{
title: 'Configure Your Robot',
description: 'Add Dreame, Yahboom, or other robots in Settings.',
link: '/settings',
},
{
title: 'Control Your Robot',
description: 'Use Robot Control or Flying & Cleaning for Dreame D20 Pro.',
link: '/robot-control/flying-cleaning',
},
{
title: 'View LIDAR Maps',
description: 'Fetch and visualize maps from your vacuum robot.',
link: '/map',
},
]
export default function OnboardingPage() {
return (
<div className="max-w-4xl mx-auto p-6 space-y-8">
<div className="text-center space-y-4">
<h1 className="text-3xl font-bold bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
Getting Started with Robotics MCP
</h1>
<p className="text-muted-foreground text-lg">
Connect your robots, configure settings, and start controlling from one dashboard.
</p>
</div>
<div className="grid gap-4 md:grid-cols-2">
{steps.map((step, i) => (
<Card key={i} className="hover:border-primary/50 transition-colors">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<CheckCircle className="h-5 w-5 text-green-500" />
{step.title}
</CardTitle>
<CardDescription>{step.description}</CardDescription>
</CardHeader>
<CardContent>
<Link to={step.link}>
<Button variant="outline" size="sm">
Go <ArrowRight className="h-4 w-4 ml-1" />
</Button>
</Link>
</CardContent>
</Card>
))}
</div>
<Card>
<CardHeader>
<CardTitle>Quick Links</CardTitle>
<CardDescription>Essential pages for robot control</CardDescription>
</CardHeader>
<CardContent className="flex flex-wrap gap-4">
<Link to="/robot-control">
<Button variant="outline">
<Bot className="h-4 w-4 mr-2" />
Robot Control
</Button>
</Link>
<Link to="/robot-control/flying-cleaning">
<Button variant="outline">
<Zap className="h-4 w-4 mr-2" />
Dreame D20 Pro
</Button>
</Link>
<Link to="/map">
<Button variant="outline">
<Map className="h-4 w-4 mr-2" />
Live Map
</Button>
</Link>
<Link to="/settings">
<Button variant="outline">
<Settings className="h-4 w-4 mr-2" />
Settings
</Button>
</Link>
<Link to="/docs">
<Button variant="outline">
<BookOpen className="h-4 w-4 mr-2" />
Documentation
</Button>
</Link>
</CardContent>
</Card>
</div>
)
}
