<x-guest-layout>
    <div class="flex min-h-screen font-sans antialiased text-gray-900 bg-white selection:bg-orange-500 selection:text-white">
        
        <!-- Fixed Sidebar -->
        <div class="w-64 fixed inset-y-0 left-0 bg-gray-50 border-r border-gray-200 z-20 overflow-y-auto hidden md:block">
            <div class="p-6">
                <a href="/" class="flex items-center gap-2 mb-8 group">
                    <div class="w-8 h-8 rounded-lg bg-orange-500 flex items-center justify-center shadow-sm group-hover:bg-orange-600 transition-colors">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                    </div>
                    <span class="text-lg font-bold text-gray-900">WACM API</span>
                </a>

                <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">Contacts Module</div>
                
                <nav class="space-y-1" id="docs-nav">
                    <a href="#auth" class="block px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:text-orange-600 hover:bg-orange-50 transition-colors">Authentication</a>
                    <a href="#contacts" class="block px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:text-orange-600 hover:bg-orange-50 transition-colors">Contacts</a>

                </nav>

                                <div class="mt-10">
                    <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">Other Modules</div>
                    @php
                        $apiDocs = [
                            ['route' => 'wpbox.api.docs', 'label' => 'Wpbox', 'icon_class' => 'group-hover:text-emerald-500', 'link_class' => 'hover:text-emerald-600 hover:bg-emerald-50'],
                            ['route' => 'shop.api.docs', 'label' => 'Shop', 'icon_class' => 'group-hover:text-blue-500', 'link_class' => 'hover:text-blue-600 hover:bg-blue-50'],
                            ['route' => 'verification.api.docs', 'label' => 'Verification', 'icon_class' => 'group-hover:text-purple-500', 'link_class' => 'hover:text-purple-600 hover:bg-purple-50'],
                            ['route' => 'contacts.api.docs', 'label' => 'Contacts', 'icon_class' => 'group-hover:text-orange-500', 'link_class' => 'hover:text-orange-600 hover:bg-orange-50'],
                            ['route' => 'ai.api.docs', 'label' => 'AI', 'icon_class' => 'group-hover:text-indigo-500', 'link_class' => 'hover:text-indigo-600 hover:bg-indigo-50'],
                        ];
                        $currentRoute = Route::currentRouteName();
                    @endphp
                    @foreach($apiDocs as $doc)
                        @if (Route::has($doc['route']) && $currentRoute !== $doc['route'])
                        <a href="{{ route($doc['route']) }}" class="flex items-center px-3 py-2 text-sm font-medium text-gray-500 rounded-md {{ $doc['link_class'] }} transition-colors group mt-1">
                            <svg class="w-4 h-4 mr-2 text-gray-400 {{ $doc['icon_class'] }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                            {{ $doc['label'] }} API Docs
                        </a>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="flex-1 md:ml-64 relative min-h-screen">
            <!-- Background split for code (dark right half on large screens) -->
            <div class="hidden lg:block absolute top-0 right-0 w-[50%] h-full bg-[#0f172a] z-0 pointer-events-none"></div>

            <div class="relative z-10">
                <!-- Top Navigation (Mobile) -->
                <div class="md:hidden bg-white border-b border-gray-200 p-4 flex justify-between items-center">
                    <span class="text-lg font-bold text-gray-900">Contacts API</span>
                    <a href="{{ route('contacts.api.docs.download') }}" class="text-sm font-medium text-orange-600">Download .md</a>
                </div>

                <!-- 1. Header Section -->
                <div class="flex flex-col lg:flex-row w-full border-b border-gray-200 lg:border-none">
                    <!-- Prose -->
                    <div class="w-full lg:w-1/2 p-6 md:p-10 lg:px-12 lg:py-16 bg-white">
                        <div class="flex items-center gap-3 mb-3">
                            <span class="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-orange-100 text-orange-800">v1.0</span>
                            <span class="text-sm font-medium text-gray-500">REST API</span>
                        </div>
                        <h1 class="text-3xl md:text-4xl font-extrabold tracking-tight text-gray-900 mb-4">Contacts API Reference</h1>
                        <p class="text-lg text-gray-600 mb-8 leading-relaxed">Manage your audience, segment customers into groups, and synchronize external CRM data seamlessly with WACM.</p>
                        
                        <a href="{{ route('contacts.api.docs.download') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 transition-all">
                            <svg class="w-5 h-5 mr-2 -ml-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                            Download as Markdown
                        </a>
                    </div>
                    <!-- Code -->
                    <div class="w-full lg:w-1/2 p-6 md:p-10 lg:px-12 lg:py-16 bg-[#0f172a] lg:bg-transparent">
                        <div class="bg-[#1e293b] rounded-xl border border-slate-700 shadow-2xl overflow-hidden">
                            <div class="px-4 py-3 border-b border-slate-700/50 bg-[#0f172a]/50 flex items-center justify-between">
                                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Base URL</span>
                            </div>
                            <div class="p-4">
                                <code class="text-sm font-mono text-orange-400">{{ url('api/v1/contacts') }}</code>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2. Authentication -->
                <div id="auth" class="flex flex-col lg:flex-row w-full border-t border-gray-200 lg:border-t-0">
                    <!-- Prose -->
                    <div class="w-full lg:w-1/2 p-6 md:p-10 lg:px-12 lg:py-16 bg-white lg:border-t lg:border-gray-200">
                        <h2 class="text-2xl font-bold text-gray-900 mb-4">Authentication</h2>
                        <p class="text-gray-600 mb-6 leading-relaxed">Like other WACM APIs, the Contacts API requires a Bearer Token via the HTTP Header.</p>
                        
                        <div class="border border-gray-200 rounded-lg p-4 bg-gray-50/50">
                            <h3 class="font-bold text-gray-900 flex items-center gap-2 mb-1">
                                <svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path></svg>
                                HTTP Header (Required)
                            </h3>
                            <p class="text-sm text-gray-600">Send the token securely in the <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs font-mono">Authorization</code> request header.</p>
                        </div>
                    </div>
                    <!-- Code -->
                    <div class="w-full lg:w-1/2 p-6 md:p-10 lg:px-12 lg:py-16 bg-[#0f172a] lg:bg-transparent lg:border-t lg:border-slate-800/50">
                        <div class="bg-[#1e293b] rounded-xl border border-slate-700 shadow-2xl overflow-hidden mb-6">
                            <div class="px-4 py-3 border-b border-slate-700/50 bg-[#0f172a]/50 flex items-center">
                                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Example Request Header</span>
                            </div>
                            <div class="p-4 overflow-x-auto">
                                <pre><code class="text-sm font-mono text-orange-300">Authorization: Bearer <span class="text-slate-400">YOUR_API_TOKEN</span></code></pre>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 3. Contacts -->
                <div id="contacts" class="flex flex-col lg:flex-row w-full border-t border-gray-200 lg:border-t-0">
                    <!-- Prose -->
                    <div class="w-full lg:w-1/2 p-6 md:p-10 lg:px-12 lg:py-16 bg-white lg:border-t lg:border-gray-200">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">Contacts</h2>
                        
                        <!-- List Contacts -->
                        <div class="mb-10">
                            <div class="flex items-center gap-3 mb-3">
                                <span class="px-2 py-0.5 rounded text-xs font-bold bg-blue-100 text-blue-800">GET</span>
                                <code class="text-sm font-bold text-gray-900">/api/v1/contacts</code>
                            </div>
                            <p class="text-gray-600 text-sm mb-4 leading-relaxed">Retrieve a paginated list of contacts. Add <code class="text-xs font-mono text-gray-800 bg-gray-100 px-1 rounded">?update_from=YYYY-MM-DD HH:MM:SS</code> to filter recently modified contacts. Use <code class="text-xs font-mono text-gray-800 bg-gray-100 px-1 rounded">?page=1&limit=15</code> for pagination, and <code class="text-xs font-mono text-gray-800 bg-gray-100 px-1 rounded">?search=QUERY</code> to search by name or phone.</p>
                        </div>
                        
                        <!-- Create Contact -->
                        <div class="mb-10">
                            <div class="flex items-center gap-3 mb-3">
                                <span class="px-2 py-0.5 rounded text-xs font-bold bg-emerald-100 text-emerald-800">POST</span>
                                <code class="text-sm font-bold text-gray-900">/api/v1/contacts</code>
                            </div>
                            <p class="text-gray-600 text-sm mb-4 leading-relaxed">Create or upsert a contact by phone number.</p>
                            
                            <h4 class="text-xs font-bold text-gray-900 uppercase tracking-wider mb-3">Parameters</h4>
                            <div class="overflow-x-auto border border-gray-200 rounded-lg shadow-sm">
                                <table class="w-full text-sm text-left">
                                    <thead class="bg-gray-50 text-gray-500 font-medium">
                                        <tr>
                                            <th class="px-4 py-3 border-b border-gray-200">Parameter</th>
                                            <th class="px-4 py-3 border-b border-gray-200">Description</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200 text-gray-700">
                                        <tr>
                                            <td class="px-4 py-3 font-mono text-xs text-blue-600">phone <span class="ml-1 text-[10px] uppercase text-red-500 font-bold">Req</span></td>
                                            <td class="px-4 py-3">Contact phone number with country code.</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-3 font-mono text-xs text-blue-600">name</td>
                                            <td class="px-4 py-3">Full name.</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-3 font-mono text-xs text-blue-600">email</td>
                                            <td class="px-4 py-3">Email address.</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-3 font-mono text-xs text-blue-600">{custom_field_name}</td>
                                            <td class="px-4 py-3">Any custom field attached to your company can be sent directly as a property (e.g. "email").</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Update / Delete -->
                        <div class="mb-10">
                            <div class="flex items-center gap-3 mb-3">
                                <span class="px-2 py-0.5 rounded text-xs font-bold bg-amber-100 text-amber-800">PUT</span>
                                <code class="text-sm font-bold text-gray-900">/api/v1/contacts/{id}</code>
                            </div>
                            <div class="flex items-center gap-3 mb-3">
                                <span class="px-2 py-0.5 rounded text-xs font-bold bg-red-100 text-red-800">DEL</span>
                                <code class="text-sm font-bold text-gray-900">/api/v1/contacts/{id}</code>
                            </div>
                            <p class="text-gray-600 text-sm mb-4 leading-relaxed">Update an existing contact or delete a contact.</p>
                        </div>
                    </div>
                    <!-- Code -->
                    <div class="w-full lg:w-1/2 p-6 md:p-10 lg:px-12 lg:py-16 bg-[#0f172a] lg:bg-transparent lg:border-t lg:border-slate-800/50">
                        <div class="bg-[#1e293b] rounded-xl border border-slate-700 shadow-2xl overflow-hidden mb-8">
                            <div class="px-4 py-3 border-b border-slate-700/50 bg-[#0f172a]/50 flex items-center justify-between">
                                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Request: Upsert Contact</span>
                                <span class="text-xs font-semibold text-amber-400">POST Payload</span>
                            </div>
                            <div class="p-4 overflow-x-auto">
