banatie-service/apps/landing/src/app/docs/page.tsx

'use client';

/**
 * Getting Started Page - Production Documentation
 *
 * Refactored to use DocPage component for consistent layout
 * Layout handles SubsectionNav and Left Sidebar
 * DocPage handles Breadcrumb, Article structure, Next Steps, and TOC
 * This page provides only the content (Hero + sections)
 */

import { TipBox } from '@/components/docs/shared/TipBox';
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
import { DocPage } from '@/components/docs/layout/DocPage';
import {
  Hero,
  SectionHeader,
  ResponseBlock,
} from '@/components/docs/blocks';

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 GettingStartedPage() {
  return (
    <DocPage
      breadcrumbItems={[
        { label: 'Documentation', href: '/docs' },
        { label: 'Getting Started' },
      ]}
      tocItems={tocItems}
      nextSteps={{
        description:
          'Now that you have generated your first image, explore these resources to build more advanced integrations:',
        links: [
          {
            href: '/docs/api/generate',
            title: 'Image Generation',
            description: 'Explore all available endpoints, parameters, and response formats.',
            accent: 'primary',
          },
          {
            href: '/docs/api/live',
            title: 'Live URLs & CDN',
            description: 'Generate images on-demand via URL parameters with automatic caching.',
            accent: 'secondary',
          },
        ],
      }}
    >

        {/* Hero Section */}
        <Hero
          title="Getting Started"
          subtitle="Welcome to the Banatie API documentation. Learn how to integrate AI-powered image generation into your applications in minutes."
        />

        {/* Introduction */}
        <section id="introduction" className="mb-12">
          <SectionHeader level={2} id="introduction">
            Introduction
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-4">
            Banatie is a developer-first API for AI-powered image generation. Built on Google Gemini,
            it transforms text prompts and reference images into production-ready visuals.
          </p>
          <p className="text-gray-300 leading-relaxed mb-6">
            Whether you are 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>

          {/* Compact Tip Box */}
          <TipBox variant="compact" type="info">
            <strong>New to API integration?</strong> Start with our{' '}
            <a href="/docs/examples" className="text-purple-400 hover:underline">
              code examples
            </a>{' '}
            to see common use cases in action.
          </TipBox>
        </section>

        {/* Quick Start */}
        <section id="quick-start" className="mb-12">
          <SectionHeader level={2} id="quick-start" className="mb-6">
            Quick Start
          </SectionHeader>

          <div id="installation" className="mb-8">
            <SectionHeader level={3} id="installation">
              Installation
            </SectionHeader>
            <p className="text-gray-300 leading-relaxed mb-4">
              Banatie is a REST API, so you do not 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">
            <SectionHeader level={3} id="authentication">
              Authentication
            </SectionHeader>
            <p className="text-gray-300 leading-relaxed mb-4">
              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>

            {/* Prominent Tip Box for Security Warning */}
            <div className="mb-6">
              <TipBox variant="prominent" type="warning">
                <strong className="text-amber-300">Security Best Practice:</strong> Keep your API keys secure.
                Never commit them to public repositories or expose them in client-side code. Use environment
                variables and server-side implementations for production applications.
              </TipBox>
            </div>

            <CodeBlock
              code={`# Create your first API key (one-time bootstrap)
curl -X POST https://api.banatie.app/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">
          <SectionHeader level={2} id="first-request">
            Your First Request
          </SectionHeader>
          <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.app/api/v1/generations \\
  -H "X-API-Key: YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "prompt": "a serene mountain landscape at sunset",
    "aspectRatio": "16:9",
    "autoEnhance": true
  }'`}
            language="bash"
            filename="Generate Image"
          />

          <div className="mt-6">
            <p className="text-sm font-semibold text-gray-300 mb-3">Expected Response:</p>
            <ResponseBlock
              status="success"
              statusCode={201}
              statusLabel="201 Created"
              content={`{
  "success": true,
  "data": {
    "id": "550e8400-e29b-41d4-a716-446655440000",
    "prompt": "A breathtaking mountain landscape at sunset...",
    "originalPrompt": "a serene mountain landscape at sunset",
    "autoEnhance": true,
    "aspectRatio": "16:9",
    "status": "success",
    "outputImage": {
      "id": "7c4ccf47-41ce-4718-afbc-8c553b2c631a",
      "storageUrl": "https://cdn.banatie.app/default/my-project/img/7c4ccf47-...",
      "width": 1792,
      "height": 1024
    }
  }
}`}
            />
          </div>
        </section>

    </DocPage>
  );
}