@extends('layouts.docs')

@section('title', 'Cores - Design System')

@section('body')
    <div class="prose dark:prose-invert max-w-none">
        <div class="flex items-center gap-3 mb-6">
            <div class="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
                <flux:icon.swatch class="size-6 text-blue-600 dark:text-blue-400" />
            </div>
            <h1 class="!mb-0">Cores</h1>
        </div>

        <p class="text-xl text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl">
            A paleta de cores do OfficeGest foi desenhada para garantir clareza, hierarquia visual e acessibilidade em todo o ecossistema do software.
        </p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mt-12">
            {{-- Cores Principais --}}
            <section>
                <h2 class="text-2xl font-bold mb-6">Cores Principais</h2>
                <div class="space-y-4">
                    <div class="flex items-center gap-4 p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm">
                        <div class="size-16 rounded-lg shadow-inner bg-[#00527a]"></div>
                        <div>
                            <div class="font-bold">Primary Blue</div>
                            <div class="text-sm font-mono text-zinc-500 uppercase">#00527A</div>
                            <div class="text-xs text-zinc-400 mt-1">Nossa cor de marca principal, usada em botões de ação e headers.</div>
                        </div>
                    </div>

                    <div class="flex items-center gap-4 p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm">
                        <div class="size-16 rounded-lg shadow-inner bg-[#0a6d97]"></div>
                        <div>
                            <div class="font-bold">Blue Light</div>
                            <div class="text-sm font-mono text-zinc-500 uppercase">#0A6D97</div>
                            <div class="text-xs text-zinc-400 mt-1">Usada para estados hover e variantes secundárias.</div>
                        </div>
                    </div>

                    <div class="flex items-center gap-4 p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm">
                        <div class="size-16 rounded-lg shadow-inner bg-[#0b4060]"></div>
                        <div>
                            <div class="font-bold">Dark Blue</div>
                            <div class="text-sm font-mono text-zinc-500 uppercase">#0B4060</div>
                            <div class="text-xs text-zinc-400 mt-1">Usada em fundos escuros e gradientes da sidebar.</div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- Cores de Semântica --}}
            <section>
                <h2 class="text-2xl font-bold mb-6">Semântica e Feedback</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div class="p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
                        <div class="h-12 w-full rounded bg-[#28a745] mb-2"></div>
                        <div class="font-semibold text-sm">Success</div>
                        <div class="text-xs text-zinc-500 font-mono">#28A745</div>
                    </div>
                    <div class="p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
                        <div class="h-12 w-full rounded bg-[#dc3545] mb-2"></div>
                        <div class="font-semibold text-sm">Danger</div>
                        <div class="text-xs text-zinc-500 font-mono">#DC3545</div>
                    </div>
                    <div class="p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
                        <div class="h-12 w-full rounded bg-[#ffc107] mb-2"></div>
                        <div class="font-semibold text-sm">Warning</div>
                        <div class="text-xs text-zinc-500 font-mono">#FFC107</div>
                    </div>
                    <div class="p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
                        <div class="h-12 w-full rounded bg-[#17a2b8] mb-2"></div>
                        <div class="font-semibold text-sm">Info</div>
                        <div class="text-xs text-zinc-500 font-mono">#17A2B8</div>
                    </div>
                </div>
            </section>
        </div>

        <h2 class="text-2xl font-bold mt-16 mb-6">Uso em Demos</h2>
        <p>
            Para garantir que as demos utilizam as cores originais do sistema, usamos o wrapper <code>&lt;og-demo&gt;</code> que injeta o CSS do Bootstrap 4 isoladamente.
        </p>

        <div class="mt-8">
            <og-demo>
                <div class="mb-3">
                    <span class="badge badge-primary">Primary</span>
                    <span class="badge badge-secondary">Secondary</span>
                    <span class="badge badge-success">Success</span>
                    <span class="badge badge-danger">Danger</span>
                    <span class="badge badge-warning">Warning</span>
                    <span class="badge badge-info">Info</span>
                </div>
                <div class="alert alert-primary">
                    Este é um exemplo de alerta com a cor primária do OfficeGest.
                </div>
            </og-demo>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/design-system/og-demo.js') }}"></script>
@endpush