'use client';

import { useState, Suspense } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import {
  Search,
  ChevronRight,
  ArrowRight,
  Key,
  Package,
  TrendingUp,
  Building2,
  ShieldCheck,
  AlertTriangle,
  List,
  Menu,
  X,
  CheckCircle2,
  Clock,
  Info,
  Zap,
  Home,
  ChevronLeft,
  Circle,
} from 'lucide-react';
import { CodeBlock } from '@/components/docs/CodeBlock';
import { DOC_SECTIONS, ALL_NAV_ITEMS } from '@/components/docs/docsNav';

// ─── Design tokens ────────────────────────────────────────────────────────────
const BRAND = {
  navy: '#10183A',
  turquoise: '#34CCCD',
  teal: '#0e9999',
};

// ─── Reusable primitives ──────────────────────────────────────────────────────

function H1({ children }: { children: React.ReactNode }) {
  return <h1 className="text-3xl font-bold text-gray-900 mb-2 tracking-tight">{children}</h1>;
}
function H2({ children }: { children: React.ReactNode }) {
  return (
    <h2 className="text-lg font-semibold text-gray-900 mt-10 mb-3 flex items-center gap-2">
      <span className="block w-1 h-5 rounded-full bg-[#34CCCD] flex-shrink-0" />
      {children}
    </h2>
  );
}
function H3({ children }: { children: React.ReactNode }) {
  return (
    <h3 className="text-sm font-semibold text-gray-800 uppercase tracking-wider mt-7 mb-3 opacity-70">
      {children}
    </h3>
  );
}
function P({ children }: { children: React.ReactNode }) {
  return <p className="text-gray-600 leading-relaxed mb-4 text-[15px]">{children}</p>;
}
function Divider() {
  return <hr className="border-gray-100 my-8" />;
}
function InlineCode({ children }: { children: React.ReactNode }) {
  return (
    <code className="px-1.5 py-0.5 rounded-md bg-gray-100 text-[#10183A] text-[13px] font-mono border border-gray-200">
      {children}
    </code>
  );
}

function Callout({
  type = 'info',
  children,
}: {
  type?: 'info' | 'warning' | 'success';
  children: React.ReactNode;
}) {
  const styles = {
    info: {
      border: 'border-blue-200',
      bg: 'bg-blue-50',
      text: 'text-blue-800',
      icon: Info,
      dot: 'bg-blue-400',
    },
    warning: {
      border: 'border-amber-200',
      bg: 'bg-amber-50',
      text: 'text-amber-800',
      icon: AlertTriangle,
      dot: 'bg-amber-400',
    },
    success: {
      border: 'border-emerald-200',
      bg: 'bg-emerald-50',
      text: 'text-emerald-800',
      icon: CheckCircle2,
      dot: 'bg-emerald-400',
    },
  };
  const s = styles[type];
  const Icon = s.icon;
  return (
    <div className={`flex gap-3 p-4 rounded-xl border my-5 ${s.bg} ${s.border}`}>
      <Icon
        className={`w-4.5 h-4.5 mt-0.5 flex-shrink-0 ${s.text}`}
        style={{ width: 18, height: 18 }}
      />
      <div className={`text-sm leading-relaxed ${s.text}`}>{children}</div>
    </div>
  );
}

function HttpBadge({ method }: { method: 'GET' | 'POST' | 'PATCH' | 'DELETE' | 'PUT' }) {
  const styles: Record<string, string> = {
    GET: 'bg-emerald-100 text-emerald-700 border-emerald-200',
    POST: 'bg-blue-100   text-blue-700   border-blue-200',
    PATCH: 'bg-amber-100  text-amber-700  border-amber-200',
    PUT: 'bg-orange-100 text-orange-700 border-orange-200',
    DELETE: 'bg-red-100    text-red-700    border-red-200',
  };
  return (
    <span
      className={`inline-flex items-center justify-center text-xs font-bold font-mono px-2 py-0.5 rounded border w-16 flex-shrink-0 ${styles[method] ?? styles.GET}`}
    >
      {method}
    </span>
  );
}

function EndpointRow({
  method,
  path,
  desc,
}: {
  method: 'GET' | 'POST' | 'PATCH' | 'DELETE' | 'PUT';
  path: string;
  desc: string;
}) {
  return (
    <div className="flex items-center gap-3 p-3 rounded-lg border border-gray-100 hover:bg-gray-50 hover:border-gray-200 transition-all group">
      <HttpBadge method={method} />
      <code className="text-sm font-mono text-gray-700 flex-1 group-hover:text-[#10183A]">
        {path}
      </code>
      <span className="text-sm text-gray-400 hidden sm:block">{desc}</span>
    </div>
  );
}

