@extends('simulacros.layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/simulacros/index.css') }}" />

@endsection
@section('content')
    <main class="page-main">

        <div class="uk-section uk-padding-remove section2 opcional">
            <!-- Solo visible en dispositivos no móviles -->
            <div class="imagenSection21">
                <img src="{{ asset('assets/img/simulacros/portada.png') }}" alt="Fondo escritorio por defecto"
                    style="width: 100%; height: auto;">
            </div>
            <!-- Visible solo en móviles -->
            {{-- <div class="imagenSection22">
                <img src="{{ asset('assets/img/simulacros/portada_movil.jpg') }}" alt="Imagen de fondo"
                    style="width: 100%; height: auto;">

            </div> --}}

            <div class="sectionfinal">
                <div class="uk-container">
                    <div class="contenido-portada">

                        <h1>Simulacros tipo MINEDU con análisis inteligente para que llegues seguro al examen</h1>
                        <p>Con AUGE AI practicas como en el examen real, entrenas el tiempo, detectas tus debilidades y ves
                            tu progreso con claridad. No adivines tu puntaje: mídelo.</p>
                        <div class="div-botones">
                            <a href="#" uk-toggle="target: #portada_principal"
                                class="uk-button-morado uk-button-principal">
                                Comenzar prueba gratuita
                            </a>

                            <a href="#" uk-toggle="target: #portada_principal"
                                class="uk-button-alterno uk-button-principal">
                                Ver como funciona
                            </a>

                        </div>
                    </div>

                    <div class="div-botones tres-botones">
                        <span class="uk-button-morado uk-button-principal">
                            SIMULACROS REALES <img src="{{ asset('assets/img/simulacros/frame1.png') }}" alt="">
                        </span>

                        <span class="uk-button-morado uk-button-principal">
                            PROGRESO POR ÁREAS<img src="{{ asset('assets/img/simulacros/frame2.png') }}" alt="">
                        </span>

                        <span class="uk-button-morado uk-button-principal">
                            ACCESO 24/7 <img src="{{ asset('assets/img/simulacros/frame3.png') }}" alt="">
                        </span>

                    </div>
                </div>
            </div>

        </div>


        <div class="parte2">
            <div class="uk-container">
                <h3> ¿Qué recibes con <span>AUGE AI?</span> </h3>
                <p class="subtitulo-div">Un sistema de simulacros que te ayuda a entrenar, medir y mejorar</p>

                <div class="div-content uk-child-width-1-3@m uk-child-width-1-2@s uk-grid-match" uk-grid>

                    <!-- INDUCCIÓN A LA IA EN LA EDUCACIÓN -->
                    <div class="div-card">
                        <div class="card">
                            <img src="{{ asset('assets/img/simulacros/pc.png') }}" alt="Inducción a la IA">
                            <h4>Simulacros tipo MINEDU</h4>
                            <p>Exámenes estructurados como el oficial: Formato, dificultad y enfoque de evaluación.</p>
                            <ul>
                                <li>Nombramiento Docente</li>
                                <li>Contrato Docente</li>
                                <li>Ascenso de Escala</li>
                                <li>Cargos Directivos</li>
                            </ul>
                        </div>
                    </div>

                    <!-- HERRAMIENTAS DE IA PARA LA ENSEÑANZA EFICAZ -->
                    <div class="div-card">
                        <div class="card">
                            <img src="{{ asset('assets/img/simulacros/foco.png') }}"
                                alt="Herramientas de IA para la enseñanza">
                            <h4>Análisis inteligente</h4>
                            <p>Identifica tus debilidades y te muestran en qué mejorar para subir tu puntaje.</p>
                            <ul>
                                <li>Resultados por área</li>
                                <li>Historial de progreso</li>
                                <li>Errores frecuentes</li>
                            </ul>
                        </div>
                    </div>

                    <!-- PLANIFICACIÓN CURRICULAR CON IA -->
                    <div class="div-card">
                        <div class="card">
                            <img src="{{ asset('assets/img/simulacros/reloj.png') }}" alt="Planificación Curricular con IA">
                            <h4>Entrenamiento de tiempo</h4>
                            <p>Practica bajo presión real para administrar tus minutos el día del examen.</p>

                            <ul>
                                <li>Cronómetro</li>
                                <li>Ritmo recomendado</li>
                                <li>Mejora de velocidad</li>
                            </ul>
                        </div>
                    </div>



                </div>
            </div>
        </div>

        <div class="parte2">
            <div class="uk-container div-boton-central">
                <a href="#" uk-toggle="target: #portada_principal"
                    class="uk-button-morado uk-button-principal uk-boton-grande">
                    Comenzar prueba gratuita
                </a>
            </div>
        </div>

        <div class="parte2">
            <div class="uk-container">
                <h3> ¿Cómo funciona?</h3>
                <p class="subtitulo-div">Tres pasos claros para diagnosticar, entrenar y mejorar tu desempeño docente.</p>

                <div class="div-content uk-child-width-1-3@m uk-child-width-1-2@s uk-grid-match" uk-grid>

                    <!-- INDUCCIÓN A LA IA EN LA EDUCACIÓN -->
                    <div class="div-card">
                        <div class="card card-v2">
                            <img src="{{ asset('assets/img/simulacros/diagnostico.png') }}" alt="Inducción a la IA">
                            <h4>Diagnóstico rápido</h4>
                            <p>Nos dices tu objetivo docente, nivel y áreas de dificultad. AUGE AI adapta tu ruta.</p>

                        </div>
                    </div>

                    <!-- HERRAMIENTAS DE IA PARA LA ENSEÑANZA EFICAZ -->
                    <div class="div-card">
                        <div class="card card-v2">
                            <img src="{{ asset('assets/img/simulacros/docs.png') }}"
                                alt="Herramientas de IA para la enseñanza">
                            <h4>Práctica con simulacros</h4>
                            <p>Rinde simulacros como el examen real. Entrena tiempo y resolución de preguntas.</p>
                        </div>
                    </div>

                    <!-- PLANIFICACIÓN CURRICULAR CON IA -->
                    <div class="div-card">
                        <div class="card card-v2">
                            <img src="{{ asset('assets/img/simulacros/monitoring.png') }}"
                                alt="Planificación Curricular con IA">
                            <h4>Mira tu progreso</h4>
                            <p>Recibe reportes por área. Repite lo necesario hasta dominar tus puntos débiles.</p>

                        </div>
                    </div>



                </div>
            </div>
        </div>


        <div class="parte2" style="background-image: url('{{ asset('assets/img/simulacros/fondocolor.png') }}')">
            <div class="uk-container">
                <h1> ¡Hola! ¿Cómo te llamas?</h1>
                <p class="subtitulo-div" style="color: #fff;">Así personalizaremos tu experiencia AUGE AI</p>



                <form class="uk-form-stacked" id="form-postulacion" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="div-content uk-child-width-1-2@m uk-child-width-1-2@s uk-grid-match" uk-grid>

                        <input type="text" name="landing_id" id="landing_id" value="" hidden>
                        <!-- Nombre completo -->
                        <div class="uk-margin div-input">
                            <div class="uk-form-controls">
                                <input class="uk-input input-v2" id="nombres" type="text"
                                    placeholder="Nombres Completos" required>
                            </div>
                        </div>

                        <!-- Apellidos -->
                        <div class="uk-margin div-input">
                            <div class="uk-form-controls">
                                <input class="uk-input input-v2" id="celular" type="text"
                                    placeholder="Número de celular" required>
                            </div>
                        </div>

                        <!-- Especialidad -->
                        <div class="uk-margin div-input">
                            <div class="uk-form-controls">
                                <input class="uk-input input-v2" id="especialidad" type="text" placeholder="Especialidad"
                                    required>
                            </div>
                        </div>

                        <!-- Condición laboral -->
                        <div class="uk-margin div-input">
                            <div class="uk-form-controls">
                                <select class="uk-select input-v2" id="condicion_laboral" name="condicion_laboral" required>
                                    <option value="" disabled selected>Condición laboral</option>
                                    <option value="Ascenso">Nombrado</option>
                                    <option value="Nombramiento">Contratado</option>
                                </select>
                            </div>
                        </div>

                        <!-- Correo electrónico -->
                        <div class="uk-margin div-input">
                            <div class="uk-form-controls">
                                <input class="uk-input input-v2" id="email" type="email" placeholder="Email"
                                    required>
                            </div>
                        </div>

                        <!-- Contraseña -->
                        <div class="uk-margin div-input">
                            <div class="uk-form-controls">
                                <input class="uk-input input-v2" id="password" type="password" placeholder="Contraseña"
                                    required>
                            </div>
                        </div>



                    </div>

                    <div class="uk-margin div-checkbox-terminos">
                        <label style="display: flex">
                            <input class="uk-checkbox puntito" type="checkbox" name="terms" required>
                            <span style="display: inline-block;" class="terminos">
                                He leído y Acepto las <a href="{{ url('/politicas-privacidad') }}" target="_blank"
                                    rel="noopener noreferrer">políticas de
                                    privacidad</a> y los
                                <a href="{{ url('/terminos-condiciones') }}" target="_blank"
                                    rel="noopener noreferrer">términos y condiciones</a>
                            </span>

                        </label>

                        <button type="submit" class="uk-button-morado uk-button-principal btn-envio">Registrar</button>
                    </div>


                </form>



            </div>
        </div>


        <div class="parte2">
            <div class="uk-container">
                <h3> ¡Nuestros planes!</h3>
                <p class="subtitulo-div">Puedes utilizar servicios con los siguientes planes</p>

                <div class="div-content uk-child-width-1-2@m uk-child-width-1-2@s uk-grid-match" uk-grid>

                    <!-- INDUCCIÓN A LA IA EN LA EDUCACIÓN -->
                    <div>
                        <div class="card card-v2 card-planes">
                            <h2>30 días</h2>
                            <div class="div-precio">
                                <h1>S/59.90</h1>
                                <span>/mes</span>
                            </div>

                            <span class="precio-anterior">
                                Antes: S/89.90
                            </span>
                            <h4>Ideal para probar, medir tu nivel y comenzar a entrenar.</h4>

                            <ul>
                                <li>Acceso a simulacros</li>
                                <li>Resultados automáticos</li>
                                <li>Entrenamiento de tiempo</li>
                            </ul>

                            <div class="div-botones boton-especial">
                                <a href="#" uk-toggle="target: #portada_principal"
                                    class="uk-button-alterno uk-button-principal">
                                    Probar con diagnóstico
                                </a>

                                <a href="#" uk-toggle="target: #portada_principal"
                                    class="uk-button-morado uk-button-principal">
                                    Elegir 30 días
                                </a>

                            </div>
                        </div>
                    </div>

                    <!-- HERRAMIENTAS DE IA PARA LA ENSEÑANZA EFICAZ -->
                    <div>
                        <div class="card card-v2 card-planes">
                            <div class="div-tiempo">
                                <h2>30 días</h2>
                                <span class="uk-button-morado uk-button-principal">
                                    RECOMENDADO Ahorra +70%
                                </span>
                            </div>

                            <div class="div-precio">
                                <h1>S/179.90</h1>
                                <span>/mes</span>
                            </div>
                            <h4>Mejor costo - beneficio para todo el proceso docente.</h4>

                            <ul>
                                <li>Simulacros ilimitados</li>
                                <li>Análisis por áreas</li>
                                <li>Historial completo</li>
                                <li>Actualizaciones incluidas</li>
                            </ul>

                            <div class="div-botones boton-especial">
                                <a href="#" uk-toggle="target: #portada_principal"
                                    class="uk-button-alterno uk-button-principal">
                                    Iniciar prueba gratuita
                                </a>

                                <a href="#" uk-toggle="target: #portada_principal"
                                    class="uk-button-morado uk-button-principal">
                                    Elegir 365 días
                                </a>

                            </div>
                        </div>
                    </div>



                </div>
            </div>
        </div>

        <div class="parte2">
            <div class="uk-container div-boton-central">
                <a href="#" uk-toggle="target: #portada_principal"
                    class="uk-button-morado uk-button-principal uk-boton-grande">
                    Comenzar prueba gratuita
                </a>
            </div>
        </div>

        <div class="parte2">
            <div class="uk-container">
                <h3> Lo que dicen los docentes</h3>
                <div class="div-content uk-child-width-1-3@m uk-child-width-1-2@s uk-grid-match div-testimonios" uk-grid>

                    <!-- INDUCCIÓN A LA IA EN LA EDUCACIÓN -->
                    <div>
                        <div class="card card-testimonios">
                            <div class="img-text">
                                <img src="{{ asset('assets/img/simulacros/docente1.png') }}" alt="Inducción a la IA">
                                <div class="text-nombre">
                                    <h4>Ana Sofía Ramírez</h4>
                                    <p><i>Profesora (Inicial)</i></p>
                                </div>
                            </div>

                            <h4>“Ahora sé qué reforzar”</h4>
                            <p>“Con los simulacros vi mis fallas en pedagogía y mejoré mi puntaje en dos semanas.”</p>

                        </div>
                    </div>

                    <!-- HERRAMIENTAS DE IA PARA LA ENSEÑANZA EFICAZ -->
                    <div>
                        <div class="card card-testimonios">
                            <div class="img-text">
                                <img src="{{ asset('assets/img/simulacros/docente2.png') }}" alt="Inducción a la IA">
                                <div class="text-nombre">
                                    <h4>María Fernanda López</h4>
                                    <p><i>Profesora (Secundaria)</i></p>
                                </div>
                            </div>
                            <h4>“Me ayudó con el tiempo”</h4>
                            <p>“Antes no terminaba. Entrené con cronómetro y llegué más seguro al examen”</p>

                        </div>
                    </div>

                    <!-- PLANIFICACIÓN CURRICULAR CON IA -->
                    <div>
                        <div class="card card-testimonios">
                           <div class="img-text">
                                <img src="{{ asset('assets/img/simulacros/docente3.png') }}" alt="Inducción a la IA">
                                <div class="text-nombre">
                                    <h4>Carlos Eduardo Méndez</h4>
                                    <p><i>Docente (Ascenso)</i></p>
                                </div>
                            </div>
                            <h4>“Simulacros como el real”</h4>
                            <p>“Se parece bastante al estilo de preguntas. La retroalimentación me ordenó.”</p>


                        </div>
                    </div>



                </div>
            </div>
        </div>

        <div class="parte2">
            <div class="uk-container">
                <h3> Preguntas frecuentes</h3>
                <div class="div-faq uk-child-width-1-2@m uk-child-width-1-2@s uk-grid-match div-acordeon" uk-accordion uk-grid>

                    <!-- Pregunta 1 -->
                    <div class="uk-accordion-item">
                        <h3 class="uk-accordion-title faq-header"><span class="faq-arrow">▶</span> ¿AUGE AI reemplaza un curso?</h3>
                        <div class="uk-accordion-content faq-content">
                            <p>No. AUGE AI se centra en simulacros, diagnóstico y práctica. Es ideal para entrenar y medir tu avance de forma continua</p>
                        </div>
                    </div>

                    <!-- Pregunta 2 -->
                    <div class="uk-accordion-item">
                        <h3 class="uk-accordion-title faq-header"><span class="faq-arrow">▶</span> ¿Puedo acceder desde cualquier dispositivo?</h3>
                        <div class="uk-accordion-content faq-content">
                            <p>Sí. AUGE AI funciona en computadora, tablet y celular. Accede desde cualquier lugar y continúa desde donde dejaste</p>
                        </div>
                    </div>

                    <!-- Pregunta 3 -->
                    <div class="uk-accordion-item">
                        <h3 class="uk-accordion-title faq-header"><span class="faq-arrow">▶</span> ¿Cuántos simulacros hay disponibles?</h3>
                        <div class="uk-accordion-content faq-content">
                            <p>Contamos con simulacros actualizados y más se añaden constantemente. Podrás practicar múltiples veces para mejorar</p>
                        </div>
                    </div>

                    <!-- Pregunta 4 -->
                    <div class="uk-accordion-item">
                        <h3 class="uk-accordion-title faq-header"><span class="faq-arrow">▶</span> ¿Qué pasa después del período de prueba?</h3>
                        <div class="uk-accordion-content faq-content">
                            <p>Puedes elegir un plan de suscripción o simplemente no renovar. Tienes control total sobre tu membresía</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>




    </main>


