<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'API Documentation' }} - Star ERP</title>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }
        code, pre {
            font-family: 'JetBrains Mono', monospace;
        }
        .prose pre {
            background-color: #1e293b;
            color: #f8fafc;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        }
        .sidebar-link.active {
            color: #0ea5e9;
            background-color: #f0f9ff;
            border-right: 4px solid #0ea5e9;
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900">
    <div class="flex min-h-screen">
        <!-- Sidebar -->
        <aside class="w-64 bg-white border-r border-slate-200 fixed h-full overflow-y-auto hidden md:block">
            <div class="p-6">
                <div class="flex items-center gap-2 mb-8">
                    <div class="w-8 h-8 bg-sky-500 rounded-lg flex items-center justify-center text-white font-bold">S</div>
                    <span class="font-bold text-xl tracking-tight">Star ERP</span>
                </div>
                
                <nav class="space-y-1">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 px-3">文件導覽</p>
                    @foreach($toc as $item)
                        <a href="#{{ $item['id'] }}" class="block px-3 py-2 text-sm font-medium text-slate-600 hover:text-sky-600 hover:bg-slate-50 rounded-md transition-all duration-200">
                            {{ $item['text'] }}
                        </a>
                    @endforeach
                </nav>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 md:ml-64 p-6 md:p-12 lg:p-20">
            <div class="max-w-4xl mx-auto">
                <article class="prose prose-slate prose-sky max-w-none 
                    prose-headings:scroll-mt-20 
                    prose-h1:text-4xl prose-h1:font-extrabold prose-h1:tracking-tight
                    prose-pre:p-6 prose-pre:text-sm
                    prose-table:border prose-table:border-slate-300 prose-table:rounded-xl prose-table:overflow-hidden
                    prose-th:bg-slate-100 prose-th:p-4 prose-th:border prose-th:border-slate-300 prose-th:text-left prose-th:font-semibold
                    prose-td:p-4 prose-td:border prose-td:border-slate-200">
                    {!! $content !!}
                </article>

                <footer class="mt-20 pt-8 border-t border-slate-200 text-slate-400 text-sm flex justify-between">
                    <span>© {{ date('Y') }} Star ERP System. All rights reserved.</span>
                    <span>整合介面版本 v1.2</span>
                </footer>
            </div>
        </main>
    </div>

    <!-- Mobile Menu Button -->
    <div class="md:hidden fixed bottom-6 right-6">
        <button id="menu-toggle" class="w-14 h-14 bg-sky-500 text-white rounded-full shadow-lg flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
        </button>
    </div>
</body>
</html>
