@extends('landing.layout.app')

@section('content')
    <main class="flex-grow">
        <!-- Hero Section -->
        <section class="relative bg-primary py-16 overflow-hidden">
            <div class="absolute inset-0 opacity-20">
                <img class="w-full h-full object-cover"
                    data-alt="A wide-angle professional photograph of a prestigious university campus featuring historical limestone buildings and modern glass architecture under a clear blue sky. The scene is bathed in bright, natural morning sunlight, emphasizing a sense of institutional stability and academic excellence. The overall composition is balanced and serene, reflecting a modern light-mode aesthetic consistent with a top-tier educational institution."
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuBo1yKFntL0Q8LyNPl8VRzLgVr4lKaik2hF1wvGLbVdrrVQCx6VlEPsiXC0QXQlFyJvBWM5mmlgw_OBfG0ax8ZUkAO7ipbFhtQ-LzJAsye57wgGdcMvojtV1Jw5yI7EsAdj7bT71zWaEtN03qbEcfPT-nuejI-DkcCDxfuL6WmZNkoS7kPSU4jU2jCnCpwkMbuEz_uol0eKC76MLf5F31BCHJ1NGA3aa_-DnQXBfEwmNv4Z_kMYbEUBx_KVkNOsMHClbVW_iXFoeOM" />
            </div>
            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="max-w-3xl">
                    <nav class="flex mb-4 text-white/70 text-label-sm uppercase tracking-widest">
                        <span class="hover:text-white cursor-pointer">Inicio</span>
                        <span class="mx-2">/</span>
                        <span class="text-white">Encuesta de Satisfacción</span>
                    </nav>
                    <h1 class="font-display-xl text-white mb-4">Encuesta de Satisfacción Estudiantil</h1>
                    <p class="text-body-lg text-white/90">Tu opinión es fundamental para el crecimiento de la
                        Universidad del Sur. Ayúdanos a mejorar nuestra excelencia académica y servicios
                        institucionales.</p>
                </div>
            </div>
        </section>
        <!-- Form Content -->
        <section class="max-w-7xl mx-auto px-6 py-12 -mt-12 relative z-20">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                <!-- Sidebar Info -->
                <div class="lg:col-span-4 space-y-6">
                    <div class="bg-white p-8 border border-surface-container-high rounded-lg shadow-sm">
                        <span class="material-symbols-outlined text-secondary text-4xl mb-4" data-icon="info">info</span>
                        <h3 class="font-headline-sm text-primary mb-2">Instrucciones</h3>
                        <p class="text-on-surface-variant text-body-sm leading-relaxed mb-4">
                            Por favor complete todos los campos de información personal antes de proceder a la
                            evaluación. Sus respuestas son anónimas y se utilizarán únicamente con fines estadísticos y
                            de mejora institucional.
                        </p>
                        <div class="p-4 bg-surface-container-low border-l-4 border-secondary">
                            <p class="text-xs font-bold text-secondary uppercase tracking-wider mb-1">Fecha Límite</p>
                            <p class="text-primary font-medium">15 de Diciembre, 2024</p>
                        </div>
                    </div>
                </div>
                <!-- Main Survey Form -->
                <div class="lg:col-span-8">
                    <form class="space-y-8">
                        <!-- Section: Student Details -->
                        <div class="bg-white p-8 border border-surface-container-high rounded-lg shadow-sm">
                            <h2 class="font-headline-md text-primary mb-6 flex items-center gap-2">
                                <span class="material-symbols-outlined" data-icon="person">person</span>
                                Datos del Estudiante
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="space-y-2">
                                    <label class="font-label-md text-on-surface-variant block">NOMBRE COMPLETO</label>
                                    <input
                                        class="w-full p-3 bg-white border border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary rounded transition-all outline-none text-body-md"
                                        placeholder="Ej. Juan Pérez" type="text" />
                                </div>
                                <div class="space-y-2">
                                    <label class="font-label-md text-on-surface-variant block">MATRÍCULA</label>
                                    <input
                                        class="w-full p-3 bg-white border border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary rounded transition-all outline-none text-body-md"
                                        placeholder="ID-000000" type="text" />
                                </div>
                                <div class="space-y-2 md:col-span-2">
                                    <label class="font-label-md text-on-surface-variant block">CAMPUS</label>
                                    <select
                                        class="w-full p-3 bg-white border border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary rounded transition-all outline-none text-body-md appearance-none">
                                        <option disabled="" selected="" value="">Seleccione su unidad
                                            académica</option>
                                        <option>Campus Central - Ciudad de México</option>
                                        <option>Campus Norte - Monterrey</option>
                                        <option>Campus Sur - Puebla</option>
                                        <option>Campus Virtual - Online</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- Section: Survey Questions -->
                        <div class="bg-white p-8 border border-surface-container-high rounded-lg shadow-sm">
                            <h2 class="font-headline-md text-primary mb-8 flex items-center gap-2">
                                <span class="material-symbols-outlined" data-icon="fact_check">fact_check</span>
                                Evaluación Académica
                            </h2>
                            <div class="space-y-12">
                                <!-- Q1 -->
                                <div class="space-y-4">
                                    <p class="font-body-lg text-primary">1. ¿Cómo calificaría la calidad de la
                                        enseñanza?</p>
                                    <div class="flex flex-wrap gap-4 md:gap-8">
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q1" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                1</div>
                                            <span
                                                class="text-xs text-on-surface-variant group-hover:text-primary">Deficiente</span>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q1" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                2</div>
                                            <span
                                                class="text-xs text-on-surface-variant group-hover:text-primary">Baja</span>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q1" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                3</div>
                                            <span
                                                class="text-xs text-on-surface-variant group-hover:text-primary">Regular</span>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q1" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                4</div>
                                            <span
                                                class="text-xs text-on-surface-variant group-hover:text-primary">Buena</span>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q1" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                5</div>
                                            <span
                                                class="text-xs text-on-surface-variant group-hover:text-primary">Excelente</span>
                                        </label>
                                    </div>
                                </div>
                                <!-- Q2 -->
                                <div class="space-y-4">
                                    <p class="font-body-lg text-primary">2. ¿Qué tan satisfecho está con las
                                        instalaciones del campus?</p>
                                    <div class="flex flex-wrap gap-4 md:gap-8">
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q2" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                1</div>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q2" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                2</div>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q2" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                3</div>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q2" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                4</div>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q2" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                5</div>
                                        </label>
                                    </div>
                                    <p class="text-xs text-on-surface-variant italic">Escala de 1 (Muy insatisfecho) a
                                        5 (Muy satisfecho)</p>
                                </div>
                                <!-- Q3 -->
                                <div class="space-y-4">
                                    <p class="font-body-lg text-primary">3. ¿Cómo evalúa el acceso a recursos
                                        académicos (biblioteca, laboratorios)?</p>
                                    <div class="flex flex-wrap gap-4 md:gap-8">
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q3" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                1</div>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q3" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                2</div>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q3" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                3</div>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q3" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                4</div>
                                        </label>
                                        <label class="flex flex-col items-center gap-2 cursor-pointer group">
                                            <input class="sr-only peer" name="q3" type="radio" />
                                            <div
                                                class="w-10 h-10 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                5</div>
                                        </label>
                                    </div>
                                </div>
                                <!-- Q4 -->
                                <div class="space-y-4">
                                    <p class="font-body-lg text-primary">4. ¿Considera que la atención administrativa
                                        es eficiente?</p>
                                    <div class="flex gap-6">
                                        <label class="flex items-center gap-3 cursor-pointer group">
                                            <input class="w-5 h-5 text-primary border-outline-variant focus:ring-primary"
                                                name="q4" type="radio" />
                                            <span
                                                class="text-body-md text-on-surface-variant group-hover:text-primary">Totalmente
                                                de acuerdo</span>
                                        </label>
                                        <label class="flex items-center gap-3 cursor-pointer group">
                                            <input class="w-5 h-5 text-primary border-outline-variant focus:ring-primary"
                                                name="q4" type="radio" />
                                            <span class="text-body-md text-on-surface-variant group-hover:text-primary">En
                                                desacuerdo</span>
                                        </label>
                                    </div>
                                </div>
                                <!-- Q5 -->
                                <div class="space-y-4">
                                    <p class="font-body-lg text-primary">5. ¿Recomendaría la Universidad del Sur a
                                        otros estudiantes?</p>
                                    <div class="flex gap-6">
                                        <label class="flex items-center gap-3 cursor-pointer group">
                                            <input class="w-5 h-5 text-primary border-outline-variant focus:ring-primary"
                                                name="q5" type="radio" />
                                            <span
                                                class="text-body-md text-on-surface-variant group-hover:text-primary">Definitivamente
                                                sí</span>
                                        </label>
                                        <label class="flex items-center gap-3 cursor-pointer group">
                                            <input class="w-5 h-5 text-primary border-outline-variant focus:ring-primary"
                                                name="q5" type="radio" />
                                            <span class="text-body-md text-on-surface-variant group-hover:text-primary">Tal
                                                vez</span>
                                        </label>
                                        <label class="flex items-center gap-3 cursor-pointer group">
                                            <input class="w-5 h-5 text-primary border-outline-variant focus:ring-primary"
                                                name="q5" type="radio" />
                                            <span class="text-body-md text-on-surface-variant group-hover:text-primary">No
                                                lo haría</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Submit Section -->
                        <div
                            class="flex flex-col sm:flex-row items-center justify-between gap-6 bg-surface-container-low p-8 border border-surface-container-high rounded-lg">
                            <div class="flex items-center gap-2 text-on-surface-variant">
                                <span class="material-symbols-outlined text-green-600" data-icon="lock">lock</span>
                                <span class="text-label-sm">Conexión segura y encriptada</span>
                            </div>
                            <div class="flex gap-4 w-full sm:w-auto">
                                <button
                                    class="w-full sm:w-auto px-8 py-3 border border-primary text-primary font-label-md rounded hover:bg-white transition-colors"
                                    type="reset">BORRAR TODO</button>
                                <button
                                    class="w-full sm:w-auto px-8 py-3 bg-secondary text-white font-label-md rounded hover:opacity-90 active:opacity-80 transition-opacity shadow-lg shadow-secondary/20"
                                    type="submit">ENVIAR ENCUESTA</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </main>
@endsection