import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { PublicLayout } from '@/components/layout/public-layout'
import { Book, Code, GraduationCap, Shield, ArrowRight } from 'lucide-react'

export default function DocsPage() {
  const docSections = [
    {
      title: 'API Reference',
      description: 'REST API documentation, GraphQL schema, and SDK references',
      icon: Code,
      href: '/docs/api',
      categories: ['REST API', 'GraphQL', 'SDKs'],
    },
    {
      title: 'Conceptual Guides',
      description: 'Architecture overview, Well-Architected Framework, and best practices',
      icon: Book,
      href: '/docs/guides',
      categories: ['Architecture', 'Best Practices', 'Framework'],
    },
    {
      title: 'Tutorials & Quickstarts',
      description: 'Getting started guides, step-by-step tutorials, and sample code',
      icon: GraduationCap,
      href: '/docs/tutorials',
      categories: ['Quickstarts', 'Tutorials', 'Samples'],
    },
    {
      title: 'Governance & Architecture',
      description: 'Architecture blueprints, compliance guides, and security frameworks',
      icon: Shield,
      href: '/docs/governance',
      categories: ['Blueprints', 'Compliance', 'Security'],
    },
  ]

  return (
    <PublicLayout>
      <div className="min-h-screen bg-studio-black">
        {/* Hero Section */}
        <section className="relative flex min-h-[40vh] flex-col items-center justify-center overflow-hidden px-4">
          <div className="absolute inset-0 bg-gradient-to-br from-phoenix-fire/20 via-transparent to-sankofa-gold/20" />
          
          <div className="relative z-10 max-w-4xl text-center">
            <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
              Documentation & Learning
            </h1>
            
            <p className="mb-8 text-xl text-gray-300 md:text-2xl">
              Comprehensive guides, tutorials, and references for building on Sankofa Phoenix
            </p>
          </div>
        </section>

        {/* Documentation Sections */}
        <section className="py-24 px-4">
          <div className="mx-auto max-w-7xl">
            <div className="grid gap-8 md:grid-cols-2">
              {docSections.map((section) => {
                const Icon = section.icon
                return (
                  <Card key={section.href} className="hover:border-phoenix-fire transition-colors">
                    <CardHeader>
                      <div className="flex items-center gap-3 mb-2">
                        <Icon className="h-8 w-8 text-phoenix-fire" />
                        <CardTitle className="text-2xl text-white">{section.title}</CardTitle>
                      </div>
                      <CardDescription className="text-gray-400">
                        {section.description}
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="flex flex-wrap gap-2 mb-4">
                        {section.categories.map((category) => (
                          <span
                            key={category}
                            className="px-2 py-1 text-xs bg-studio-dark text-gray-400 rounded"
                          >
                            {category}
                          </span>
                        ))}
                      </div>
                      <Button variant="outline" className="w-full" asChild>
                        <Link href={section.href}>
                          Explore {section.title}
                          <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                    </CardContent>
                  </Card>
                )
              })}
            </div>
          </div>
        </section>

        {/* Quick Links */}
        <section className="py-16 px-4 bg-studio-dark">
          <div className="mx-auto max-w-4xl">
            <h2 className="mb-8 text-center text-3xl font-bold text-white">
              Quick Links
            </h2>
            <div className="grid gap-4 md:grid-cols-3">
              <Link
                href="/docs/api/graphql"
                className="p-4 bg-studio-black rounded-lg hover:border-phoenix-fire border border-studio-medium transition-colors"
              >
                <h3 className="text-lg font-semibold text-white mb-2">GraphQL API</h3>
                <p className="text-sm text-gray-400">Interactive API explorer</p>
              </Link>
              <Link
                href="/docs/tutorials/getting-started"
                className="p-4 bg-studio-black rounded-lg hover:border-phoenix-fire border border-studio-medium transition-colors"
              >
                <h3 className="text-lg font-semibold text-white mb-2">Getting Started</h3>
                <p className="text-sm text-gray-400">Your first deployment</p>
              </Link>
              <Link
                href="/docs/guides/architecture"
                className="p-4 bg-studio-black rounded-lg hover:border-phoenix-fire border border-studio-medium transition-colors"
              >
                <h3 className="text-lg font-semibold text-white mb-2">Architecture</h3>
                <p className="text-sm text-gray-400">System architecture overview</p>
              </Link>
            </div>
          </div>
        </section>
      </div>
    </PublicLayout>
  )
}

