<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Ficha Diagnóstica - DIAGNOSTIKA</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=roboto:400,500,700&display=swap" rel="stylesheet" />

        <!-- Tailwind CSS -->
        <?php if(file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot'))): ?>
            <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
        <?php else: ?>
            <script src="https://cdn.tailwindcss.com"></script>
        <?php endif; ?>
    </head>
    <body class="min-h-screen bg-gradient-to-b from-blue-900 to-blue-800 font-sans">
        <!-- Header Navigation -->
        <header class="bg-blue-950 px-3 sm:px-6 py-3 sm:py-4 shadow-lg">
            <div class="max-w-7xl mx-auto flex justify-between items-center">
                <!-- Logo -->
                <div class="flex items-center">
                    <img src="<?php echo e(asset('images/logo.gif')); ?>" alt="DIAGNOSTIKA Logo" class="h-10 sm:h-16" />
                </div>
                
                <!-- Navigation Buttons -->
                <nav class="flex items-center gap-2 sm:space-x-4">
                    <?php if(auth()->guard()->check()): ?>
                        <div class="flex items-center gap-2 sm:space-x-3">
                            <span class="text-white font-semibold text-xs sm:text-base"><?php echo e(Auth::user()->name ?? 'Usuario'); ?></span>
                            <form method="POST" action="<?php echo e(route('logout')); ?>" style="display:inline;">
                                <?php echo csrf_field(); ?>
                                <button type="submit" class="text-white border border-white px-2 sm:px-4 py-1 sm:py-2 rounded text-xs sm:text-base hover:bg-red-600 hover:border-red-600 transition">
                                    Salir
                                </button>
                            </form>
                        </div>
                    <?php else: ?>
                        <?php if(Route::has('login')): ?>
                            <a href="<?php echo e(route('login')); ?>" class="text-white border border-white px-2 sm:px-4 py-1 sm:py-2 rounded text-xs sm:text-base hover:bg-white hover:text-blue-900 transition">
                                Iniciar
                            </a>
                            <?php if(Route::has('register')): ?>
                                <a href="<?php echo e(route('register')); ?>" class="bg-blue-600 text-white px-2 sm:px-4 py-1 sm:py-2 rounded text-xs sm:text-base hover:bg-blue-700 transition">
                                    Registrar
                                </a>
                            <?php endif; ?>
                        <?php endif; ?>
                    <?php endif; ?>
                </nav>
            </div>
        </header>

        <!-- Main Content -->
        <main class="max-w-7xl mx-auto px-3 sm:px-6 py-6 sm:py-12">
            <!-- Hero Section -->
            <div class="text-center mb-8 sm:mb-12">
                <div class="flex justify-center mb-3 sm:mb-4">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                </div>
                <h1 class="text-2xl sm:text-4xl font-bold text-white mb-2">Ficha Diagnóstica para Instituciones Educativas</h1>
                <p class="text-blue-100 text-sm sm:text-lg mb-1"></p>
                <p class="text-blue-200 text-sm sm:text-base mb-4 sm:mb-6">Evaluación de los compromisos de gestión escolar.</p>
                <p class="text-blue-100 text-sm sm:text-base max-w-2xl mx-auto px-2">
                    Herramienta diseñada para fortalecer a tu institución educativa a través de una evaluación estructurada, automatizada y científicamente fundamentada.
                </p>
            </div>

            <!-- Two Column Cards -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-8 mb-8 sm:mb-12">
                <!-- Usuarios Registrados -->
                <div class="bg-white rounded-lg shadow-lg p-4 sm:p-8 text-center">
                    <div class="flex justify-center mb-4 sm:mb-6">
                        <div class="w-10 h-10 sm:w-14 sm:h-14 bg-blue-100 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 sm:w-8 sm:h-8 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
                            </svg>
                        </div>
                    </div>
                    <h2 class="text-lg sm:text-2xl font-bold text-gray-800 mb-2 sm:mb-3">Usuarios Registrados</h2>
                    <p class="text-gray-600 text-xs sm:text-base mb-4 sm:mb-6">
                        Si ya tienes una cuenta registrada, accede con tus credenciales para completar, guardar y continuar tus diagnósticos en cualquier momento.
                    </p>
                    <button onclick="window.location.href='<?php echo e(route('login')); ?>'" class="bg-blue-900 text-white px-4 sm:px-8 py-2 sm:py-3 rounded-lg font-semibold text-xs sm:text-base hover:bg-blue-800 transition">
                        Iniciar Sesión
                    </button>
                </div>

                <!-- Diagnóstico Público -->
                <div class="bg-white rounded-lg shadow-lg p-4 sm:p-8 text-center">
                    <div class="flex justify-center mb-4 sm:mb-6">
                        <div class="w-10 h-10 sm:w-14 sm:h-14 bg-green-100 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 sm:w-8 sm:h-8 text-green-900" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M18 8h-1V6c0-2.76-2.24-5-5-5s-5 2.24-5 5v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z"></path>
                            </svg>
                        </div>
                    </div>
                    <h2 class="text-lg sm:text-2xl font-bold text-gray-800 mb-2 sm:mb-3">Diagnóstico Público</h2>
                    <p class="text-gray-600 text-xs sm:text-base mb-4 sm:mb-6">
                        Acceso rápido y directo para evaluaciones puntuales. Explora nuestra plataforma de diagnóstico automatizada. Para guardar el avance, regístrate.
                    </p>
                    <a href="<?php echo e(route('compromiso1.libre')); ?>" class="inline-block bg-green-600 text-white px-4 sm:px-8 py-2 sm:py-3 rounded-lg font-semibold text-xs sm:text-base hover:bg-green-700 transition">
                        Comenzar Diagnóstico
                    </a>
                </div>
            </div>

            <!-- Benefits Section -->
            <div class="bg-white rounded-lg shadow-lg p-4 sm:p-8">
                <h3 class="text-lg sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6 text-center">¿Qué obtendrás?</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-6">
                    <div class="flex items-start gap-3 sm:space-x-4">
                        <div class="flex-shrink-0 mt-1">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-gray-700 text-xs sm:text-base font-semibold">Evaluación detallada de los Compromisos de Gestión Escolar.</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3 sm:space-x-4">
                        <div class="flex-shrink-0 mt-1">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-gray-700 text-xs sm:text-base font-semibold">Reporte visual con gráficos de resultados</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3 sm:space-x-4">
                        <div class="flex-shrink-0 mt-1">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-gray-700 text-xs sm:text-base font-semibold">Identificación de áreas prioritarias de mejora</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3 sm:space-x-4">
                        <div class="flex-shrink-0 mt-1">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-gray-700 text-xs sm:text-base font-semibold">Instrumentos de Gestión Escolar (PEI, PAT, PCI, RI)</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- Footer -->
        <footer class="bg-blue-950 text-blue-100 py-4 sm:py-6 mt-8 sm:mt-12">
            <div class="max-w-7xl mx-auto px-3 sm:px-6 text-center text-xs sm:text-base">
                <p>&copy; 2026 DIAGNOSTIKA. Herramienta de Evaluación Educativa</p>
            </div>
        </footer>

        <!-- WhatsApp Button -->
        <?php echo $__env->make('components.whatsapp-button', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
    </body>
</html>
<?php /**PATH D:\proyecto-web\diagnostika\src\resources\views/welcome.blade.php ENDPATH**/ ?>