@endsection

@section('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            $('#form-postulacion').on('submit', function(e) {
                e.preventDefault();

                // Validación rápida antes de enviar
                const nombres = $('#nombres').val().trim();
                const email = $('#email').val().trim();
                const celular = $('#celular').val().trim();
                const checkboxes = $('#form-postulacion input[type="checkbox"]:checked').length;

                if (nombres === '' || email === '' || celular === '' || checkboxes < 1) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Campos incompletos',
                        text: 'Por favor, completa todos los campos y acepta los términos antes de continuar.',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Entendido'
                    });
                    return;
                }

                // Enviar datos vía AJAX
                $.ajax({
                    url: "{{ route('landing.registro') }}", // 🔹 Ajusta con tu ruta correcta en web.php
                    method: "POST",
                    data: {
                        _token: $('input[name="_token"]').val(),
                        nombres: nombres,
                        email: email,
                        celular: celular,
                        condicion_laboral: $('#condicion_laboral').val(),
                    },

                    beforeSend: function() {
                        Swal.fire({
                            title: 'Enviando...',
                            text: 'Por favor espera un momento.',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Registro exitoso',
                            text: 'Gracias por registrarte',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'Aceptar'
                        }).then(() => {
                            // 🔹 Limpia el formulario
                            $('#form-postulacion')[0].reset();

                            // 🔹 Cierra el modal de UIkit
                            UIkit.modal('#portada_principal').hide();

                            // 🔹 Redirige a la página final
                            window.location.href =
                                "{{ route('landing.postregistro') }}";

                        });
                    },
                    error: function(xhr) {
                        let mensaje = 'Ocurrió un error inesperado. Intenta nuevamente.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            mensaje = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: mensaje,
                            confirmButtonColor: '#d33',
                            confirmButtonText: 'Reintentar'
                        });
                    }
                });

            });
        });
    </script>
@endsection