@extends('layouts.docs')

@section('title', 'Design System - Visão Geral')

@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-zinc-100 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
                <flux:icon.home class="size-6 text-zinc-600 dark:text-zinc-400" />
            </div>
            <h1 class="!mb-0">Design System v3.0.0</h1>
        </div>

        <p class="text-xl text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-4xl">
            Bem-vindo ao sistema de design oficial do OfficeGest. Este guia centraliza todas as fundações visuais e componentes que compõem a nossa interface, garantindo uma experiência de utilizador coesa em todos os módulos do ERP.
        </p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
            {{-- Foundations Card --}}
            <div class="group relative p-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md transition-all">
                <div class="size-12 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-6">
                    <flux:icon.paint-brush class="size-6 text-blue-600 dark:text-blue-400" />
                </div>
                <h2 class="text-2xl font-bold mb-4">Fundações</h2>
                <p class="text-zinc-600 dark:text-zinc-400 mb-6">
                    As bases do nosso sistema: cores, tipografia, iconografia e princípios de acessibilidade.
                </p>
                <div class="flex flex-wrap gap-2 text-sm">
                    <a href="{{ route('docs.show', 'design/colors') }}" class="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-full hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">Cores</a>
                    <a href="{{ route('docs.show', 'design/icons') }}" class="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-full hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">Ícones</a>
                    <a href="{{ route('docs.show', 'design/typography') }}" class="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-full hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">Tipografia</a>
                </div>
            </div>

            {{-- Components Card --}}
            <div class="group relative p-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md transition-all">
                <div class="size-12 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center mb-6">
                    <flux:icon.squares-2x2 class="size-6 text-indigo-600 dark:text-indigo-400" />
                </div>
                <h2 class="text-2xl font-bold mb-4">Componentes</h2>
                <p class="text-zinc-600 dark:text-zinc-400 mb-6">
                    A nossa biblioteca de UI: botões, modals, tabelas, forms e outros padrões reutilizáveis.
                </p>
                <a href="{{ route('docs.show', 'design/components') }}" class="inline-flex items-center gap-2 font-semibold text-indigo-600 dark:text-indigo-400 group-hover:underline">
                    Ver todos os componentes
                    <flux:icon.arrow-right variant="mini" class="size-4" />
                </a>
            </div>
        </div>

        <section class="mt-16 p-8 rounded-2xl bg-gradient-to-br from-[#00527a] to-[#0b4060] text-white shadow-xl">
            <h2 class="text-2xl font-bold mb-4 text-white">Filosofia de Design</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
                <div>
                    <h3 class="text-lg font-bold mb-2 text-white/90">Clareza</h3>
                    <p class="text-sm text-white/70">Interfaces limpas que priorizam os dados e a facilidade de leitura.</p>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-2 text-white/90">Consistência</h3>
                    <p class="text-sm text-white/70">Os mesmos padrões visuais aplicados a todos os módulos.</p>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-2 text-white/90">Eficiência</h3>
                    <p class="text-sm text-white/70">Fluxos de trabalho otimizados para velocidade no dia-a-dia.</p>
                </div>
            </div>
        </section>
    </div>
@endsection