function ParamTable({
  headers,
  rows,
}: {
  headers: string[];
  rows: (string | React.ReactNode)[][];
}) {
  return (
    <div className="overflow-x-auto my-5 rounded-xl border border-gray-200 shadow-sm">
      <table className="w-full text-sm">
        <thead>
          <tr className="bg-gray-50 border-b border-gray-200">
            {headers.map(h => (
              <th
                key={h}
                className="text-left px-4 py-2.5 text-xs font-semibold text-gray-400 uppercase tracking-wider"
              >
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => (
            <tr
              key={i}
              className="border-b border-gray-100 last:border-0 hover:bg-gray-50/50 transition-colors"
            >
              {row.map((cell, j) => (
                <td key={j} className="px-4 py-3 text-gray-600">
                  {cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function SectionHeader({
  title,
  description,
  badge,
}: {
  title: string;
  description: string;
  badge?: string;
}) {
  return (
    <div className="mb-8 pb-6 border-b border-gray-100">
      {badge && (
        <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-[#34CCCD]/10 text-[#0e9999] border border-[#34CCCD]/30 mb-4">
          {badge}
        </span>
      )}
      <H1>{title}</H1>
      <p className="text-base text-gray-500 mt-1">{description}</p>
    </div>
  );
}

function RequiredBadge({ required }: { required: boolean }) {
  return required ? (
    <span className="text-xs font-medium text-red-500 bg-red-50 border border-red-100 px-1.5 py-0.5 rounded">
      requis
    </span>
  ) : (
    <span className="text-xs text-gray-400 bg-gray-50 border border-gray-100 px-1.5 py-0.5 rounded">
      optionnel
    </span>
  );
}

function LabeledBlock({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="my-4">
      <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5">{label}</p>
      {children}
    </div>
  );
}

// ─── Section: Home ────────────────────────────────────────────────────────────

function HomeSection({ onNavigate }: { onNavigate: (id: string) => void }) {
  const quickLinks = [
    {
      id: 'quickstart',
      icon: Zap,
      label: 'Démarrage rapide',
      desc: 'Première requête en 5 min',
      color: 'text-amber-500',
      bg: 'bg-amber-50',
      border: 'border-amber-100',
    },
    {
      id: 'authentication',
      icon: Key,
      label: 'Authentification',
      desc: 'Créer et gérer vos clés API',
      color: 'text-blue-500',
      bg: 'bg-blue-50',
      border: 'border-blue-100',
    },
    {
      id: 'bookings',
      icon: Package,
      label: 'Bookings',
      desc: 'Réservations de fret maritime',
      color: 'text-violet-500',
      bg: 'bg-violet-50',
      border: 'border-violet-100',
    },
    {
      id: 'rates',
      icon: TrendingUp,
      label: 'Tarifs',
      desc: 'Tarifs en temps réel',
      color: 'text-emerald-500',
      bg: 'bg-emerald-50',
      border: 'border-emerald-100',
    },
    {
      id: 'endpoints',
      icon: List,
      label: 'Référence complète',
      desc: 'Tous les endpoints',
      color: 'text-gray-500',
      bg: 'bg-gray-50',
      border: 'border-gray-200',
    },
    {
      id: 'errors',
      icon: AlertTriangle,
      label: 'Erreurs',
      desc: 'Codes et gestion des erreurs',
      color: 'text-red-400',
      bg: 'bg-red-50',
      border: 'border-red-100',
    },
  ];

  return (
    <div>
      {/* Hero */}
      <div className="relative rounded-2xl overflow-hidden mb-10 bg-[#10183A]">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage:
              'radial-gradient(ellipse at 80% 40%, rgba(52,204,205,0.2) 0%, transparent 60%), radial-gradient(ellipse at 10% 80%, rgba(52,204,205,0.08) 0%, transparent 50%)',
          }}
        />
        {/* Grid pattern */}
        <div
          className="absolute inset-0 opacity-[0.04]"
          style={{
            backgroundImage:
              'linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)',
            backgroundSize: '40px 40px',
          }}
        />
        <div className="relative px-8 py-10">
          <div className="flex items-center gap-2 mb-5">
            <div className="w-2 h-2 rounded-full bg-[#34CCCD] animate-pulse" />
            <span className="text-xs font-medium text-[#34CCCD]/80 tracking-wider uppercase">
              API v1.0 · Plans Gold & Platinium
            </span>
          </div>
          <h1 className="text-3xl sm:text-4xl font-bold text-white mb-3 leading-tight">
            API Xpeditis
          </h1>
          <p className="text-white/60 text-base max-w-lg mb-8 leading-relaxed">
            Intégrez le fret maritime dans vos applications. Tarifs en temps réel, gestion de
            bookings et suivi d&apos;expéditions via une API REST simple.
          </p>

          <div className="flex flex-wrap gap-2 mb-8">
            <button
              onClick={() => onNavigate('quickstart')}
              className="inline-flex items-center gap-2 px-4 py-2 bg-[#34CCCD] text-white rounded-lg text-sm font-semibold hover:bg-[#2ab8b9] transition-colors"
            >
              Démarrer <ArrowRight className="w-3.5 h-3.5" />
            </button>
            <Link
              href="/dashboard/settings/api-keys"
              className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 text-white rounded-lg text-sm font-medium hover:bg-white/15 transition-colors border border-white/10"
            >
              <Key className="w-3.5 h-3.5" />
              Gérer mes clés API
            </Link>
          </div>

          {/* Base URL */}
          <div className="inline-flex items-center gap-3 px-4 py-2.5 bg-white/5 rounded-lg border border-white/10">
            <span className="text-xs text-white/40 font-medium">BASE URL</span>
            <code className="text-sm font-mono text-[#34CCCD]">https://api.xpeditis.com</code>
          </div>
        </div>
      </div>

      {/* Quick links grid */}
      <div>
        <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">
          Explorer la documentation
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
          {quickLinks.map(item => (
            <button
              key={item.id}
              onClick={() => onNavigate(item.id)}
              className={`group text-left p-4 bg-white rounded-xl border ${item.border} hover:shadow-md hover:border-opacity-80 transition-all duration-200`}
            >
              <div
                className={`w-8 h-8 rounded-lg ${item.bg} flex items-center justify-center mb-3`}
              >
                <item.icon className={`${item.color}`} style={{ width: 16, height: 16 }} />
              </div>
              <p className="font-semibold text-gray-900 text-sm mb-0.5 group-hover:text-[#10183A]">
                {item.label}
              </p>
              <p className="text-xs text-gray-400 leading-relaxed">{item.desc}</p>
            </button>
          ))}
        </div>
      </div>

      <Divider />

      {/* How it works */}
      <H2>Fonctionnement</H2>
      <div className="space-y-3 mt-4">
        {[
          {
            step: '01',
            title: 'Authentification par clé API',
            desc: (
              <>
                Passez votre clé dans l&apos;en-tête <InlineCode>X-API-Key</InlineCode> de chaque
                requête.
              </>
            ),
          },
          {
            step: '02',
            title: 'Format JSON standard',
            desc: 'Toutes les réponses sont en JSON avec une enveloppe data/meta cohérente.',
          },
          {
            step: '03',
            title: 'Rate limiting transparent',
            desc: 'Les quotas sont exposés dans les en-têtes X-RateLimit-* de chaque réponse.',
          },
        ].map(item => (
          <div
            key={item.step}
            className="flex items-start gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100"
          >
            <span className="text-xs font-bold text-[#34CCCD] font-mono mt-0.5 flex-shrink-0">
              {item.step}
            </span>
            <div>
              <p className="font-semibold text-gray-900 text-sm mb-0.5">{item.title}</p>
              <p className="text-sm text-gray-500">{item.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Section: Quick Start ─────────────────────────────────────────────────────

function QuickStartSection({ onNavigate }: { onNavigate: (id: string) => void }) {
  return (
    <div>
      <SectionHeader
        title="Guide de démarrage"
        description="Faites votre première requête API en 3 étapes."
        badge="5 minutes"
      />

      <Callout type="info">
        L&apos;accès API est réservé aux plans <strong>Gold</strong> et <strong>Platinium</strong>.
        Accédez à <strong>Paramètres → Abonnement</strong> pour upgrader.
      </Callout>

      {/* Steps */}
      {[
        {
          n: 1,
          title: 'Obtenir votre clé API',
          content: (
            <>
              <P>
                Dans le dashboard, allez dans <strong>Paramètres → Clés API</strong>, cliquez{' '}
                <em>Créer une clé</em>. La clé complète est affichée <strong>une seule fois</strong>{' '}
                — copiez-la immédiatement.
              </P>
              <CodeBlock
                language="bash"
                code="xped_live_a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2"
              />
            </>
          ),
        },
        {
          n: 2,
          title: 'Envoyer votre première requête',
          content: (
            <>
              <P>
                Passez la clé dans l&apos;en-tête <InlineCode>X-API-Key</InlineCode> :
              </P>
              <CodeBlock
                language="bash"
                code={`curl https://api.xpeditis.com/bookings \\
  -H "X-API-Key: xped_live_votre_cle" \\
  -H "Content-Type: application/json"`}
              />
              <CodeBlock
                language="typescript"
                filename="example.ts"
                code={`const res = await fetch('https://api.xpeditis.com/bookings', {
  headers: {
    'X-API-Key': process.env.XPEDITIS_API_KEY!,
    'Content-Type': 'application/json',
  },
});
const data = await res.json();`}
              />
            </>
          ),
        },
        {
          n: 3,
          title: 'Lire la réponse',
          content: (
            <>
              <P>Toutes les réponses suivent le même format :</P>
              <LabeledBlock label="Succès">
                <CodeBlock
                  language="json"
                  code={`{\n  "data": [ ... ],\n  "meta": { "total": 42, "page": 1, "perPage": 20 }\n}`}
                />
              </LabeledBlock>
              <LabeledBlock label="Erreur">
                <CodeBlock
                  language="json"
                  code={`{\n  "statusCode": 401,\n  "message": "Clé API invalide ou expirée.",\n  "error": "Unauthorized"\n}`}
                />
              </LabeledBlock>
            </>
          ),
        },
      ].map(step => (
        <div key={step.n} className="flex gap-5 mb-8">
          <div className="flex-shrink-0 flex flex-col items-center">
            <div className="w-8 h-8 rounded-full bg-[#10183A] text-white flex items-center justify-center text-sm font-bold">
              {step.n}
            </div>
            {step.n < 3 && <div className="w-px flex-1 bg-gray-200 mt-2" />}
          </div>
          <div className="flex-1 pb-6">
            <p className="font-semibold text-gray-900 mb-3">{step.title}</p>
            {step.content}
          </div>
        </div>
      ))}

      <Divider />
      <H2>Étapes suivantes</H2>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4">
        {[
          { id: 'authentication', label: 'Gérer vos clés API', desc: 'Créer, lister et révoquer' },
          { id: 'bookings', label: 'Créer un booking', desc: 'Réservez du fret maritime' },
          { id: 'rates', label: 'Rechercher des tarifs', desc: 'Comparez en temps réel' },
          { id: 'errors', label: 'Gestion des erreurs', desc: 'Tous les codes expliqués' },
        ].map(item => (
          <button
            key={item.id}
            onClick={() => onNavigate(item.id)}
            className="flex items-center justify-between p-4 text-left bg-white rounded-xl border border-gray-200 hover:border-[#34CCCD] hover:shadow-sm transition-all group"
          >
            <div>
              <p className="font-medium text-gray-900 text-sm">{item.label}</p>
              <p className="text-xs text-gray-400 mt-0.5">{item.desc}</p>
            </div>
            <ChevronRight className="w-4 h-4 text-gray-300 group-hover:text-[#34CCCD] transition-colors flex-shrink-0" />
          </button>
        ))}
      </div>
    </div>
  );
}

// ─── Section: Authentication ──────────────────────────────────────────────────

function AuthenticationSection() {
  return (
    <div>
      <SectionHeader
        title="Clés API"
        description="Authentifiez vos requêtes avec des clés API sécurisées."
      />

      <Callout type="warning">
        Vos clés sont confidentielles. Ne les exposez jamais dans du code public. En cas de
        compromission, révoquez immédiatement depuis le dashboard.
      </Callout>

      <H2>Format</H2>
      <P>
        Toutes les clés Xpeditis commencent par <InlineCode>xped_live_</InlineCode> suivi de 64
        caractères hexadécimaux :
      </P>
      <CodeBlock
        language="bash"
        code="xped_live_a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2"
      />

      <Divider />
      <H2>Utilisation</H2>
      <P>
        Passez votre clé dans l&apos;en-tête <InlineCode>X-API-Key</InlineCode> de chaque requête :
      </P>

      <CodeBlock
        language="bash"
        code={`curl https://api.xpeditis.com/bookings \\
  -H "X-API-Key: xped_live_votre_cle"`}
      />

      <H3>Exemples par langage</H3>
      <CodeBlock
        language="typescript"
        filename="xpeditis.ts"
        code={`const res = await fetch('https://api.xpeditis.com/bookings', {
  headers: {
    'X-API-Key': process.env.XPEDITIS_API_KEY!,
    'Content-Type': 'application/json',
  },
});`}
      />
      <CodeBlock
        language="python"
        filename="xpeditis.py"
        code={`import os, requests

response = requests.get(
    'https://api.xpeditis.com/bookings',
    headers={'X-API-Key': os.environ['XPEDITIS_API_KEY']},
)
data = response.json()`}
      />
      <CodeBlock
        language="php"
        filename="xpeditis.php"
        code={`$ch = curl_init('https://api.xpeditis.com/bookings');
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'X-API-Key: ' . getenv('XPEDITIS_API_KEY'),
]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$data = json_decode(curl_exec($ch), true);`}
      />

      <Divider />
      <H2>Gestion des clés</H2>
      <P>
        Ces endpoints nécessitent un <strong>token JWT</strong> (connexion via le dashboard), pas
        une clé API.
      </P>

      <div className="space-y-2 my-5">
        {[
          { method: 'POST' as const, path: '/api-keys', desc: 'Créer une nouvelle clé' },
          { method: 'GET' as const, path: '/api-keys', desc: 'Lister toutes les clés' },
          { method: 'DELETE' as const, path: '/api-keys/:id', desc: 'Révoquer une clé' },
        ].map((ep, i) => (
          <EndpointRow key={i} {...ep} />
        ))}
      </div>

      <H3>Créer une clé</H3>
      <LabeledBlock label="Requête">
        <CodeBlock
          language="bash"
          code={`curl -X POST https://api.xpeditis.com/api-keys \\
  -H "Authorization: Bearer <access_token>" \\
  -H "Content-Type: application/json" \\
  -d '{"name": "Intégration ERP", "expiresAt": "2027-01-01T00:00:00.000Z"}'`}
        />
      </LabeledBlock>
      <LabeledBlock label="Réponse">
        <CodeBlock
          language="json"
          code={`{
  "id": "550e8400-e29b-41d4-a716-446655440000",
  "name": "Intégration ERP",
  "keyPrefix": "xped_live_a1b2c3d4",
  "isActive": true,
  "expiresAt": "2027-01-01T00:00:00.000Z",
  "fullKey": "xped_live_a1b2c3d4..."   // affiché une seule fois
}`}
        />
      </LabeledBlock>

      <Divider />
      <H2>Sécurité & rotation</H2>
      <ParamTable
        headers={['Environnement', 'Méthode recommandée']}
        rows={[
          ['Local', 'Fichier .env (jamais commité)'],
          ['CI/CD', "Variables d'environnement secrètes"],
          ['Cloud', 'AWS Secrets Manager / HashiCorp Vault'],
          ['Docker/K8s', 'Kubernetes Secrets chiffrés'],
        ]}
      />
      <Callout type="success">
        Effectuez une rotation tous les 90 jours : créez une nouvelle clé, migrez votre système,
        puis révoquez l&apos;ancienne.
      </Callout>
    </div>
  );
}

// ─── Section: Bookings ────────────────────────────────────────────────────────

function BookingsSection() {
  return (
    <div>
      <SectionHeader
        title="Bookings"
        description="Créez et gérez des réservations de fret maritime via l'API."
      />

      <H2>Lister les bookings</H2>
      <div className="space-y-2 my-4">
        <EndpointRow method="GET" path="/bookings" desc="Lister avec filtres" />
      </div>

      <ParamTable
        headers={['Paramètre', 'Type', 'Requis', 'Description']}
        rows={[
          [
            <InlineCode key="s">status</InlineCode>,
            'string',
            <RequiredBadge key="s" required={false} />,
            'draft | confirmed | in_transit | delivered | cancelled',
          ],
          [
            <InlineCode key="p">page</InlineCode>,
            'number',
            <RequiredBadge key="p" required={false} />,
            'Numéro de page (défaut : 1)',
          ],
          [
            <InlineCode key="l">limit</InlineCode>,
            'number',
            <RequiredBadge key="l" required={false} />,
            'Résultats par page (défaut : 20, max : 100)',
          ],
          [
            <InlineCode key="o">origin</InlineCode>,
            'string',
            <RequiredBadge key="o" required={false} />,
            'Code port UN/LOCODE (ex : FRLEH)',
          ],
          [
            <InlineCode key="d">destination</InlineCode>,
            'string',
            <RequiredBadge key="d" required={false} />,
            'Code port UN/LOCODE (ex : CNSHA)',
          ],
        ]}
      />

      <LabeledBlock label="Réponse">
        <CodeBlock
          language="json"
          code={`{
  "data": [{
    "id": "uuid",
    "bookingNumber": "WCM-2025-000123",
    "status": "confirmed",
    "origin": "FRLEH",
    "destination": "CNSHA",
    "carrier": "Maersk",
    "departureDate": "2025-04-15",
    "arrivalDate": "2025-05-20",
    "totalAmount": { "amount": 2400.00, "currency": "USD" }
  }],
  "meta": { "total": 42, "page": 1, "perPage": 20 }
}`}
        />
      </LabeledBlock>

      <Divider />
      <H2>Créer un booking</H2>
      <div className="space-y-2 my-4">
        <EndpointRow method="POST" path="/bookings" desc="Créer une réservation" />
      </div>

      <LabeledBlock label="Requête">
        <CodeBlock
          language="json"
          code={`{
  "rateQuoteId": "uuid-du-rate-quote",
  "shipper": {
    "name": "Société Exportatrice SAS",
    "contactEmail": "j.dupont@exemple.fr",
    "contactPhone": "+33612345678",
    "address": { "street": "15 rue du Commerce", "city": "Le Havre", "country": "France" }
  },
  "consignee": {
    "name": "Shanghai Imports Co.",
    "contactEmail": "li@imports.cn",
    "address": { "street": "88 Pudong Ave", "city": "Shanghai", "country": "China" }
  }
}`}
        />
      </LabeledBlock>

      <Divider />
      <H2>Statuts d&apos;un booking</H2>
      <ParamTable
        headers={['Statut', 'Description']}
        rows={[
          [<InlineCode key="1">draft</InlineCode>, 'Créé, non confirmé'],
          [<InlineCode key="2">pending_confirmation</InlineCode>, 'En attente du transporteur'],
          [<InlineCode key="3">confirmed</InlineCode>, 'Confirmé par le transporteur'],
          [<InlineCode key="4">in_transit</InlineCode>, 'Expédition en cours'],
          [<InlineCode key="5">delivered</InlineCode>, 'Livraison confirmée'],
          [<InlineCode key="6">cancelled</InlineCode>, 'Annulé'],
        ]}
      />
    </div>
  );
}

// ─── Section: Rates ───────────────────────────────────────────────────────────

function RatesSection() {
  return (
    <div>
      <SectionHeader
        title="Tarifs & Recherche"
        description="Recherchez et comparez des tarifs de fret maritime en temps réel."
      />

      <H2>Rechercher des tarifs</H2>
      <div className="space-y-2 my-4">
        <EndpointRow method="GET" path="/rates/search" desc="Recherche de tarifs" />
      </div>

      <ParamTable
        headers={['Paramètre', 'Requis', 'Description']}
        rows={[
          [
            <InlineCode key="o">origin</InlineCode>,
            <RequiredBadge key="o" required={true} />,
            'Code port origine (UN/LOCODE, ex : FRLEH)',
          ],
          [
            <InlineCode key="d">destination</InlineCode>,
            <RequiredBadge key="d" required={true} />,
            'Code port destination (ex : CNSHA)',
          ],
          [
            <InlineCode key="c">containerType</InlineCode>,
            <RequiredBadge key="c" required={true} />,
            '20GP · 40GP · 40HC · 45HC · 20FR · 40FR',
          ],
          [
            <InlineCode key="dd">departureDate</InlineCode>,
            <RequiredBadge key="dd" required={false} />,
            'Date souhaitée (YYYY-MM-DD)',
          ],
          [
            <InlineCode key="s">sortBy</InlineCode>,
            <RequiredBadge key="s" required={false} />,
            'price_asc · price_desc · transit_time',
          ],
        ]}
      />

      <LabeledBlock label="Réponse">
        <CodeBlock
          language="json"
          code={`{
  "data": [{
    "id": "uuid",
    "carrier": { "name": "Maersk", "scac": "MAEU" },
    "origin": { "code": "FRLEH", "name": "Le Havre" },
    "destination": { "code": "CNSHA", "name": "Shanghai" },
    "containerType": "20GP",
    "departureDate": "2025-04-15",
    "transitDays": 35,
    "price": { "amount": 1850.00, "currency": "USD" },
    "surcharges": [{ "code": "BAF", "amount": 150.00, "currency": "USD" }],
    "totalPrice": { "amount": 2000.00, "currency": "USD" },
    "validUntil": "2025-04-01T00:00:00.000Z"
  }]
}`}
        />
      </LabeledBlock>

      <Callout type="info">
        Les tarifs sont mis en cache <strong>15 minutes</strong>. Après expiration, une nouvelle
        requête est envoyée aux transporteurs en temps réel.
      </Callout>

      <Divider />
      <H2>Codes de ports (UN/LOCODE)</H2>
      <div className="space-y-2 my-4">
        <EndpointRow method="GET" path="/ports" desc="Rechercher un port" />
      </div>
      <CodeBlock language="bash" code="GET /ports?q=havre&limit=5" />

      <ParamTable
        headers={['Code', 'Port', 'Pays']}
        rows={[
          ['FRLEH', 'Le Havre', 'France'],
          ['FRFOS', 'Fos-sur-Mer', 'France'],
          ['CNSHA', 'Shanghai', 'Chine'],
          ['CNNGB', 'Ningbo', 'Chine'],
          ['SGSIN', 'Singapore', 'Singapour'],
          ['USLAX', 'Los Angeles', 'États-Unis'],
          ['NLRTM', 'Rotterdam', 'Pays-Bas'],
          ['DEHAM', 'Hambourg', 'Allemagne'],
        ]}
      />
    </div>
  );
}

// ─── Section: Organizations ───────────────────────────────────────────────────

function OrganizationsSection() {
  return (
    <div>
      <SectionHeader
        title="Organisations"
        description="Accédez aux informations de votre organisation via l'API."
      />

      <H2>Profil de l&apos;organisation</H2>
      <div className="space-y-2 my-4">
        <EndpointRow method="GET" path="/organizations/me" desc="Profil de l'organisation" />
      </div>

      <LabeledBlock label="Réponse">
        <CodeBlock
          language="json"
          code={`{
  "id": "uuid",
  "name": "Freight Forwarder SAS",
  "type": "FREIGHT_FORWARDER",
  "siret": "12345678901234",
  "statusBadge": "gold",
  "subscription": {
    "plan": "GOLD",
    "status": "ACTIVE",
    "currentPeriodEnd": "2025-04-26T00:00:00.000Z",
    "features": ["dashboard", "wiki", "user_management", "csv_export", "api_access"]
  },
  "address": { "city": "Le Havre", "country": "France" }
}`}
        />
      </LabeledBlock>

      <Divider />
      <H2>Membres</H2>
      <div className="space-y-2 my-4">
        <EndpointRow method="GET" path="/users" desc="Membres de l'organisation" />
      </div>
      <CodeBlock language="bash" code="GET /users?organizationId=uuid&role=MANAGER" />
    </div>
  );
}

// ─── Section: Endpoints ───────────────────────────────────────────────────────

function EndpointsSection() {
  const groups: {
    label: string;
    endpoints: { method: 'GET' | 'POST' | 'PATCH' | 'DELETE'; path: string; desc: string }[];
  }[] = [
    {
      label: 'Bookings',
      endpoints: [
        { method: 'GET', path: '/bookings', desc: 'Lister les bookings' },
        { method: 'POST', path: '/bookings', desc: 'Créer un booking' },
        { method: 'GET', path: '/bookings/:id', desc: "Détail d'un booking" },
        { method: 'PATCH', path: '/bookings/:id/status', desc: 'Mettre à jour le statut' },
      ],
    },
    {
      label: 'Tarifs',
      endpoints: [
        { method: 'GET', path: '/rates/search', desc: 'Rechercher des tarifs' },
        { method: 'GET', path: '/rates/:id', desc: "Détail d'un tarif" },
        { method: 'GET', path: '/ports', desc: 'Lister les ports' },
      ],
    },
    {
      label: 'Organisation',
      endpoints: [
        { method: 'GET', path: '/organizations/me', desc: "Profil de l'organisation" },
        { method: 'GET', path: '/users', desc: "Membres de l'organisation" },
      ],
    },
    {
      label: 'Clés API (JWT requis)',
      endpoints: [
        { method: 'POST', path: '/api-keys', desc: 'Créer une clé API' },
        { method: 'GET', path: '/api-keys', desc: 'Lister les clés API' },
        { method: 'DELETE', path: '/api-keys/:id', desc: 'Révoquer une clé' },
      ],
    },
  ];

  return (
    <div>
      <SectionHeader
        title="Référence complète"
        description="Tous les endpoints disponibles dans l'API Xpeditis."
      />

      {groups.map(group => (
        <div key={group.label} className="mb-8">
          <H3>{group.label}</H3>
          <div className="space-y-2">
            {group.endpoints.map((ep, i) => (
              <EndpointRow key={i} {...ep} />
            ))}
          </div>
        </div>
      ))}

      <Divider />
      <H2>Format de réponse standard</H2>
      <LabeledBlock label="Succès (liste paginée)">
        <CodeBlock
          language="json"
          code={`{
  "data": [ ... ],
  "meta": {
    "total": 100,
    "page": 1,
    "perPage": 20,
    "totalPages": 5
  }
}`}
        />
      </LabeledBlock>
      <LabeledBlock label="Succès (objet)">
        <CodeBlock language="json" code={`{ "data": { ... } }`} />
      </LabeledBlock>
    </div>
  );
}

// ─── Section: Errors ─────────────────────────────────────────────────────────

function ErrorsSection() {
  return (
    <div>
      <SectionHeader
        title="Codes d'erreur"
        description="Comprendre et gérer les erreurs retournées par l'API."
      />

      <ParamTable
        headers={['Code', 'Statut', 'Action']}
        rows={[
          ['400', 'Bad Request', 'Vérifiez les paramètres envoyés'],
          ['401', 'Unauthorized', 'Vérifiez votre clé API ou token JWT'],
          ['403', 'Forbidden', 'Votre plan ne permet pas cet accès'],
          ['404', 'Not Found', "Vérifiez l'ID ou le chemin de la ressource"],
          ['409', 'Conflict', 'La ressource existe déjà'],
          ['429', 'Too Many Req.', 'Attendez avant de réessayer (voir retryAfter)'],
          ['500', 'Server Error', 'Réessayez plus tard, contactez le support si persistant'],
        ]}
      />

      <Divider />
      <H2>Format des erreurs</H2>
      <CodeBlock
        language="json"
        code={`{
  "statusCode": 400,
  "message": "containerType doit être : 20GP, 40GP, 40HC, 45HC, 20FR ou 40FR",
  "error": "Bad Request"
}`}
      />

      <H3>Exemples</H3>
      <LabeledBlock label="401 — Clé invalide">
        <CodeBlock
          language="json"
          code={`{
  "statusCode": 401,
  "message": "Clé API invalide, expirée ou abonnement insuffisant.",
  "error": "Unauthorized"
}`}
        />
      </LabeledBlock>
      <LabeledBlock label="429 — Rate limit dépassé">
        <CodeBlock
          language="json"
          code={`{
  "statusCode": 429,
  "message": "Too many requests. Please wait before retrying.",
  "error": "Too Many Requests",
  "retryAfter": 60
}`}
        />
      </LabeledBlock>
      <Callout type="warning">
        En cas de 429, respectez le délai <InlineCode>retryAfter</InlineCode> (en secondes) avec un
        backoff exponentiel.
      </Callout>
    </div>
  );
}

// ─── Section: Rate Limiting ───────────────────────────────────────────────────

function RateLimitingSection() {
  return (
    <div>
      <SectionHeader
        title="Rate Limiting"
        description="Limites de requêtes par plan et bonnes pratiques."
      />

      <H2>Limites par plan</H2>
      <ParamTable
        headers={['Plan', 'Requêtes / minute', 'Requêtes / jour']}
        rows={[
          ['Gold', '60', '10 000'],
          ['Platinium', '120', 'Illimité'],
        ]}
      />
      <Callout type="info">
        Le rate limiting est calculé <strong>par utilisateur</strong> associé à la clé API.
      </Callout>

      <Divider />
      <H2>En-têtes de réponse</H2>
      <ParamTable
        headers={['En-tête', 'Description']}
        rows={[
          [
            <InlineCode key="1">X-RateLimit-Limit</InlineCode>,
            'Nombre maximum de requêtes par fenêtre',
          ],
          [
            <InlineCode key="2">X-RateLimit-Remaining</InlineCode>,
            'Requêtes restantes dans la fenêtre',
          ],
          [
            <InlineCode key="3">X-RateLimit-Reset</InlineCode>,
            'Timestamp UNIX de réinitialisation',
          ],
        ]}
      />

      <Divider />
      <H2>Bonnes pratiques</H2>
      <div className="space-y-3 mt-4">
        {[
          {
            icon: Clock,
            title: 'Backoff exponentiel',
            desc: 'En cas de 429, attendez 1s, 2s, 4s, 8s… avant de réessayer.',
          },
          {
            icon: CheckCircle2,
            title: 'Mise en cache',
            desc: 'Cachez les tarifs côté client — ils sont valides 15 minutes.',
          },
          {
            icon: ShieldCheck,
            title: 'Une clé par service',
            desc: 'Clés séparées par service/env pour un suivi précis et une révocation ciblée.',
          },
        ].map((item, i) => (
          <div key={i} className="flex gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
            <div className="w-8 h-8 rounded-lg bg-[#34CCCD]/10 flex items-center justify-center flex-shrink-0">
              <item.icon className="w-4 h-4 text-[#34CCCD]" />
            </div>
            <div>
              <p className="font-semibold text-gray-900 text-sm">{item.title}</p>
              <p className="text-sm text-gray-500 mt-0.5">{item.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Section map ──────────────────────────────────────────────────────────────

function SectionContent({
  activeSection,
  onNavigate,
}: {
  activeSection: string;
  onNavigate: (id: string) => void;
}) {
  switch (activeSection) {
    case 'home':
      return <HomeSection onNavigate={onNavigate} />;
    case 'quickstart':
      return <QuickStartSection onNavigate={onNavigate} />;
    case 'authentication':
      return <AuthenticationSection />;
    case 'bookings':
      return <BookingsSection />;
    case 'rates':
      return <RatesSection />;
    case 'organizations':
      return <OrganizationsSection />;
    case 'endpoints':
      return <EndpointsSection />;
    case 'errors':
      return <ErrorsSection />;
    case 'rate-limiting':
      return <RateLimitingSection />;
    default:
      return <HomeSection onNavigate={onNavigate} />;
  }
}

// ─── Prev / Next ──────────────────────────────────────────────────────────────

function PrevNext({
  activeSection,
  onNavigate,
}: {
  activeSection: string;
  onNavigate: (id: string) => void;
}) {
  const idx = ALL_NAV_ITEMS.findIndex(i => i.id === activeSection);
  const prev = idx > 0 ? ALL_NAV_ITEMS[idx - 1] : null;
  const next = idx < ALL_NAV_ITEMS.length - 1 ? ALL_NAV_ITEMS[idx + 1] : null;

  if (!prev && !next) return null;

  return (
    <div className="flex items-center justify-between mt-12 pt-6 border-t border-gray-100">
      {prev ? (
        <button
          onClick={() => onNavigate(prev.id)}
          className="flex items-center gap-2 text-sm text-gray-500 hover:text-[#10183A] transition-colors group"
        >
          <ChevronLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
          <div className="text-left">
            <p className="text-xs text-gray-400">Précédent</p>
            <p className="font-medium">{prev.label}</p>
          </div>
        </button>
      ) : (
        <div />
      )}

      {next ? (
        <button
          onClick={() => onNavigate(next.id)}
          className="flex items-center gap-2 text-sm text-gray-500 hover:text-[#10183A] transition-colors group text-right"
        >
          <div>
            <p className="text-xs text-gray-400">Suivant</p>
            <p className="font-medium">{next.label}</p>
          </div>
          <ChevronRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
        </button>
      ) : (
        <div />
      )}
    </div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────

export interface DocsPageContentProps {
  basePath: string;
  /** 'dashboard' = fixed height layout, 'public' = scrollable with sticky sidebar */
  variant?: 'dashboard' | 'public';
}

function DocsPageInner({ basePath, variant = 'public' }: DocsPageContentProps) {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [activeSection, setActiveSection] = useState(searchParams.get('section') ?? 'home');
  const [searchQuery, setSearchQuery] = useState('');
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const navigate = (id: string) => {
    setActiveSection(id);
    router.replace(`${basePath}?section=${id}`, { scroll: false });
    setSidebarOpen(false);
    if (variant === 'public') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  const filteredSections = DOC_SECTIONS.map(section => ({
    ...section,
    items: section.items.filter(item =>
      item.label.toLowerCase().includes(searchQuery.toLowerCase())
    ),
  })).filter(s => s.items.length > 0);

  const stickyTop = variant === 'dashboard' ? 'top-16' : 'top-20';
  const sidebarHeight = variant === 'dashboard' ? 'calc(100vh - 64px)' : 'calc(100vh - 80px)';

  // Sidebar inner content
  const SidebarInner = () => (
    <div className="flex flex-col h-full bg-white">
      {/* Brand + search */}
      <div className="px-4 pt-5 pb-4 border-b border-gray-100">
        <div className="flex items-center gap-2 mb-1">
          <div className="w-6 h-6 rounded-md bg-[#10183A] flex items-center justify-center flex-shrink-0">
            <span className="text-[#34CCCD] text-xs font-black">X</span>
          </div>
          <span className="text-sm font-bold text-gray-900">Xpeditis</span>
          <span className="ml-auto text-[10px] font-semibold text-[#34CCCD] bg-[#34CCCD]/10 px-1.5 py-0.5 rounded-md border border-[#34CCCD]/20">
            v1.0
          </span>
        </div>

        {/* API status */}
        <div className="flex items-center gap-1.5 mt-2 mb-3">
          <Circle className="w-2 h-2 fill-emerald-400 text-emerald-400" />
          <span className="text-xs text-gray-400">Tous les services opérationnels</span>
        </div>

        {/* Search */}
        <div className="relative">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 pointer-events-none" />
          <input
            type="text"
            placeholder="Rechercher..."
            value={searchQuery}
            onChange={e => setSearchQuery(e.target.value)}
            className="w-full pl-8 pr-3 py-1.5 text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#34CCCD]/30 focus:border-[#34CCCD] placeholder-gray-400 transition-all"
          />
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex-1 overflow-y-auto py-3 px-3">
        {filteredSections.map(section => (
          <div key={section.title} className="mb-5">
            <p className="px-3 mb-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
              {section.title}
            </p>
            {section.items.map(item => {
              const isActive = activeSection === item.id;
              return (
                <button
                  key={item.id}
                  onClick={() => navigate(item.id)}
                  className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all mb-0.5 ${
                    isActive
                      ? 'bg-[#10183A] text-white font-medium shadow-sm'
                      : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
                  }`}
                >
                  <item.icon
                    className={`w-3.5 h-3.5 flex-shrink-0 ${isActive ? 'text-[#34CCCD]' : ''}`}
                  />
                  <span className="flex-1 text-left">{item.label}</span>
                  {isActive && <ChevronRight className="w-3 h-3 opacity-50 flex-shrink-0" />}
                </button>
              );
            })}
          </div>
        ))}
      </nav>

      {/* Footer CTA */}
      <div className="border-t border-gray-100 p-4">
        <Link
          href="/dashboard/settings/api-keys"
          className="flex items-center gap-2 text-xs font-medium text-gray-500 hover:text-[#10183A] transition-colors group"
        >
          <div className="w-6 h-6 rounded-md bg-gray-100 flex items-center justify-center group-hover:bg-[#34CCCD]/10 transition-colors">
            <Key className="w-3 h-3" />
          </div>
          <span>Gérer mes clés API</span>
          <ChevronRight className="w-3 h-3 ml-auto opacity-50 group-hover:translate-x-0.5 transition-transform" />
        </Link>
      </div>
    </div>
  );

  // ── Dashboard variant: fixed-height layout ───────────────────────────────
  if (variant === 'dashboard') {
    return (
      <div className="-m-6 flex" style={{ height: 'calc(100vh - 64px)' }}>
        {sidebarOpen && (
          <div
            className="fixed inset-0 z-40 bg-gray-900/50 lg:hidden"
            onClick={() => setSidebarOpen(false)}
          />
        )}

        {/* Desktop sidebar */}
        <div className="hidden lg:flex flex-col w-64 xl:w-72 flex-shrink-0 border-r border-gray-100 overflow-hidden">
          <SidebarInner />
        </div>

        {/* Mobile drawer */}
        <div
          className={`fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300 lg:hidden ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}
        >
          <SidebarInner />
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto min-w-0 bg-gray-50/50">
          <div className="lg:hidden flex items-center gap-3 px-4 py-3 border-b border-gray-100 bg-white sticky top-0 z-10">
            <button
              onClick={() => setSidebarOpen(true)}
              className="p-1.5 rounded-lg hover:bg-gray-100"
            >
              <Menu className="w-5 h-5 text-gray-600" />
            </button>
            <span className="text-sm font-medium text-gray-700">
              {ALL_NAV_ITEMS.find(i => i.id === activeSection)?.label ?? 'Documentation'}
            </span>
          </div>
          <div className="max-w-3xl mx-auto px-6 xl:px-10 py-8 pb-16">
            <Breadcrumb activeSection={activeSection} onNavigate={navigate} />
            <SectionContent activeSection={activeSection} onNavigate={navigate} />
            <PrevNext activeSection={activeSection} onNavigate={navigate} />
          </div>
        </div>
      </div>
    );
  }

  // ── Public variant: scrollable with sticky sidebar ───────────────────────
  return (
    <div className="flex min-h-[calc(100vh-80px)] bg-gray-50/30">
      {/* Mobile overlay */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 z-40 bg-gray-900/50 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* Mobile drawer */}
      <div
        className={`fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300 shadow-2xl lg:hidden ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}
      >
        <SidebarInner />
      </div>

      {/* Desktop sticky sidebar */}
      <aside
        className={`hidden lg:flex flex-col w-64 xl:w-72 flex-shrink-0 border-r border-gray-100 sticky ${stickyTop} self-start overflow-hidden bg-white`}
        style={{ maxHeight: sidebarHeight }}
      >
        <SidebarInner />
      </aside>

      {/* Main scrollable content */}
      <main className="flex-1 min-w-0">
        {/* Mobile top bar */}
        <div className="lg:hidden flex items-center gap-3 px-4 py-3 border-b border-gray-100 bg-white sticky top-20 z-10">
          <button
            onClick={() => setSidebarOpen(true)}
            className="p-1.5 rounded-lg hover:bg-gray-100"
          >
            <Menu className="w-5 h-5 text-gray-600" />
          </button>
          <span className="text-sm font-medium text-gray-700">
            {ALL_NAV_ITEMS.find(i => i.id === activeSection)?.label ?? 'Documentation'}
          </span>
          {sidebarOpen && (
            <button
              onClick={() => setSidebarOpen(false)}
              className="ml-auto p-1.5 rounded-lg hover:bg-gray-100"
            >
              <X className="w-5 h-5 text-gray-600" />
            </button>
          )}
        </div>

        <div className="max-w-3xl mx-auto px-6 xl:px-10 py-8 pb-20">
          <Breadcrumb activeSection={activeSection} onNavigate={navigate} />
          <SectionContent activeSection={activeSection} onNavigate={navigate} />
          <PrevNext activeSection={activeSection} onNavigate={navigate} />
        </div>
      </main>
    </div>
  );
}

// ─── Breadcrumb ───────────────────────────────────────────────────────────────

function Breadcrumb({
  activeSection,
  onNavigate,
}: {
  activeSection: string;
  onNavigate: (id: string) => void;
}) {
  if (activeSection === 'home') return null;
  const current = ALL_NAV_ITEMS.find(i => i.id === activeSection);
  return (
    <nav className="flex items-center gap-1.5 text-xs text-gray-400 mb-6">
      <button
        onClick={() => onNavigate('home')}
        className="hover:text-gray-600 transition-colors flex items-center gap-1"
      >
        <Home className="w-3 h-3" />
        <span>Docs</span>
      </button>
      <ChevronRight className="w-3 h-3 opacity-50" />
      <span className="text-gray-600 font-medium">{current?.label}</span>
    </nav>
  );
}

// ─── Public export ────────────────────────────────────────────────────────────

export function DocsPageContent(props: DocsPageContentProps) {
  const fallbackStyle =
    props.variant === 'dashboard'
      ? { height: 'calc(100vh - 64px)' }
      : { minHeight: 'calc(100vh - 80px)' };

  return (
    <Suspense
      fallback={
        <div className="flex items-center justify-center bg-gray-50" style={fallbackStyle}>
          <div className="w-8 h-8 border-[3px] border-[#34CCCD] border-t-transparent rounded-full animate-spin" />
        </div>
      }
    >
      <DocsPageInner {...props} />
    </Suspense>
  );
}
