'use client';

/**
 * Getting Started Page - Variant C: Modern & Visual (Shopify-inspired)
 *
 * Design Philosophy: Colorful, card-based, playful visual design
 *
 * Key Characteristics:
 * - NO section numbers (more visual/playful)
 * - Large emoji icons throughout (text-3xl)
 * - Gradient borders on all callout boxes
 * - More colorful design (purple/cyan/amber accents)
 * - Generous spacing (mb-12, p-6)
 * - Larger padding and gaps throughout
 * - Card-based sections with shadows
 * - Floating visual effects
 */

import { DocsLayoutC } from '@/components/docs/variant-c/DocsLayoutC';
import { DocsSidebarC } from '@/components/docs/variant-c/DocsSidebarC';
import { DocsTOCC } from '@/components/docs/variant-c/DocsTOCC';
import { Breadcrumb } from '@/components/docs/shared/Breadcrumb';
import { CodeBlock } from '@/components/docs/shared/CodeBlock';

const tocItems = [
  { id: 'introduction', text: 'Introduction', level: 2 },
  { id: 'quick-start', text: 'Quick Start', level: 2 },
  { id: 'installation', text: 'Installation', level: 3 },
  { id: 'authentication', text: 'Authentication', level: 3 },
  { id: 'first-request', text: 'Your First Request', level: 2 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

export default function GettingStartedPageC() {
  return (
    <DocsLayoutC
      sidebar={<DocsSidebarC currentPath="/docs/variant-c" />}
      toc={<DocsTOCC items={tocItems} />}
    >
      <Breadcrumb items={[{ label: 'Documentation', href: '/docs' }, { label: 'Getting Started' }]} />

      {/* Hero Section - Large and Colorful */}
      <div className="mb-12">
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-purple-500/20 to-cyan-500/20 border-2 border-purple-500/40 mb-6">
          <span className="text-2xl">🚀</span>
          <span className="text-sm font-bold text-white">START HERE</span>
        </div>
        <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">
          Getting Started
        </h1>
        <p className="text-xl text-gray-300 leading-relaxed">
          Welcome to the Banatie API documentation. Learn how to integrate AI-powered image
          generation into your applications in minutes.
        </p>
      </div>

      {/* Introduction */}
      <section id="introduction" className="mb-12">
        <div className="flex items-center gap-3 mb-6">
          <span className="text-3xl">👋</span>
          <h2 className="text-3xl font-bold text-white">Introduction</h2>
        </div>
        <div className="p-6 bg-gradient-to-br from-purple-500/10 to-transparent border-2 border-purple-500/30 rounded-2xl shadow-xl shadow-purple-500/20">
          <p className="text-gray-300 leading-relaxed mb-4">
            Banatie is a developer-first API for AI-powered image generation. Built on Google Gemini
            2.5 Flash and Imagen 4.0, it transforms text prompts and reference images into
            production-ready visuals.
          </p>
          <p className="text-gray-300 leading-relaxed">
            Whether you're building a content creation platform, e-commerce site, or creative tool,
            Banatie provides the infrastructure you need to generate high-quality images at scale.
          </p>
        </div>
      </section>

      {/* Quick Start */}
      <section id="quick-start" className="mb-12">
        <div className="flex items-center gap-3 mb-6">
          <span className="text-3xl">⚡</span>
          <h2 className="text-3xl font-bold text-white">Quick Start</h2>
        </div>

        <div id="installation" className="mb-8">
          <div className="flex items-center gap-2 mb-4">
            <span className="text-2xl">📦</span>
            <h3 className="text-2xl font-semibold text-white">Installation</h3>
          </div>
          <p className="text-gray-300 leading-relaxed mb-6">
            Banatie is a REST API, so you don't need to install any libraries. However, we provide
            SDKs for popular languages to make integration easier.
          </p>

          <CodeBlock
            code={`# Using npm (JavaScript/TypeScript)
npm install @banatie/sdk

# Using pip (Python)
pip install banatie

# Using Go
go get github.com/banatie/sdk-go`}
            language="bash"
            filename="Installation"
          />
        </div>

        <div id="authentication" className="mb-8">
          <div className="flex items-center gap-2 mb-4">
            <span className="text-2xl">🔑</span>
            <h3 className="text-2xl font-semibold text-white">Authentication</h3>
          </div>
          <p className="text-gray-300 leading-relaxed mb-6">
            All API requests require an API key. You can create an API key from your dashboard or
            using the bootstrap endpoint for initial setup.
          </p>

          <div className="p-6 bg-gradient-to-br from-amber-500/10 to-transparent border-2 border-amber-500/40 rounded-2xl mb-6 shadow-xl shadow-amber-500/20">
            <div className="flex items-start gap-3">
              <span className="text-2xl">💡</span>
              <div>
                <p className="text-sm font-bold text-amber-300 mb-2">Security Tip</p>
                <p className="text-sm text-amber-200">
                  Keep your API keys secure. Never commit them to public repositories or expose them
                  in client-side code.
                </p>
              </div>
            </div>
          </div>

          <CodeBlock
            code={`# Create your first API key (one-time bootstrap)
curl -X POST https://api.banatie.com/api/bootstrap/initial-key

# Save the returned key securely
export BANATIE_API_KEY="bnt_your_key_here"`}
            language="bash"
            filename="Get API Key"
          />
        </div>
      </section>

      {/* First Request */}
      <section id="first-request" className="mb-12">
        <div className="flex items-center gap-3 mb-6">
          <span className="text-3xl">🎨</span>
          <h2 className="text-3xl font-bold text-white">Your First Request</h2>
        </div>
        <p className="text-gray-300 leading-relaxed mb-6">
          Let's generate your first image! This example uses curl, but you can use any HTTP client
          or our SDKs.
        </p>

        <CodeBlock
          code={`curl -X POST https://api.banatie.com/api/text-to-image \\
  -H "X-API-Key: YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "prompt": "a serene mountain landscape at sunset",
    "filename": "mountain_sunset",
    "aspectRatio": "16:9",
    "autoEnhance": true
  }'`}
          language="bash"
          filename="Generate Image"
        />

        <div className="mt-6 p-6 bg-gradient-to-br from-cyan-500/10 to-transparent border-2 border-cyan-500/30 rounded-2xl shadow-xl shadow-cyan-500/20">
          <div className="flex items-start gap-3 mb-4">
            <span className="text-2xl">✨</span>
            <p className="text-sm font-bold text-cyan-300">Expected Response:</p>
          </div>
          <pre className="text-sm text-gray-300 overflow-x-auto bg-slate-950/50 p-4 rounded-xl border-2 border-cyan-500/20">
            <code>{`{
  "success": true,
  "data": {
    "url": "https://cdn.banatie.com/org/project/generated/2025-01/mountain_sunset.png",
    "filepath": "org/project/generated/2025-01/mountain_sunset.png",
    "width": 1920,
    "height": 1080,
    "promptEnhancement": {
      "enhancedPrompt": "A breathtaking mountain landscape..."
    }
  }
}`}</code>
          </pre>
        </div>
      </section>

      {/* Next Steps */}
      <section id="next-steps" className="mb-12">
        <div className="flex items-center gap-3 mb-8">
          <span className="text-3xl">🎯</span>
          <h2 className="text-3xl font-bold text-white">Next Steps</h2>
        </div>

        <div className="grid md:grid-cols-2 gap-6">
          <a
            href="/docs/variant-c/api/text-to-image"
            className="group p-6 bg-gradient-to-br from-purple-500/10 to-transparent border-2 border-purple-500/30 rounded-2xl hover:border-purple-500/60 transition-all duration-300 shadow-lg hover:shadow-purple-500/30 hover:scale-105"
          >
            <div className="text-3xl mb-4">📚</div>
            <h3 className="text-xl font-bold text-white mb-3 group-hover:text-purple-400 transition-colors">
              API Reference
            </h3>
            <p className="text-sm text-gray-400">
              Explore all available endpoints, parameters, and response formats.
            </p>
          </a>

          <a
            href="/docs/variant-c/guides/authentication"
            className="group p-6 bg-gradient-to-br from-cyan-500/10 to-transparent border-2 border-cyan-500/30 rounded-2xl hover:border-cyan-500/60 transition-all duration-300 shadow-lg hover:shadow-cyan-500/30 hover:scale-105"
          >
            <div className="text-3xl mb-4">🔐</div>
            <h3 className="text-xl font-bold text-white mb-3 group-hover:text-cyan-400 transition-colors">
              Authentication Guide
            </h3>
            <p className="text-sm text-gray-400">
              Learn about API keys, rate limits, and security best practices.
            </p>
          </a>

          <a
            href="/docs/variant-c/examples"
            className="group p-6 bg-gradient-to-br from-amber-500/10 to-transparent border-2 border-amber-500/30 rounded-2xl hover:border-amber-500/60 transition-all duration-300 shadow-lg hover:shadow-amber-500/30 hover:scale-105"
          >
            <div className="text-3xl mb-4">💡</div>
            <h3 className="text-xl font-bold text-white mb-3 group-hover:text-amber-400 transition-colors">
              Examples
            </h3>
            <p className="text-sm text-gray-400">
              Browse code examples and use cases for common scenarios.
            </p>
          </a>

          <a
            href="/docs/variant-c/guides/error-handling"
            className="group p-6 bg-gradient-to-br from-purple-500/10 to-transparent border-2 border-purple-500/30 rounded-2xl hover:border-purple-500/60 transition-all duration-300 shadow-lg hover:shadow-purple-500/30 hover:scale-105"
          >
            <div className="text-3xl mb-4">⚠️</div>
            <h3 className="text-xl font-bold text-white mb-3 group-hover:text-purple-400 transition-colors">
              Error Handling
            </h3>
            <p className="text-sm text-gray-400">
              Understand error codes and how to handle failures gracefully.
            </p>
          </a>
        </div>
      </section>

      {/* Fun CTA Card */}
      <div className="mt-12 p-8 bg-gradient-to-br from-purple-500/20 via-cyan-500/20 to-amber-500/20 border-2 border-purple-500/40 rounded-2xl shadow-2xl shadow-purple-500/30 text-center">
        <div className="text-4xl mb-4">🎉</div>
        <h3 className="text-2xl font-bold text-white mb-3">Ready to Build Something Amazing?</h3>
        <p className="text-gray-300 mb-6">
          Start creating stunning AI-generated images for your applications today!
        </p>
        <a
          href="/docs/variant-c/api/text-to-image"
          className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-purple-600 to-cyan-600 hover:from-purple-500 hover:to-cyan-500 text-white font-bold rounded-xl transition-all duration-300 shadow-lg hover:shadow-purple-500/50 hover:scale-105"
        >
          <span>⚡</span>
          <span>Explore the API</span>
        </a>
      </div>
    </DocsLayoutC>
  );
}