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 { Code, Book, Key, Terminal, Zap, GitBranch } from 'lucide-react'

export default function DevelopersPage() {
  return (
    <PublicLayout>
      <div 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 text-center">
            <h1 className="mb-6 text-5xl font-bold text-white md:text-6xl">
              Developer Resources
            </h1>
            <p className="mb-8 text-xl text-gray-300">
              Build on Sankofa's Phoenix Nexus Cloud with comprehensive APIs, SDKs, and documentation
            </p>
            <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
              <Button variant="phoenix" size="lg" asChild>
                <Link href="/developers/docs">View Documentation</Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/portal/developers">Developer Portal</Link>
              </Button>
            </div>
          </div>
        </section>

        {/* Quick Links */}
        <section className="py-24 px-4">
          <div className="mx-auto max-w-6xl">
            <h2 className="mb-12 text-center text-4xl font-bold text-white">
              Get 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">
                  <CardHeader>
                    <Book className="mb-2 h-10 w-10 text-phoenix-fire" />
                    <CardTitle>Documentation</CardTitle>
                    <CardDescription>
                      API references, guides, tutorials, and architecture blueprints
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/portal/developers">
                  <CardHeader>
                    <Key className="mb-2 h-10 w-10 text-sankofa-gold" />
                    <CardTitle>Developer Portal</CardTitle>
                    <CardDescription>
                      API keys, test environments, logs, and developer tools
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/developers/quickstart">
                  <CardHeader>
                    <Zap className="mb-2 h-10 w-10 text-neon-cyan" />
                    <CardTitle>Quick Start</CardTitle>
                    <CardDescription>
                      Get up and running in minutes with our step-by-step guides
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>
            </div>
          </div>
        </section>

        {/* Developer Tools */}
        <section className="border-t border-studio-medium bg-studio-dark py-24 px-4">
          <div className="mx-auto max-w-6xl">
            <h2 className="mb-12 text-center text-4xl font-bold text-white">
              Developer Tools & Resources
            </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">GraphQL API</h3>
                <p className="mb-4 text-gray-300">
                  Powerful GraphQL API with real-time subscriptions, comprehensive type system, 
                  and built-in authentication.
                </p>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>• Interactive API explorer</li>
                  <li>• TypeScript SDK</li>
                  <li>• WebSocket subscriptions</li>
                  <li>• Rate limiting and quotas</li>
                </ul>
                <Button variant="outline" className="mt-4" asChild>
                  <Link href="/developers/docs/api">API Reference →</Link>
                </Button>
              </div>

              <div>
                <Terminal className="mb-4 h-8 w-8 text-sankofa-gold" />
                <h3 className="mb-4 text-2xl font-bold text-white">CLI & SDKs</h3>
                <p className="mb-4 text-gray-300">
                  Command-line tools and SDKs for popular languages to integrate Phoenix Nexus 
                  into your workflow.
                </p>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>• Phoenix CLI (Node.js, Python, Go)</li>
                  <li>• Terraform provider</li>
                  <li>• Kubernetes operators</li>
                  <li>• CI/CD integrations</li>
                </ul>
                <Button variant="outline" className="mt-4" asChild>
                  <Link href="/developers/docs/sdks">View SDKs →</Link>
                </Button>
              </div>

              <div>
                <GitBranch className="mb-4 h-8 w-8 text-neon-cyan" />
                <h3 className="mb-4 text-2xl font-bold text-white">GitOps & Infrastructure</h3>
                <p className="mb-4 text-gray-300">
                  Infrastructure as Code with Crossplane, ArgoCD, and GitOps workflows for 
                  declarative infrastructure management.
                </p>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>• Crossplane providers</li>
                  <li>• ArgoCD integration</li>
                  <li>• GitOps templates</li>
                  <li>• Infrastructure blueprints</li>
                </ul>
                <Button variant="outline" className="mt-4" asChild>
                  <Link href="/developers/docs/gitops">GitOps Guide →</Link>
                </Button>
              </div>

              <div>
                <Zap className="mb-4 h-8 w-8 text-phoenix-fire" />
                <h3 className="mb-4 text-2xl font-bold text-white">Test Environments</h3>
                <p className="mb-4 text-gray-300">
                  Sandbox environments for testing and development, with instant provisioning 
                  and automatic cleanup.
                </p>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>• Free tier for development</li>
                  <li>• Isolated test environments</li>
                  <li>• Pre-configured templates</li>
                  <li>• Integration testing tools</li>
                </ul>
                <Button variant="outline" className="mt-4" asChild>
                  <Link href="/portal/developers">Get API Keys →</Link>
                </Button>
              </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">
              Ready to Build?
            </h2>
            <p className="mb-8 text-xl text-gray-400">
              Start building on sovereign cloud infrastructure today
            </p>
            <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
              <Button variant="phoenix" size="lg" asChild>
                <Link href="/portal/developers">Access Developer Portal</Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/developers/docs">Read Documentation</Link>
              </Button>
            </div>
          </div>
        </section>
      </div>
    </PublicLayout>
  )
}

