@extends('layouts.docs')

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

        <p class="text-xl text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl mb-12">
            Explore a nossa biblioteca de componentes reutilizáveis para construir interfaces consistentes e poderosas no ecossistema OfficeGest.
        </p>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {{-- Simple Components --}}
            <div class="space-y-4">
                <h2 class="text-xs uppercase tracking-widest text-zinc-500 font-bold border-b pb-2">Simple Components</h2>
                
                <a href="{{ route('docs.show', 'design/button') }}" class="flex items-center justify-between p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-indigo-500 transition-colors group">
                    <div class="flex items-center gap-3">
                        <flux:icon.plus-circle class="size-5 text-zinc-400 group-hover:text-indigo-500" />
                        <span class="font-medium">Button</span>
                    </div>
                    <flux:icon.chevron-right variant="mini" class="size-4 text-zinc-300" />
                </a>

                <a href="{{ route('docs.show', 'design/modal') }}" class="flex items-center justify-between p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-indigo-500 transition-colors group">
                    <div class="flex items-center gap-3">
                        <flux:icon.window class="size-5 text-zinc-400 group-hover:text-indigo-500" />
                        <span class="font-medium">Modal</span>
                    </div>
                    <flux:icon.chevron-right variant="mini" class="size-4 text-zinc-300" />
                </a>

                <a href="{{ route('docs.show', 'design/alert') }}" class="flex items-center justify-between p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-indigo-500 transition-colors group">
                    <div class="flex items-center gap-3">
                        <flux:icon.bell class="size-5 text-zinc-400 group-hover:text-indigo-500" />
                        <span class="font-medium">Alert</span>
                    </div>
                    <flux:icon.chevron-right variant="mini" class="size-4 text-zinc-300" />
                </a>

                <a href="{{ route('docs.show', 'design/badge') }}" class="flex items-center justify-between p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-indigo-500 transition-colors group">
                    <div class="flex items-center gap-3">
                        <flux:icon.tag class="size-5 text-zinc-400 group-hover:text-indigo-500" />
                        <span class="font-medium">Badge</span>
                    </div>
                    <flux:icon.chevron-right variant="mini" class="size-4 text-zinc-300" />
                </a>
            </div>

            {{-- Patterns --}}
            <div class="space-y-4">
                <h2 class="text-xs uppercase tracking-widest text-zinc-500 font-bold border-b pb-2">Patterns</h2>
                
                <a href="{{ route('docs.show', 'design/card') }}" class="flex items-center justify-between p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-indigo-500 transition-colors group">
                    <div class="flex items-center gap-3">
                        <flux:icon.rectangle-stack class="size-5 text-zinc-400 group-hover:text-indigo-500" />
                        <span class="font-medium">Card</span>
                    </div>
                    <flux:icon.chevron-right variant="mini" class="size-4 text-zinc-300" />
                </a>

                <a href="{{ route('docs.show', 'design/form') }}" class="flex items-center justify-between p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-indigo-500 transition-colors group">
                    <div class="flex items-center gap-3">
                        <flux:icon.document-text class="size-5 text-zinc-400 group-hover:text-indigo-500" />
                        <span class="font-medium">Form</span>
                    </div>
                    <flux:icon.chevron-right variant="mini" class="size-4 text-zinc-300" />
                </a>
            </div>
        </div>
    </div>
@endsection