templates/api-docs.tsx

import { motion } from 'framer-motion'
import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
import { HanzoLogo } from '@/components/logo'
import { Book, Code2, Terminal, FileJson, Key, Shield, Zap, Globe, GitBranch, Clock, CheckCircle, Copy, ChevronRight, Database, Cloud } from 'lucide-react'

export default function ApiDocsTemplate() {
  return (
    <div className="min-h-screen bg-black text-white">
      {/* Animated Background */}
      <div className="fixed inset-0 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-gray-950 via-black to-gray-950" />
        {/* Grid pattern */}
        <div className="absolute inset-0 opacity-10">
          <div className="absolute inset-0" style={{
            backgroundImage: `linear-gradient(to right, white 1px, transparent 1px),
                             linear-gradient(to bottom, white 1px, transparent 1px)`,
            backgroundSize: '50px 50px'
          }} />
        </div>
      </div>

      {/* Header */}
      <header className="relative z-10 p-8">
        <nav className="flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
              <HanzoLogo className="w-6 h-6 text-black" />
            </div>
            <span className="text-xl font-bold">Hanzo API</span>
          </div>
          <div className="flex gap-2">
            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
              Guides
            </Button>
            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
              Reference
            </Button>
            <Button className="bg-white text-black hover:bg-gray-200">
              Get API Key
            </Button>
          </div>
        </nav>
      </header>

      {/* Hero Section */}
      <section className="relative z-10 px-8 py-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="max-w-4xl mx-auto text-center"
        >
          <Badge variant="secondary" className="mb-6 bg-white/10 text-white border-white/20">
            <Terminal className="w-4 h-4 mr-2" />
            RESTful & GraphQL APIs
          </Badge>

          <h1 className="text-6xl md:text-7xl font-bold mb-6">
            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
              Developer-First
            </span>
            <br />
            <span className="text-white">API Platform</span>
          </h1>

          <p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
            Comprehensive API documentation with interactive examples, SDKs for every language,
            and real-time testing playground.
          </p>

          {/* Code Example */}
          <Card className="bg-gray-950/80 border-gray-800 backdrop-blur-xl text-left">
            <CardHeader className="bg-gray-900/80 border-b border-gray-800">
              <div className="flex items-center justify-between">
                <div className="flex gap-4">
                  <button className="text-white text-sm font-medium">cURL</button>
                  <button className="text-gray-500 text-sm">JavaScript</button>
                  <button className="text-gray-500 text-sm">Python</button>
                  <button className="text-gray-500 text-sm">Go</button>
                </div>
                <Button size="sm" variant="ghost" className="text-gray-400 hover:text-white">
                  <Copy className="w-4 h-4" />
                </Button>
              </div>
            </CardHeader>
            <CardContent className="p-6">
              <pre className="text-sm font-mono">
                <code>
                  <span className="text-gray-400">curl</span> <span className="text-gray-300">-X POST</span> <span className="text-white">https://api.hanzo.ai/v1/chat</span> \{"\n"}
                  {"  "}<span className="text-gray-300">-H</span> <span className="text-gray-400">"Authorization: Bearer $HANZO_API_KEY"</span> \{"\n"}
                  {"  "}<span className="text-gray-300">-H</span> <span className="text-gray-400">"Content-Type: application/json"</span> \{"\n"}
                  {"  "}<span className="text-gray-300">-d</span> <span className="text-gray-400">'{"{"}</span>{"\n"}
                  {"    "}<span className="text-gray-400">"model":</span> <span className="text-gray-300">"gpt-4"</span>,{"\n"}
                  {"    "}<span className="text-gray-400">"messages":</span> [{"{"}{"\n"}
                  {"      "}<span className="text-gray-400">"role":</span> <span className="text-gray-300">"user"</span>,{"\n"}
                  {"      "}<span className="text-gray-400">"content":</span> <span className="text-gray-300">"Hello, API!"</span>{"\n"}
                  {"    "}{"}"}]{"\n"}
                  {"  "}{"}"}'
                </code>
              </pre>
            </CardContent>
          </Card>
        </motion.div>
      </section>

      {/* Quick Start */}
      <section className="relative z-10 px-8 py-16">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12">
            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
              Get Started in Minutes
            </span>
          </h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { 
                step: "1", 
                title: "Get Your API Key", 
                desc: "Sign up and generate your API key from the dashboard",
                icon: Key 
              },
              { 
                step: "2", 
                title: "Install SDK", 
                desc: "Choose from our official SDKs or use REST directly",
                icon: Code2 
              },
              { 
                step: "3", 
                title: "Make Your First Call", 
                desc: "Start making API calls with our interactive examples",
                icon: Zap 
              }
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 * i }}
              >
                <Card className="bg-gray-950/50 border-gray-800 hover:border-white/20 transition-all backdrop-blur-xl h-full">
                  <CardContent className="p-6">
                    <div className="flex items-center gap-4 mb-4">
                      <div className="w-12 h-12 bg-gradient-to-br from-gray-700 to-gray-800 rounded-full flex items-center justify-center text-white font-bold">
                        {item.step}
                      </div>
                      <item.icon className="w-6 h-6 text-white" />
                    </div>
                    <h3 className="text-lg font-semibold text-white mb-2">{item.title}</h3>
                    <p className="text-sm text-gray-400">{item.desc}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* API Endpoints */}
      <section className="relative z-10 px-8 py-16">
        <div className="max-w-6xl mx-auto">
          <Card className="bg-gray-950/80 border-gray-800 backdrop-blur-xl">
            <CardHeader>
              <CardTitle className="text-2xl text-white">Popular Endpoints</CardTitle>
              <CardDescription className="text-gray-400">
                Explore our most-used API endpoints
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {[
                { method: "POST", path: "/v1/chat/completions", desc: "Generate chat completions", status: "stable" },
                { method: "POST", path: "/v1/embeddings", desc: "Create text embeddings", status: "stable" },
                { method: "GET", path: "/v1/models", desc: "List available models", status: "stable" },
                { method: "POST", path: "/v1/images/generations", desc: "Generate images from text", status: "beta" },
                { method: "POST", path: "/v1/audio/transcriptions", desc: "Transcribe audio to text", status: "stable" },
                { method: "GET", path: "/v1/usage", desc: "Get usage statistics", status: "stable" }
              ].map((endpoint, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.05 * i }}
                  className="flex items-center justify-between p-4 bg-gray-900/50 border border-gray-800 rounded-lg hover:border-white/20 transition-colors group"
                >
                  <div className="flex items-center gap-4">
                    <Badge className={`
                      ${endpoint.method === 'GET' ? 'bg-blue-500/20 text-blue-400' : 'bg-green-500/20 text-green-400'}
                      border-0 font-mono
                    `}>
                      {endpoint.method}
                    </Badge>
                    <div>
                      <code className="text-sm text-white">{endpoint.path}</code>
                      <p className="text-xs text-gray-500 mt-1">{endpoint.desc}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge className={`
                      ${endpoint.status === 'stable' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'}
                      border-0 text-xs
                    `}>
                      {endpoint.status}
                    </Badge>
                    <ChevronRight className="w-4 h-4 text-gray-500 group-hover:text-white transition-colors" />
                  </div>
                </motion.div>
              ))}
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Features */}
      <section className="relative z-10 px-8 py-16">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12">
            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
              Enterprise-Grade Features
            </span>
          </h2>
          <div className="grid md:grid-cols-4 gap-4">
            {[
              { icon: Shield, title: "Authentication", desc: "OAuth 2.0 & API Keys" },
              { icon: Clock, title: "Rate Limiting", desc: "Configurable limits" },
              { icon: Globe, title: "Global CDN", desc: "Low latency worldwide" },
              { icon: GitBranch, title: "Versioning", desc: "Stable API versions" },
              { icon: FileJson, title: "JSON & GraphQL", desc: "Multiple formats" },
              { icon: Database, title: "Webhooks", desc: "Real-time events" },
              { icon: Cloud, title: "99.9% Uptime", desc: "High availability" },
              { icon: CheckCircle, title: "Type Safety", desc: "OpenAPI 3.0 spec" }
            ].map((feature, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.03 * i }}
              >
                <Card className="bg-gray-950/50 border-gray-800 hover:border-white/20 transition-all backdrop-blur-xl h-full">
                  <CardContent className="p-4">
                    <feature.icon className="w-6 h-6 text-white mb-2" />
                    <div className="text-sm font-semibold text-white">{feature.title}</div>
                    <div className="text-xs text-gray-400 mt-1">{feature.desc}</div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* SDK Section */}
      <section className="relative z-10 px-8 py-16">
        <Card className="max-w-4xl mx-auto bg-gray-950/80 border-gray-800 backdrop-blur-xl">
          <CardHeader className="text-center">
            <CardTitle className="text-2xl text-white">Official SDKs</CardTitle>
            <CardDescription className="text-gray-400">
              Native libraries for your favorite language
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {[
                { name: 'Python', cmd: 'pip install hanzo' },
                { name: 'JavaScript', cmd: 'npm install @hanzo/sdk' },
                { name: 'Go', cmd: 'go get github.com/hanzo/go' },
                { name: 'Rust', cmd: 'cargo add hanzo' },
                { name: 'Ruby', cmd: 'gem install hanzo' },
                { name: 'PHP', cmd: 'composer require hanzo/sdk' },
                { name: 'Java', cmd: 'implementation "ai.hanzo:sdk"' },
                { name: '.NET', cmd: 'dotnet add package Hanzo' }
              ].map((sdk, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.03 * i }}
                  className="bg-gray-900/50 border border-gray-800 rounded-lg p-3 hover:border-white/20 transition-colors"
                >
                  <div className="text-sm font-semibold text-white mb-1">{sdk.name}</div>
                  <code className="text-xs text-gray-500">{sdk.cmd}</code>
                </motion.div>
              ))}
            </div>
          </CardContent>
        </Card>
      </section>

      {/* CTA Section */}
      <section className="relative z-10 px-8 py-16 text-center">
        <Card className="max-w-4xl mx-auto bg-gradient-to-r from-gray-900 to-gray-950 border-gray-800">
          <CardContent className="p-12">
            <Book className="w-12 h-12 text-white mx-auto mb-6" />
            <h2 className="text-4xl font-bold text-white mb-6">
              Build Something Amazing
            </h2>
            <p className="text-xl text-gray-400 mb-8">
              Start with 1M free API calls per month. No credit card required.
            </p>
            <div className="flex gap-4 justify-center">
              <Button size="lg" className="bg-white text-black hover:bg-gray-200">
                Start Building
              </Button>
              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white hover:text-black">
                View Full Docs
              </Button>
            </div>
          </CardContent>
        </Card>
      </section>
    </div>
  )
}