import React from 'react'
import { Link } from 'react-router-dom'
import { Bot, Zap, Map, Activity, Sparkles } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
export default function HomePage() {
const quickActions = [
{
title: 'Robot Control Center',
description: 'Control all your robots from one interface',
icon: Bot,
link: '/robot-control',
color: 'bg-blue-500 hover:bg-blue-600'
},
{
title: 'Dreame D20 Pro',
description: 'Vacuum robot with LIDAR mapping',
icon: Zap,
link: '/robot-control/flying-cleaning',
color: 'bg-green-500 hover:bg-green-600'
},
{
title: 'Live Map',
description: 'Real-time robot positioning and navigation',
icon: Map,
link: '/map',
color: 'bg-purple-500 hover:bg-purple-600'
}
]
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-background dark:via-background dark:to-background">
<div className="container mx-auto px-4 py-8 max-w-7xl">
{/* Onboarding CTA */}
<Link to="/onboarding" className="block mb-8">
<div className="flex items-center gap-3 p-4 rounded-lg border bg-card hover:bg-accent/10 transition-colors">
<Sparkles className="h-6 w-6 text-primary shrink-0" />
<div className="flex-1">
<div className="font-semibold">New here? Complete the onboarding guide</div>
<div className="text-sm text-muted-foreground">Setup robots, configure settings, get started</div>
</div>
<Button variant="outline" size="sm">Get Started</Button>
</div>
</Link>
{/* Header */}
<div className="mb-8">
<div className="flex items-center justify-center mb-6">
<div className="relative">
<Bot className="h-16 w-16 text-primary animate-pulse" />
<div className="absolute -top-1 -right-1 h-6 w-6 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-ping"></div>
</div>
</div>
<h1 className="text-4xl lg:text-6xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 bg-clip-text text-transparent text-center mb-6">
Robotics Control Center
</h1>
<p className="text-xl lg:text-2xl text-gray-600 max-w-3xl mx-auto text-center mb-8 leading-relaxed">
Unified control interface for all your robots - from wheeled platforms to aerial drones and smart home devices.
</p>
</div>
{/* Quick Actions */}
<div className="mb-12">
<h2 className="text-3xl font-bold text-center mb-8 text-gray-900">Quick Actions</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{quickActions.map((action, index) => (
<Card key={index} className="hover:shadow-xl transition-all duration-300 hover:scale-105 cursor-pointer">
<CardContent className="p-6">
<div className="flex items-center justify-center mb-4">
<div className={`p-3 rounded-full ${action.color.replace('hover:bg-', 'bg-')}`}>
<action.icon className="h-8 w-8 text-white" />
</div>
</div>
<h3 className="text-xl font-semibold text-center mb-2">{action.title}</h3>
<p className="text-gray-600 text-center mb-4">{action.description}</p>
<Button asChild className="w-full">
<Link to={action.link}>
Open {action.title}
</Link>
</Button>
</CardContent>
</Card>
))}
</div>
</div>
{/* Status Overview */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<Card className="text-center border-0 shadow-lg bg-gradient-to-br from-blue-50 to-blue-100">
<CardContent className="p-6">
<Bot className="h-8 w-8 text-blue-600 mx-auto mb-3" />
<div className="text-3xl font-bold text-blue-800 mb-1">4</div>
<div className="text-sm text-blue-600 font-medium">Robot Types</div>
</CardContent>
</Card>
<Card className="text-center border-0 shadow-lg bg-gradient-to-br from-green-50 to-green-100">
<CardContent className="p-6">
<Activity className="h-8 w-8 text-green-600 mx-auto mb-3" />
<div className="text-3xl font-bold text-green-800 mb-1">3</div>
<div className="text-sm text-green-600 font-medium">Active Systems</div>
</CardContent>
</Card>
<Card className="text-center border-0 shadow-lg bg-gradient-to-br from-purple-50 to-purple-100">
<CardContent className="p-6">
<Zap className="h-8 w-8 text-purple-600 mx-auto mb-3" />
<div className="text-3xl font-bold text-purple-800 mb-1">85%</div>
<div className="text-sm text-purple-600 font-medium">Avg Battery</div>
</CardContent>
</Card>
</div>
{/* System Status */}
<Card className="border-0 shadow-xl bg-gradient-to-r from-gray-50 to-blue-50">
<CardHeader>
<CardTitle className="text-2xl">System Status</CardTitle>
<CardDescription>Current status of all robot control systems</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="flex items-center space-x-3 p-4 bg-white rounded-lg">
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
<div>
<div className="font-medium">Robotics MCP Server</div>
<div className="text-sm text-gray-600">Active - Port 12230</div>
</div>
</div>
<div className="flex items-center space-x-3 p-4 bg-white rounded-lg">
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
<div>
<div className="font-medium">Web Interface</div>
<div className="text-sm text-gray-600">Running - Port 5173</div>
</div>
</div>
<div className="flex items-center space-x-3 p-4 bg-white rounded-lg">
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
<div>
<div className="font-medium">Dreame D20 Pro</div>
<div className="text-sm text-gray-600">Ready for connection</div>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
)
}
