<script setup lang="ts">
import TopBar from './components/layout/TopBar.vue';
</script>

<template>
    <div class="min-h-screen bg-surface-50 dark:bg-surface-950">
        <TopBar />
        
        <div class="p-6">
            <div class="max-w-7xl mx-auto">
                <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-0 mb-4">
                    Personalización de Colores
                </h1>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Tarjeta de ejemplo 1 -->
                    <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
                        <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
                            Color Primario
                        </h2>
                        <p class="text-surface-600 dark:text-surface-400 mb-4">
                            El color primario azul se usa para botones, enlaces y elementos destacados.
                        </p>
                        <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-600 transition-colors">
                            Botón Primario
                        </button>
                    </div>

                    <!-- Tarjeta de ejemplo 2 -->
                    <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
                        <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
                            Colores de Superficie
                        </h2>
                        <p class="text-surface-600 dark:text-surface-400 mb-4">
                            Los colores de superficie definen el fondo y los tonos neutros de la aplicación.
                        </p>
                        <div class="flex gap-2">
                            <div class="w-8 h-8 rounded bg-surface-100 dark:bg-surface-800" title="surface-100"></div>
                            <div class="w-8 h-8 rounded bg-surface-200 dark:bg-surface-700" title="surface-200"></div>
                            <div class="w-8 h-8 rounded bg-surface-300 dark:bg-surface-600" title="surface-300"></div>
                            <div class="w-8 h-8 rounded bg-surface-400 dark:bg-surface-500" title="surface-400"></div>
                        </div>
                    </div>

                    <!-- Tarjeta de ejemplo 3 -->
                    <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
                        <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
                            Modo Oscuro
                        </h2>
                        <p class="text-surface-600 dark:text-surface-400 mb-4">
                            Usa el botón en la barra superior para cambiar entre modo claro y oscuro.
                        </p>
                        <div class="flex items-center gap-3">
                            <i class="pi pi-moon text-2xl text-primary"></i>
                            <span class="text-surface-700 dark:text-surface-300">Tema adaptable</span>
                        </div>
                    </div>

                    <!-- Tarjeta de ejemplo 4 -->
                    <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
                        <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
                            Personalización
                        </h2>
                        <p class="text-surface-600 dark:text-surface-400 mb-4">
                            Haz clic en el ícono de paleta en la barra superior para cambiar el color de superficie.
                        </p>
                        <div class="flex items-center gap-3">
                            <i class="pi pi-palette text-2xl text-primary"></i>
                            <span class="text-surface-700 dark:text-surface-300">5 colores de superficie</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
/* Estilos adicionales si es necesario */
</style>
