@extends('layouts.app')

@section('title', 'Documentation - ' . config('app.name'))

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold mb-2">Documentation</h2>
        <p class="text-[#706f6c] dark:text-[#A1A09A]
            Learn how to use the application
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-4">
                <h3 class="font-medium mb-4">Categories</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-[#1b1b18] dark:text-[#EDEDEC] hover:underline">Getting Started</a></li>
                    <li><a href="#" class="text-sm text-[#706f6c] dark:text-[#A1A09A] hover:text-[#1b1b18] dark:text-[#EDEDEC] Guide</a></li>
                    <li><a href="#" class="text-sm text-[#706f6c] dark:text-[#A1A09A] hover:text-[#1b1b18] dark:text-[#EDEDEC] Reference</a></li>
                    <li><a href="#" class="text-sm text-[#706f6c] dark:text-[#A1A09A] hover:text-[#1b1b18] dark:text-[#EDEDEC]
                    <li><a href="#" class="text-sm text-[#706f6c] dark:text-[#A1A09A] hover:text-[#1b1b18] dark:text-[#EDEDEC] Practices</a></li>
                </ul>
            </div>
        </div>

        <div class="lg:col-span-3">
            <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-8">
                <h3 class="text-xl font-semibold mb-4">Getting Started</h3>

                <div class="prose prose-sm max-w-none">
                    <h4 class="text-lg font-medium mb-2">Welcome to {{ config('app.name') }}</h4>
                    <p class="text-[#706f6c] dark:text-[#A1A09A] mb-4">
                        This documentation will help you get started with our application. Follow the guides below to learn more.
                    </p>

                    <h4 class="text-lg font-medium mb-2 mt-6">Quick Start Guide</h4>
                    <ol class="list-decimal list-inside space-y-2 text-[#706f6c] dark:text-[#A1A09A]
                        <li>Create your account and verify your email</li>
                        <li>Complete your profile information</li>
                        <li>Explore the dashboard and familiarize yourself with the interface</li>
                        <li>Create your first project</li>
                        <li>Invite team members to collaborate</li>
                    </ol>

                    <h4 class="text-lg font-medium mb-2 mt-6">Need More Help?</h4>
                    <p class="text-[#706f6c] dark:text-[#A1A09A]
                        Check out our <a href="{{ route('support') }}" class="text-[#1b1b18] dark:text-[#EDEDEC] hover:underline">support page</a> or contact our team for assistance.
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection