import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Header } from '@/components/layout/header'
import { Book, Code, Terminal, GitBranch, Zap, FileText, Search } from 'lucide-react'

export default function DocsPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-studio-black">
        {/* Hero */}
        <section className="relative border-b border-studio-medium bg-gradient-to-br from-phoenix-fire/10 via-transparent to-sankofa-gold/10 py-24 px-4">
          <div className="mx-auto max-w-4xl">
            <div className="mb-8 flex items-center justify-center">
              <Search className="mr-4 h-8 w-8 text-gray-400" />
              <input
                type="search"
                placeholder="Search documentation..."
                className="w-full max-w-md rounded-lg border border-studio-medium bg-studio-dark px-4 py-3 text-white placeholder-gray-400 focus:border-phoenix-fire focus:outline-none focus:ring-1 focus:ring-phoenix-fire"
              />
            </div>
            <h1 className="mb-6 text-center text-5xl font-bold text-white md:text-6xl">
              Documentation
            </h1>
            <p className="mb-8 text-center text-xl text-gray-300">
              Comprehensive guides, API references, and tutorials
            </p>
          </div>
        </section>

        {/* Quick Start */}
        <section className="py-24 px-4">
          <div className="mx-auto max-w-6xl">
            <h2 className="mb-8 text-3xl font-bold text-white">Getting Started</h2>
            <div className="grid gap-6 md:grid-cols-3">
              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/developers/docs/quickstart">
                  <CardHeader>
                    <Zap className="mb-2 h-8 w-8 text-phoenix-fire" />
                    <CardTitle>Quick Start</CardTitle>
                    <CardDescription>
                      Get up and running in 5 minutes
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/developers/docs/installation">
                  <CardHeader>
                    <Terminal className="mb-2 h-8 w-8 text-sankofa-gold" />
                    <CardTitle>Installation</CardTitle>
                    <CardDescription>
                      Install and configure Phoenix Nexus
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/developers/docs/concepts">
                  <CardHeader>
                    <Book className="mb-2 h-8 w-8 text-neon-cyan" />
                    <CardTitle>Core Concepts</CardTitle>
                    <CardDescription>
                      Understand the architecture
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>
            </div>
          </div>
        </section>

        {/* Documentation Sections */}
        <section className="border-t border-studio-medium bg-studio-dark py-24 px-4">
          <div className="mx-auto max-w-6xl">
            <h2 className="mb-8 text-3xl font-bold text-white">Documentation</h2>
            <div className="grid gap-8 md:grid-cols-2">
              <div>
                <Code className="mb-4 h-8 w-8 text-phoenix-fire" />
                <h3 className="mb-4 text-2xl font-bold text-white">API Reference</h3>
                <ul className="space-y-2 text-gray-300">
                  <li>
                    <Link href="/developers/docs/api/graphql" className="hover:text-phoenix-fire">
                      GraphQL API →
                    </Link>
                  </li>
                  <li>
                    <Link href="/developers/docs/api/rest" className="hover:text-phoenix-fire">
                      REST APIs →
                    </Link>
                  </li>
                  <li>
                    <Link href="/developers/docs/api/websocket" className="hover:text-phoenix-fire">
                      WebSocket APIs →
                    </Link>
                  </li>
                  <li>
                    <Link href="/developers/docs/api/authentication" className="hover:text-phoenix-fire">
                      Authentication →
                    </Link>
                  </li>
                </ul>
              </div>

              <div>
                <FileText className="mb-4 h-8 w-8 text-sankofa-gold" />
                <h3 className="mb-4 text-2xl font-bold text-white">Guides</h3>
                <ul className="space-y-2 text-gray-300">
                  <li>
                    <Link href="/developers/docs/guides/architecture" className="hover:text-sankofa-gold">
                      Architecture Guides →
                    </Link>
                  </li>
                  <li>
                    <Link href="/developers/docs/guides/security" className="hover:text-sankofa-gold">
                      Security Guides →
                    </Link>
                  </li>
                  <li>
                    <Link href="/developers/docs/guides/compliance" className="hover:text-sankofa-gold">
                      Compliance Guides →
                    </Link>
                  </li>
                  <li>
                    <Link href="/developers/docs/guides/best-practices" className="hover:text-sankofa-gold">
                      Best Practices →
                    </Link>
                  </li>
                </ul>
              </div>

              <div>
                <Book className="mb-4 h-8 w-8 text-neon-cyan" />
                <h3 className="mb-4 text-2xl font-bold text-white">Tutorials</h3>
                <ul className="space-y-2 text-gray-300">
                  <li>
                    <Link href="/developers/docs/tutorials/first-app" className="hover:text-neon-cyan">
                      Build Your First App →
                    </Link>
                  </li>
                  <li>
                    <Link href="/developers/docs/tutorials/multi-tenancy" className="hover:text-neon-cyan">
                      Multi-Tenancy Setup →
                    </Link>
                  </li>
                  <li>
                    <Link href="/developers/docs/tutorials/integration" className="hover:text-neon-cyan">
                      Integration Examples →
                    </Link>
                  </li>
                </ul>
              </div>

              <div>
                <GitBranch className="mb-4 h-8 w-8 text-phoenix-fire" />
                <h3 className="mb-4 text-2xl font-bold text-white">SDKs & Tools</h3>
                <ul className="space-y-2 text-gray-300">
                  <li>
                    <Link href="/developers/docs/sdks/cli" className="hover:text-phoenix-fire">
                      CLI Documentation →
                    </Link>
                  </li>
                  <li>
                    <Link href="/developers/docs/sdks/typescript" className="hover:text-phoenix-fire">
                      TypeScript SDK →
                    </Link>
                  </li>
                  <li>
                    <Link href="/developers/docs/sdks/terraform" className="hover:text-phoenix-fire">
                      Terraform Provider →
                    </Link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="py-24 px-4">
          <div className="mx-auto max-w-4xl text-center">
            <h2 className="mb-6 text-4xl font-bold text-white">
              Need More Help?
            </h2>
            <p className="mb-8 text-xl text-gray-400">
              Access the developer portal for API keys and test environments
            </p>
            <Button variant="phoenix" size="lg" asChild>
              <Link href="/portal/developers">Developer Portal</Link>
            </Button>
          </div>
        </section>
      </main>
    </>
  )
}

