@extends('layouts.docs')

@section('title', 'Ícones - 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-yellow-100 dark:bg-yellow-900/30 rounded-lg">
                <flux:icon.sparkles class="size-6 text-yellow-600 dark:text-yellow-400" />
            </div>
            <h1 class="!mb-0">Ícones</h1>
        </div>

        <p class="text-xl text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl">
            O OfficeGest utiliza uma biblioteca de ícones personalizada e expandida, garantindo consistência visual em todas as ações e módulos.
        </p>

        <section class="mt-12">
            <h2 class="text-2xl font-bold mb-6">Uso em Blade</h2>
            <p>Os ícones podem ser chamados através do helper de UI ou diretamente via classes CSS nas demos.</p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                <div class="p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm">
                    <pre class="language-php"><code>UI::Icon('user')</code></pre>
                </div>
                <div class="p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm">
                    <pre class="language-html"><code>&lt;i class="og-icon-user"&gt;&lt;/i&gt;</code></pre>
                </div>
            </div>
        </section>

        <section class="mt-12">
            <h2 class="text-2xl font-bold mb-6">Exemplos Comuns</h2>
            <p>Alguns dos ícones mais utilizados em navegação e ações:</p>
            
            <div class="mt-8">
                <og-demo>
                    <div class="row text-center">
                        <div class="col-3 mb-4">
                            <i class="og-icon-dashboard h2 d-block"></i>
                            <small>dashboard</small>
                        </div>
                        <div class="col-3 mb-4">
                            <i class="og-icon-user h2 d-block"></i>
                            <small>user</small>
                        </div>
                        <div class="col-3 mb-4">
                            <i class="og-icon-cart h2 d-block"></i>
                            <small>cart</small>
                        </div>
                        <div class="col-3 mb-4">
                            <i class="og-icon-settings h2 d-block"></i>
                            <small>settings</small>
                        </div>
                        <div class="col-3 mb-4">
                            <i class="og-icon-search h2 d-block"></i>
                            <small>search</small>
                        </div>
                        <div class="col-3 mb-4">
                            <i class="og-icon-plus h2 d-block"></i>
                            <small>plus</small>
                        </div>
                        <div class="col-3 mb-4">
                            <i class="og-icon-trash h2 d-block"></i>
                            <small>trash</small>
                        </div>
                        <div class="col-3 mb-4">
                            <i class="og-icon-check h2 d-block"></i>
                            <small>check</small>
                        </div>
                    </div>
                </og-demo>
            </div>
        </section>

        <section class="mt-12">
            <h2 class="text-2xl font-bold mb-6">Integração com o Sistema</h2>
            <p>O sistema de ícones é dinâmico e suporta bibliotecas externas como FontAwesome quando necessário, mas o pack <code>og-icon</code> é o preferido para consistência de design.</p>
        </section>
    </div>
@endsection

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