<pre><code class="text-sm font-mono text-slate-300">{
  <span class="text-blue-300">"phone"</span>: <span class="text-emerald-300">"1234567890"</span>,
  <span class="text-blue-300">"name"</span>: <span class="text-emerald-300">"Jane Doe"</span>,
  <span class="text-blue-300">"email"</span>: <span class="text-emerald-300">"jane@example.com"</span>,
  <span class="text-blue-300">"company"</span>: <span class="text-emerald-300">"Acme Corp"</span>
}</code></pre>
                            </div>
                        </div>
                    </div>
                </div>



                <!-- Footer -->
                <div class="flex flex-col lg:flex-row w-full border-t border-gray-200 lg:border-t-0">
                    <div class="w-full lg:w-1/2 p-6 md:p-10 lg:px-12 lg:py-8 bg-white lg:border-t lg:border-gray-200">
                        <p class="text-sm text-gray-500">&copy; {{ date('Y') }} WACM. All rights reserved. API Version 1.0.</p>
                    </div>
                    <div class="w-full lg:w-1/2 p-6 md:p-10 lg:px-12 lg:py-8 bg-[#0f172a] lg:bg-transparent lg:border-t lg:border-slate-800/50">
                    </div>
                </div>

            </div>
        </div>
    </div>
</x-guest-layout>