@extends('layouts.docs')

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

        <p class="text-xl text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl">
            A tipografia no OfficeGest é otimizada para legibilidade e interface de dados densa, utilizando fontes modernas e uma escala tipográfica clara.
        </p>

        <section class="mt-12">
            <h2 class="text-2xl font-bold mb-6">Fonte Principal</h2>
            <div class="p-6 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm">
                <div class="text-4xl font-sans mb-2 font-bold tracking-tight">Instrument Sans</div>
                <p class="text-zinc-500 italic mb-4">A fonte padrão para toda a interface.</p>
                <div class="flex gap-4">
                    <span class="font-normal">Regular 400</span>
                    <span class="font-medium">Medium 500</span>
                    <span class="font-semibold">Semibold 600</span>
                    <span class="font-bold">Bold 700</span>
                </div>
            </div>
        </section>

        <section class="mt-12">
            <h2 class="text-2xl font-bold mb-6">Escala e Estilos BS4</h2>
            <p>Abaixo estão os estilos típicos renderizados com o CSS do sistema legado através do <code>&lt;og-demo&gt;</code>:</p>
            
            <div class="mt-8">
                <og-demo>
                    <h1 class="h1">H1 - Títulos de Página</h1>
                    <h2 class="h2">H2 - Seções Principais</h2>
                    <h3 class="h3">H3 - Subseções</h3>
                    <h4 class="h4">H4 - Títulos de Card</h4>
                    <p class="lead">Este é um parágrafo "lead" para introduções.</p>
                    <p>Este é um parágrafo padrão de corpo de texto. O OfficeGest foca-se em legibilidade extrema.</p>
                    <p class="text-muted">Texto com a classe .text-muted para informações secundárias.</p>
                </og-demo>
            </div>
        </section>

        <section class="mt-12">
            <h2 class="text-2xl font-bold mb-6">Código e Dados</h2>
            <p>Para interfaces de código e visualização de dados brutos, utilizamos fontes monoespaçadas.</p>
            <div class="p-6 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm">
                <code class="font-mono text-sm bg-zinc-100 dark:bg-zinc-850 p-1 rounded">JetBrains Mono / Courier New</code>
                <p class="mt-4 font-mono text-sm leading-relaxed">
                    $user = User::find(1);<br>
                    return $user->toArray();
                </p>
            </div>
        </section>
    </div>
@endsection

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