import { Navigation } from '@/components/navigation'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { ArrowLeft, BookOpen, Code, Users, Shield } from 'lucide-react'
import Link from 'next/link'

export default function DocsPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-background via-background to-orange-50/30">
      {/* Navigation */}
      <Navigation />

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Header */}
        <div className="mb-8">
          <Link href="/">
            <Button variant="ghost" className="mb-4">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Home
            </Button>
          </Link>
          <h1 className="text-4xl md:text-6xl font-black text-foreground mb-4 space-age-glow inline-block px-6 py-3 rounded-lg">
            DOCUMENTATION
          </h1>
          <p className="text-lg text-muted-foreground font-mono">
            Complete guide to Sharenet - from installation to advanced usage
          </p>
        </div>

        {/* Documentation Sections */}
        <div className="grid md:grid-cols-2 gap-8">
          {/* Getting Started */}
          <Card className="border-2 border-primary/20 bg-card/50 hover:space-age-glow transition-all">
            <CardHeader>
              <CardTitle className="flex items-center text-foreground">
                <BookOpen className="h-6 w-6 mr-2 text-primary" />
                Getting Started
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2 text-muted-foreground">
                <li>• Quick installation guide</li>
                <li>• Setting up your first node</li>
                <li>• Basic configuration</li>
                <li>• Joining the network</li>
              </ul>
              <Button className="mt-4 w-full" variant="outline">
                Read Guide
              </Button>
            </CardContent>
          </Card>

          {/* API Reference */}
          <Card className="border-2 border-primary/20 bg-card/50 hover:space-age-glow transition-all">
            <CardHeader>
              <CardTitle className="flex items-center text-foreground">
                <Code className="h-6 w-6 mr-2 text-primary" />
                API Reference
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2 text-muted-foreground">
                <li>• REST API endpoints</li>
                <li>• WebSocket connections</li>
                <li>• Authentication methods</li>
                <li>• Rate limiting</li>
              </ul>
              <Button className="mt-4 w-full" variant="outline">
                View API
              </Button>
            </CardContent>
          </Card>

          {/* Community Guide */}
          <Card className="border-2 border-primary/20 bg-card/50 hover:space-age-glow transition-all">
            <CardHeader>
              <CardTitle className="flex items-center text-foreground">
                <Users className="h-6 w-6 mr-2 text-primary" />
                Community Guide
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2 text-muted-foreground">
                <li>• Contributing guidelines</li>
                <li>• Code of conduct</li>
                <li>• Community forums</li>
                <li>• Getting help</li>
              </ul>
              <Button className="mt-4 w-full" variant="outline">
                Join Community
              </Button>
            </CardContent>
          </Card>

          {/* SPL License */}
          <Card className="border-2 border-primary/20 bg-card/50 hover:space-age-glow transition-all">
            <CardHeader>
              <CardTitle className="flex items-center text-foreground">
                <Shield className="h-6 w-6 mr-2 text-primary" />
                Sharenet Public License
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2 text-muted-foreground">
                <li>• Full license text</li>
                <li>• Usage restrictions</li>
                <li>• Commercial prohibition</li>
                <li>• Modification rights</li>
              </ul>
              <Button className="mt-4 w-full" variant="outline">
                Read License
              </Button>
            </CardContent>
          </Card>
        </div>

        {/* Quick Start Section */}
        <Card className="mt-12 border-2 border-primary/20 bg-card/50">
          <CardHeader>
            <CardTitle className="text-2xl text-foreground">Quick Start</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <h3 className="font-bold text-foreground mb-2">1. Install Sharenet</h3>
                <code className="block bg-muted px-4 py-2 rounded font-mono text-sm terminal-border">
                  curl -s https://sharenet.org/install.sh | bash
                </code>
              </div>
              <div>
                <h3 className="font-bold text-foreground mb-2">2. Configure your node</h3>
                <code className="block bg-muted px-4 py-2 rounded font-mono text-sm terminal-border">
                  sharenet config init
                </code>
              </div>
              <div>
                <h3 className="font-bold text-foreground mb-2">3. Start the service</h3>
                <code className="block bg-muted px-4 py-2 rounded font-mono text-sm terminal-border">
                  sharenet start
                </code>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}