'use client';

/**
 * Documentation Layout - Final Variant
 *
 * Based on Variant A: Clean & Minimal with enhancements
 * This is the production-ready version combining the best aspects
 *
 * Layout Structure:
 * - Left Sidebar: Thin (256px) with minimal design
 * - Content Area: Wide margins (max-w-3xl) for comfortable reading
 * - Right TOC: Subtle and unobtrusive (224px)
 *
 * Responsive Behavior:
 * - Mobile (<768px): Single column, sidebars become overlays
 * - Tablet (768px-1024px): Content + TOC only
 * - Desktop (>1024px): Full three-column layout
 *
 * Design Characteristics:
 * - Generous whitespace
 * - Subtle borders and shadows
 * - Focus on content clarity
 * - Minimal visual noise
 * - Accessibility compliant (WCAG 2.1 AA)
 */

import { ReactNode } from 'react';

interface DocsLayoutFinalProps {
  sidebar: ReactNode;
  children: ReactNode;
  toc: ReactNode;
}

export const DocsLayoutFinal = ({ sidebar, children, toc }: DocsLayoutFinalProps) => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
      {/* Animated gradient background (matching landing page) */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl animate-pulse delay-700"></div>
      </div>

      <div className="relative z-10 flex">
        {/* Left Sidebar - Thin, minimal design */}
        <aside className="hidden lg:block w-64 border-r border-white/10 bg-slate-950/50 backdrop-blur-sm sticky top-0 h-screen overflow-y-auto">
          {sidebar}
        </aside>

        {/* Main Content Area - Wide margins for comfortable reading */}
        <main className="flex-1 min-w-0">
          <div className="max-w-3xl mx-auto px-6 lg:px-12 py-12">
            {children}
          </div>
        </main>

        {/* Right TOC - Subtle and unobtrusive */}
        <aside className="hidden xl:block w-56 border-l border-white/10 bg-slate-950/30 backdrop-blur-sm sticky top-0 h-screen overflow-y-auto">
          {toc}
        </aside>
      </div>
    </div>
  );
};